body.novelight-page-episode {
  --reader-font-size: 17px;
  --reader-line-height: 2.1;
  --reader-max-width: 820px;
}

body.novelight-page-episode main {
  max-width: var(--reader-max-width);
  transition: max-width 160ms ease;
}

body.novelight-page-episode .content {
  font-size: var(--reader-font-size);
  line-height: var(--reader-line-height);
}

.reading-settings-host {
  margin-bottom: 14px;
}

.reading-settings {
  border: 1px solid #e3e5ea;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.reading-settings-summary {
  list-style: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  color: #575c66;
}

.reading-settings-summary::-webkit-details-marker {
  display: none;
}

.reading-settings-summary::after {
  content: '＋';
  float: right;
  color: #7c6bf2;
}

.reading-settings[open] .reading-settings-summary::after {
  content: '−';
}

.reading-settings-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
  border-top: 1px solid #eef0f3;
}

.reading-setting-field {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  color: #666b75;
  font-size: 12px;
  font-weight: 800;
}

.reading-setting-select {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid #d7dae0;
  border-radius: 8px;
  background: #fff;
  color: #222;
}

.reading-settings-reset {
  align-self: end;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #d7dae0;
  border-radius: 8px;
  background: #fff;
  color: #555b65;
  font-weight: 800;
  cursor: pointer;
}

.reading-settings-note {
  grid-column: 1 / -1;
  color: #7b8089;
  font-size: 12px;
  line-height: 1.6;
}

body.novelight-page-episode[data-reading-theme='dark'] {
  background: #0b0f16;
  color: #e8eaf0;
}

body.novelight-page-episode[data-reading-theme='dark'] header,
body.novelight-page-episode[data-reading-theme='dark'] .card,
body.novelight-page-episode[data-reading-theme='dark'] .reading-settings,
body.novelight-page-episode[data-reading-theme='dark'] .modal-card {
  background: #141923;
  border-color: #2a313e;
  color: #e8eaf0;
}

body.novelight-page-episode[data-reading-theme='dark'] h1,
body.novelight-page-episode[data-reading-theme='dark'] .content {
  color: #e8eaf0;
}

body.novelight-page-episode[data-reading-theme='dark'] .reading-settings-panel {
  border-color: #272e39;
}

body.novelight-page-episode[data-reading-theme='dark'] .reading-settings-summary,
body.novelight-page-episode[data-reading-theme='dark'] .reading-setting-field,
body.novelight-page-episode[data-reading-theme='dark'] .reading-settings-note,
body.novelight-page-episode[data-reading-theme='dark'] .back,
body.novelight-page-episode[data-reading-theme='dark'] .number,
body.novelight-page-episode[data-reading-theme='dark'] .meta,
body.novelight-page-episode[data-reading-theme='dark'] .status {
  color: #b6bdc8;
}

body.novelight-page-episode[data-reading-theme='dark'] .reading-setting-select,
body.novelight-page-episode[data-reading-theme='dark'] .reading-settings-reset,
body.novelight-page-episode[data-reading-theme='dark'] .report {
  background: #1d2430;
  border-color: #394352;
  color: #edf0f5;
}

body.novelight-page-episode[data-reading-theme='dark'] .meta {
  border-color: #2a313e;
}

@media (max-width: 760px) {
  body.novelight-page-episode main {
    max-width: 100%;
  }

  .reading-settings-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .reading-settings-panel {
    grid-template-columns: 1fr;
  }
}