.chapter-range-dialog {
    width: min(480px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-bg);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    font: inherit;
}
.chapter-range-dialog::backdrop { background: var(--color-overlay); }
.chapter-range-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chapter-range-heading h2 { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 600; }
.chapter-range-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.chapter-range-close:hover { background: var(--color-bg-secondary); }
.chapter-range-story { margin: 8px 0 20px; color: var(--color-text-secondary); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.chapter-range-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chapter-range-fields label { display: block; width: fit-content; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.chapter-range-fields input { width: 100%; min-width: 0; height: 44px; padding: 8px 12px; border: 1px solid var(--color-input-border); border-radius: 12px; background: var(--color-input-bg); color: var(--color-text-primary); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; }
.chapter-range-fields input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-input-focus-ring); }
.chapter-range-fields input[aria-invalid="true"] { border-color: var(--color-danger); }
.chapter-range-help { margin: 12px 0 20px; font-size: 13px; color: var(--color-text-muted); line-height: 1.7; }
.chapter-range-summary { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.chapter-range-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; }
.chapter-range-summary dt { color: var(--color-text-secondary); }
.chapter-range-summary dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.chapter-range-summary .chapter-range-total { margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-light); font-weight: 600; }
.chapter-range-total dd { color: var(--color-primary); font-weight: 600; }
.chapter-range-status { min-height: 44px; margin: 16px 0 0; color: var(--color-text-muted); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.chapter-range-status.is-error { color: var(--color-text-primary); }
.chapter-range-topup { display: inline-block; margin: 4px 0 0; font-size: 14px; }
.chapter-range-topup[hidden] { display: none; }
.chapter-range-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.chapter-range-actions .btn { min-height: 44px; border-radius: 12px; }
.chapter-range-actions .btn:disabled { cursor: default; opacity: .55; }
body.chapter-range-open { overflow: hidden; }
@media (max-width: 480px) {
    .chapter-range-dialog { padding: 20px; }
    .chapter-range-fields { gap: 12px; }
    .chapter-range-actions .btn { flex: 1; min-width: 0; padding-inline: 12px; }
}