.my-novels-page [hidden] { display: none !important; }
.my-novels-page .container { border: 0; border-radius: 0; box-shadow: none; }
.novel-page-heading, .novel-create-form, .novel-reader, .novel-history, #novelPageStatus { max-width: 520px; margin-right: auto; margin-left: auto; }
.novel-tabs.album-filter { max-width: 520px; margin: 0 auto 16px; padding: 4px 0; }
.novel-note { font-size: 12px; line-height: 1.7; color: var(--text-secondary); }
#novelPageStatus { margin-top: 12px; margin-bottom: 12px; font-size: 13px; line-height: 1.8; }
#novelPageStatus.is-error { color: #ba354e; }
.novel-create-form { padding: 0; border: 0; background: transparent; }
.novel-create-form fieldset { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.novel-create-form .form-control { width: 100%; min-height: 44px; box-sizing: border-box; padding: 11px 12px; border: 0; border-radius: var(--modal-control-radius); background: var(--modal-input-bg); color: var(--modal-input-text); font-family: inherit; font-size: 14px; line-height: 1.5; }
.novel-create-form .form-control::placeholder { color: var(--modal-placeholder-text); opacity: 1; }
.novel-create-form .form-control:focus-visible { outline: 2px solid var(--secondary-accent); outline-offset: 2px; }
.novel-create-form textarea { display: block; min-height: 150px; resize: vertical; }
.novel-model-row { display: flex; align-items: center; gap: 16px; }
.novel-model-row label { margin: 0; }
.novel-create-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.novel-create-actions .novel-note { align-self: flex-end; margin: 0; }
.novel-create-actions button { width: 100%; min-height: 44px; margin: 0; }
.novel-form-note { margin: 12px 0 0; font-size: 11px; text-align: center; }
.novel-reader { margin-top: 44px; padding: 0; border: 0; background: transparent; scroll-margin-top: 80px; }
.novel-reader h2 { margin: 0 0 8px; font-size: 19px; line-height: 1.6; overflow-wrap: anywhere; }
.novel-reader-body { font-size: 1rem; line-height: 2; letter-spacing: 0.01em; color: var(--text-primary); overflow-wrap: anywhere; }
.novel-reader-body p { margin: 0 0 1.55em; white-space: pre-wrap; }
.novel-reader-body p:last-child { margin-bottom: 0; }
.novel-history { margin-top: 0; margin-bottom: 24px; }
.novel-history h2 { margin: 0 0 12px; color: var(--modal-label-text); font-size: 14px; font-weight: 800; }
.novel-history-item { display: block; width: 100%; text-align: left; padding: 12px 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.novel-history-item strong { display: block; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.novel-history-item span { display: block; margin-top: 3px; font-size: 11px; line-height: 1.8; color: var(--text-secondary); }
.novel-create-form button:disabled { opacity: .55; cursor: default; }
@media (max-width: 768px) {
    .novel-reader-body { font-size: 0.96rem; line-height: 1.95; }
    .novel-create-form .form-control { font-size: 16px; }
}
.novel-model-options { display: flex; gap: 6px; }
.novel-model-options .album-filter-button { min-height: 36px; padding: 8px 16px; font-size: 12px; }
.novel-cast-initial { display: flex; height: 94px; align-items: center; justify-content: center; margin-bottom: 5px; border-radius: 10px; background: var(--modal-input-bg); font-size: 22px; }
.dress-up-cast-choice.is-selected .novel-cast-initial { box-shadow: 0 0 0 2px var(--primary-accent); }
#novelCastChoices .dress-up-cast-choice:focus-visible { outline: 2px solid var(--secondary-accent); outline-offset: 3px; }

#novelResult { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: var(--secondary-bg); color: var(--text-primary); }
#novelResult[open] { display: flex; flex-direction: column; }
#novelResult::backdrop { background: var(--secondary-bg); }
body:has(#novelResult[open]) { overflow: hidden; }
.novel-reader-header { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 16px; padding: calc(20px + env(safe-area-inset-top)) 20px 12px; }
.novel-reader-header h2 { margin: 0; color: #1f2328; font-size: 18px; font-weight: 800; line-height: 1.6; overflow-wrap: anywhere; }
.novel-reader-header .novel-note { margin: 6px 0 0; }
#closeNovelReader { display: flex; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--modal-input-bg); color: var(--modal-close-color); cursor: pointer; }
#closeNovelReader svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.novel-reader-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); }

#novelChapterSelect { margin-top: 8px; padding: 6px 10px; border: 0; border-radius: 8px; background: var(--modal-input-bg); color: var(--text-primary); font: inherit; font-size: 12px; }
.novel-continue-section, .novel-next-chapter { margin-top: 32px; }
.novel-continue-section > button, .novel-next-chapter { width: 100%; }
#novelContinueForm { margin-top: 20px; }
#novelContinueForm label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
#novelContinueForm textarea { min-height: 100px; }

.novel-cast-limit { margin-left: 8px; color: var(--text-secondary); font-size: 11px; font-weight: 400; }