/* Live application states complement the approved design. */
[hidden]{display:none!important}button:disabled{cursor:not-allowed;opacity:.45}a,button,input,textarea,select{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #8867a8;outline-offset:4px}a,button{overflow-wrap:anywhere}
.loading-state,.error-page{min-height:55vh;padding-top:100px;padding-bottom:100px;text-align:center}.loading-state p,.empty p{color:#776782;line-height:1.9}.error-page .hero-actions{justify-content:center}.loading-orbit{display:inline-block;width:28px;height:28px;border:2px solid #e8e0ef;border-top-color:#84619d;border-radius:50%;animation:orbit 1s linear infinite}@keyframes orbit{to{transform:rotate(360deg)}}
.real-hero .hero-art:empty{background:radial-gradient(ellipse at center,#e0d6ed,transparent 65%)}.real-directory{margin-bottom:50px}.real-directory .chapter-row{min-height:48px}.book-info p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.pagination{display:flex;align-items:center;justify-content:center;gap:24px;margin:35px 0 55px;font-size:13px}.search-input{display:flex;align-items:center;gap:12px;margin-bottom:24px;background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:12px}.search-input input{min-width:0;flex:1;border:0;background:none;outline:none}.search-input .btn{padding:9px 15px}.scroll-directory{overflow:auto;max-height:65vh;overscroll-behavior:contain}.scroll-directory .reader-chapter{display:flex;gap:12px;line-height:1.8;padding:11px 12px}.reader-illustration{margin:32px 0}.reader-illustration img{display:block;width:100%;height:auto;border-radius:10px}.reader-illustration figcaption{font-size:12px;color:#90775e;text-align:center}.comic-scroll img{width:100%;display:block;height:auto}.comic-scroll figure{margin:0}.comic-scroll.wide{max-width:1000px}.comic-grid details{font-size:13px}.comic-grid details a{padding:12px 0}.comic-thumb img[src=""]{visibility:hidden}
.inline-note,.error-banner{border-radius:10px;background:#f3edf9;color:#705b80;line-height:1.8;padding:14px 18px;font-size:13px;margin:16px 0}.error-banner,.form-error{color:#a23649;background:#fff0f1}.form-error:empty,#studio-error:empty{display:none}.refined-studio fieldset{border:0;min-width:0;padding:0;margin:0}.setting-cards{margin-bottom:22px}.refined-studio .setting-cards textarea{min-height:110px;color:#5f4e6c}.checkbox-label{display:flex!important;align-items:flex-start;gap:10px;margin:20px 0!important;font-size:13px!important;line-height:1.8}.checkbox-label input{width:17px!important;min-width:17px;height:17px;margin:3px 0 0;padding:0}.inspiration .btn{width:100%;white-space:normal;height:auto;line-height:1.6}.inspiration label{display:block}.inspiration small{display:block;line-height:1.9;color:#776782}.refined-studio .studio-work{min-width:0}.studio-heading h1{overflow-wrap:anywhere}.draft-link span{min-width:0}.draft-link small{display:block}.draft-link span{overflow-wrap:anywhere}.writing-chapter-head select{max-width:75%;min-width:0;border:1px solid var(--line);padding:10px;border-radius:8px;color:#5f4e6c;background:#fff}.managed-actions{padding:24px 30px}.managed-actions .hero-actions{flex-wrap:wrap}.managed-actions>span{font-size:13px;color:#776782}.job-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:12px 0;font-size:12px}.job-line small{flex-basis:100%;overflow-wrap:anywhere;font-size:11px}.review-result{padding:15px;background:#faf7fc;border-radius:10px;margin:18px 0;font-size:13px;line-height:1.9}.comic-work{padding:20px;border:1px solid var(--line);border-radius:14px;margin:20px 0}.comic-work p{font-size:12px;color:#776782}.publication-preview>div:last-child{min-width:0}.publication-preview .btn{margin:5px 5px 5px 0}.draft-text-preview{max-height:60vh;overflow:auto;font-size:16px;line-height:2}.comic-edit-panels{max-height:58vh;overflow:auto;margin:24px 0;padding-right:5px}.comic-edit-panels fieldset{border:1px solid var(--line);border-radius:12px;margin:18px 0;padding:15px}.comic-edit-panels img{max-height:260px;width:100%;object-fit:contain}.comic-edit-panels legend{font-size:13px;padding:0 8px}.comic-edit-panels textarea{min-height:75px}#modal form label{display:block;font-size:13px;margin:18px 0 8px}#modal form input,#modal form select,#modal form textarea{width:100%;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#faf8fc;font:inherit;box-sizing:border-box}#modal form textarea{min-height:100px;resize:vertical}#modal .hero-actions{flex-wrap:wrap}#modal .btn{margin-top:8px}
@media(min-width:801px){.reading-paper.wide{max-width:900px}.reading-paper.narrow{max-width:620px}}
@media(max-width:520px){.loading-state,.error-page{padding-top:65px}.real-hero .hero-art{min-height:280px}.managed-actions{padding:20px}.managed-actions .btn{font-size:12px}.real-directory .chapter-row{font-size:12px;gap:12px}.real-directory .chapter-row>span:first-child{min-width:0}.real-directory .chapter-row>span:last-child{flex-shrink:0}.refined-studio .studio-nav{overflow-x:auto}.refined-studio .studio-heading h1{max-width:200px}.writing-chapter-head select{font-size:12px}.checkbox-label{font-size:12px!important}.empty h2{font-size:23px}.comic-title h1{font-size:30px}.hero-actions{flex-wrap:wrap}.search-input input{font-size:16px}#modal form input,#modal form textarea,#modal form select{font-size:16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Legible text and comfortable controls, including compact laptop screens. */
.refined-studio .inspiration>small{font-size:12px;line-height:1.8;text-align:left;color:#766482}.workflow>button>small{font-size:11px}.stage-heading p,.refined-studio .inspiration>p,.setting-footnote{font-size:13px;color:#776782}.saved{font-size:12px}.workflow-bottom>span,.writing-hint{font-size:12px}.setting-cards>label>span{font-size:14px}.shelf-position,.shelf-remove{font-size:12px}.reader-dock>button>span{font-size:10px}.dock-progress>span{font-size:11px}.reader-chapter{font-size:13px}.comic-work h3{overflow-wrap:anywhere}.refined-studio .inspiration .text-link{min-height:44px}.stage-content{padding-bottom:25px}
@media(max-width:520px){.stage-heading p,.refined-studio .inspiration>p{font-size:12px}.workflow-bottom>span{font-size:10px}.writing-hint{font-size:11px}.reader-dock{width:350px;gap:12px}.reader-dock>button{min-height:40px}.dock-progress{width:100px}.reader-dock>button>span{font-size:10px}.refined-studio .studio-top-actions>.saved{font-size:10px}.refined-studio .writing-hint button{font-size:11px}}
/* Full-image comic covers: one stable frame, original proportions preserved. */
.comic-gallery{align-items:start;gap:28px}.comic-gallery .comic-tile{min-width:0;border-radius:18px;box-shadow:0 8px 28px #44305206}.comic-cover-link{display:block}.comic-gallery .comic-thumb{height:auto;aspect-ratio:3/4;padding:14px;background:linear-gradient(145deg,#f0ebf5,#e6e0ec);display:flex;align-items:center;justify-content:center}.comic-gallery .comic-thumb>img{width:100%;height:100%;min-height:0;object-fit:contain;object-position:center;filter:drop-shadow(0 5px 8px #3124391c)}.comic-gallery .comic-card-info{padding:23px}.comic-gallery .comic-card-meta{margin:0 0 10px;font-size:12px;color:#897695}.comic-gallery h2{font-size:22px;line-height:1.5;margin:0 0 22px;overflow-wrap:anywhere}.comic-card-actions{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #f0ebf4;padding-top:18px;flex-wrap:wrap}.comic-start{display:inline-flex;align-items:center;gap:10px;border-radius:8px;padding:10px 14px;min-height:44px;background:#f2edf8;color:#73519a;font-size:12px}.comic-start:hover{background:#e8def2}.comic-chapters{font-size:12px;color:#786385}.comic-chapters summary{display:flex;gap:12px;align-items:center;cursor:pointer;min-height:44px;list-style:none}.comic-chapters summary::-webkit-details-marker{display:none}.comic-chapters[open]{width:100%}.comic-chapters[open] summary{justify-content:space-between}.comic-chapters[open] summary>span{transform:rotate(45deg)}.comic-chapter-list{max-height:300px;overflow:auto;overscroll-behavior:contain;border-top:1px solid #eee8f3;margin-top:8px}.comic-gallery .comic-chapter-list a{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:13px 2px;line-height:1.7;border-bottom:1px solid #f0ebf4;overflow-wrap:anywhere}.comic-chapter-list a:hover{color:#59387b}.comic-gallery .comic-cover-placeholder{position:static;color:#897695;background:none;font-size:14px;letter-spacing:1px;padding:0}@media(max-width:520px){.comic-gallery{gap:24px}.comic-gallery .comic-card-info{padding:20px}.comic-gallery h2{font-size:20px;margin-bottom:18px}}
/* Complete cover art across the reader site; text belongs beside the picture. */
.cover,.book-card .cover,.hero-book .cover,.detail-hero>.cover,.shelf-item .cover{height:auto;aspect-ratio:3/4;min-width:0}
.cover.has-image{padding:8px;background:linear-gradient(145deg,#f0ebf5,#e6e0ec);display:flex;align-items:center;justify-content:center}
.cover.has-image>img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center;transform:none;transition:none;filter:drop-shadow(0 3px 5px #31243916)}
.cover.has-image:after,.cover.has-image .cover-title{display:none}.book-card:hover .cover.has-image img{transform:none}
.cover.no-image .cover-title{font-size:clamp(14px,2vw,23px);overflow-wrap:anywhere;letter-spacing:1px}
.book-card{min-width:0}.book-info{min-width:0}.book-info h3{overflow-wrap:anywhere}.book-info p{white-space:normal;overflow-wrap:anywhere}
.detail-copy{min-width:0}.detail-copy h1,.synopsis{overflow-wrap:anywhere}.shelf-item h2,.shelf-item p{overflow-wrap:anywhere}
.comic-scroll figure>img{height:auto;min-height:0;object-fit:contain}
@media(min-width:521px) and (max-width:1100px){.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.cover.has-image{padding:6px}.detail-hero>.cover{height:auto}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Recommendation covers must not obscure one another. */
.real-hero .hero-art{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;align-items:center;justify-items:center;gap:14px;padding:30px;min-width:0}
.real-hero .hero-book{position:static;width:100%;max-width:170px;transform:none}.real-hero .hero-book:hover{transform:translateY(-4px)}
@media(max-width:800px){.real-hero .hero-art{min-height:290px;padding:25px;max-width:520px}}
@media(max-width:520px){.real-hero .hero-art{min-height:210px;gap:9px;padding:20px 16px}.real-hero .hero-book .cover{border-radius:7px}}