/* Optional black palette. Accent colors remain controlled by member preferences. */
html[data-amoled="on"] {
  color-scheme: dark;
  --bg: #000;
  --panel: #0b0b0b;
  --raised: #171717;
  --muted: #b5b5bb;
  --line: #ffffff26;
  --ink: #f5f5f7;
  background: #000;
}

html[data-amoled="on"] :is(body, #app, .site-header, .subnav, .site-footer, .entry) {
  background: #000;
}

html[data-amoled="on"] .entry::before {
  background: none;
}

/* These two existing variants set their backgrounds with !important. */
html[data-amoled="on"] body.focus-mode {
  background: #000 !important;
}

html[data-amoled="on"] .entry .search-dropdown {
  background: var(--panel) !important;
}

html[data-amoled="on"] :is(.member-panel, .profile-banner, .profile-stats > div,
  .profile-dropdown, .search-dropdown, .ranking, .side-box, .episodes-panel,
  .episode-side, .watch-info, .filters, .empty-state, .detail-layout, .genre-tile,
  .tonight-section, .quiet-state, .library-table, .watch-ep-aside) {
  background: var(--panel);
  border-color: var(--line);
}

html[data-amoled="on"] :is(.settings-field input, .settings-field textarea,
  .preference-row select, .field input, .field select, .search-form,
  .score-box, .library-table-heading, .library-progress input, .import-input,
  .schedule-search, .schedule-zone select) {
  background: var(--raised);
  color: var(--ink);
  border-color: var(--line);
}

html[data-amoled="on"] :is(.member-panel p, .preference-row small, .member-note,
  .card-meta, .rank-copy p, .detail-facts dt, .profile-local-label) {
  color: var(--muted);
}

html[data-amoled="on"] .setting-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* AMOLED is a complete black canvas, not a panel over a running wallpaper. */
html[data-amoled="on"] :is(body,#app,.entry){background:#000!important}
html[data-amoled="on"] :is(.entry-video-container,.home-live-wallpaper,.entry .ambient-controls,.entry .first-visit-hint){display:none!important}
html[data-amoled="on"] .entry:before,html[data-amoled="on"] .entry:after{background:none!important;display:none!important}
html[data-amoled="on"] .entry-content{padding-top:48px!important;padding-bottom:20px!important}
html[data-amoled="on"] .entry-collection{margin-top:28px!important}
html[data-amoled="on"] .site-header{border-bottom:1px solid #ffffff14}
@media(max-width:600px){html[data-amoled="on"] .entry-content{padding-top:28px!important}html[data-amoled="on"] .entry .entry-identity .brand{font-size:54px!important}html[data-amoled="on"] .entry-actions{gap:12px!important}}
