:root {
    color-scheme: dark;
    font-family: Arial, Helvetica, sans-serif;
    background: #0f172a;
    color: #d7dde8;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; }

.reader-shell { width: min(1240px, 94%); margin: 0 auto; padding: 48px 0; }
.reader-header { margin-bottom: 28px; }
h1 { margin: 0; color: #ffffff; font-size: clamp(32px, 5vw, 52px); }
h2 { margin: 0; color: #ffffff; font-size: 24px; }

.reader-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
    background: #111c31;
    border: 1px solid #263449;
    border-radius: 14px;
}

label { display: grid; gap: 8px; color: #98a3b6; }
select {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #475569;
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
    font: inherit;
}

.reader-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.chapter-panel, .chapter-content {
    padding: 26px;
    background: #111c31;
    border: 1px solid #263449;
    border-radius: 14px;
}

.chapter-panel { display: grid; grid-template-rows: auto 1fr; gap: 16px; }
.chapter-panel select { min-height: 320px; padding: 6px; }
.chapter-panel option { padding: 9px; }
.chapter-content { min-height: 520px; }
#chapter-body { margin-top: 22px; color: #d7dde8; font-size: 18px; line-height: 1.75; white-space: pre-wrap; }
.reader-error { margin: 20px 0 0; color: #fca5a5; }

@media (max-width: 760px) {
    .reader-shell { padding: 24px 0; }
    .reader-controls, .reader-layout { grid-template-columns: 1fr; }
    .chapter-panel select { min-height: 180px; }
}