@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');
:root {
    --navy:#071a36;
    --ink:#101f3f;
    --muted:#68738b;
    --pink:#bf3d70;
    --line:#dfe5ef;
    --pale:#fff1f6;
    --blue:#f0f6ff;
    --shadow:0 12px 32px #17345e0c;
    font-family:'DM Sans','Noto Sans Thai',sans-serif;
    color:var(--ink);
    background:#f8faff;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:linear-gradient(125deg,#fff1f680,#fff 45%,#f0f6ff);
    min-height:100vh;
}

button,input,select,textarea {
    font:inherit;
}

button,a,input,select,textarea {
    -webkit-tap-highlight-color:transparent;
}

button {
    cursor:pointer;
}

button:disabled {
    cursor:wait;
    opacity:.5;
}

a {
    color:inherit;
}

button {
    border:1px solid var(--line);
    color:var(--ink);
    background:white;
    border-radius:10px;
    padding:10px 15px;
    min-height:44px;
}

button:hover {
    border-color:#bf3d70;
    background:#fff6f9;
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
    outline:3px solid #3979b5;
    outline-offset:3px;
}

[hidden] {
    display:none!important;
}

.skip-link {
    position:fixed;
    top:-80px;
    z-index:100;
    background:white;
    padding:14px;
}

.skip-link:focus {
    top:0;
}

.topbar {
    min-height:70px;
    background:var(--navy);
    border-bottom:1px solid #ed6f9d66;
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:12px clamp(18px,4vw,60px);
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font:700 26px 'Playfair Display',serif;
    letter-spacing:.12em;
    text-decoration:none;
}

.location {
    font-size:12px;
    letter-spacing:.15em;
    color:#d9e5fb;
}

.header-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}

.home-link {
    border-radius:999px;
    background:#ed6f9d;
    color:var(--navy);
    padding:10px 18px;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
}

.nav-lock {
    background:transparent;
    color:white;
    border-color:#64738b;
    font-size:13px;
}

.shell {
    width:min(1320px,calc(100% - 48px));
    margin:28px auto;
    min-height:72vh;
}

.hero {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    padding:36px 40px;
    border:1px solid #edcfdf;
    border-radius:22px;
    background:linear-gradient(90deg,#fff3f8ed,#ffffffdb 50%,#eef5ff91),url('assets/snbx-sakura-hero.png') center 38% / cover;
    box-shadow:var(--shadow);
}

.eyebrow {
    font-size:11px;
    letter-spacing:.16em;
    color:var(--pink);
    font-weight:700;
    text-transform:uppercase;
    margin:0 0 8px;
}

h1,h2,h3,p {
    margin-top:0;
}

h1 {
    font-size:clamp(26px,3.2vw,40px);
    margin-bottom:10px;
    line-height:1.4;
}

h2 {
    font-size:23px;
}

h3 {
    font-size:18px;
}

.hero p:not(.eyebrow) {
    color:#4f5d75;
    margin-bottom:18px;
}

.hero-actions {
    display:grid;
    gap:10px;
    min-width:170px;
}

.primary {
    background:var(--pink);
    color:white;
    border-color:var(--pink);
    font-weight:600;
}

.primary:hover {
    background:#a92e5e;
    color:white;
}

.secondary {
    background:white;
    color:var(--pink);
    border-color:#ecc6d6;
}

.badge {
    display:inline-flex;
    gap:5px;
    align-items:center;
    border-radius:7px;
    background:#f0f6ff;
    padding:4px 9px;
    color:#294d77;
    font-size:12px;
}

.badge.pink {
    background:#fff0f6;
    color:#a92e5e;
}

.badges {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:24px;
    box-shadow:var(--shadow);
}

.muted {
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}

.actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.actions.spread {
    justify-content:space-between;
}

.continue-card {
    margin-top:20px;
    display:flex;
    align-items:center;
    gap:20px;
    padding:20px 24px;
    background:linear-gradient(100deg,#fff,#f0f6ff);
}

.continue-card .mini-cover {
    width:68px;
    height:88px;
    flex-shrink:0;
    border-radius:9px;
}

.continue-copy {
    flex:1;
}

.continue-copy h2 {
    font-size:20px;
    margin:5px 0;
}

.continue-copy p {
    margin:0 0 5px;
}

.progress {
    height:5px;
    background:#e3ecf8;
    border-radius:10px;
    overflow:hidden;
    margin-top:12px;
}

.progress span {
    display:block;
    background:#ed6f9d;
    height:100%;
    border-radius:10px;
}

.search-row {
    display:flex;
    gap:12px;
    margin:24px 0 14px;
}

.search-row input {
    flex:1;
    min-width:0;
}

.search-row select {
    max-width:210px;
}

.filters {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:24px;
}

.library-view-bar { display:flex; justify-content:flex-end; align-items:center; gap:12px; margin:0 0 14px; }
.arrange-books { display:none; margin-right:auto; gap:8px; align-items:center; }
.arrange-books[aria-pressed="true"] { display:inline-flex; background:var(--pink); color:white; border-color:var(--pink); }
.search-row input:disabled,.search-row select:disabled,.filters button:disabled { cursor:not-allowed; }
.book-order-help { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 22px; margin:0 0 22px; border:1px solid #f0cadb; border-radius:16px; background:linear-gradient(120deg,#fff1f7,#f2f6ff); }
.book-order-help[hidden] { display:none; }
.book-order-help strong { color:var(--ink); font-size:15px; }
.book-order-help p { margin:4px 0 0; color:var(--muted); font-size:12px; }
#order-save-state { color:var(--muted); font-size:12px; flex-shrink:0; }
#book-grid.is-arranging { position:relative; overflow-anchor:none; }
.is-arranging .book-card { position:relative; transition:box-shadow .15s; }
.book-drag-handle { display:none; position:absolute; z-index:3; top:10px; right:10px; gap:7px; align-items:center; min-height:38px; padding:6px 12px; color:#74324f; background:#fff9fcf5; border:1px solid #e7b5cc; border-radius:999px; box-shadow:0 3px 12px #24365520; cursor:grab; font-size:12px; }
.book-drag-handle>span:first-child { font-size:23px; line-height:1; }
.book-drag-handle { touch-action:none; }
.book-drag-handle:active { cursor:grabbing; }
.book-drag-active,.book-drag-active * { cursor:grabbing!important; user-select:none!important; }
#book-drag-preview { position:fixed; top:0; left:0; z-index:1000; pointer-events:none; display:flex; align-items:center; gap:14px; width:290px; max-width:calc(100vw - 16px); padding:10px; background:#fff; border:1px solid #edc1d4; border-radius:16px; box-shadow:0 18px 48px #14213b38,0 4px 12px #bf3d701a; will-change:transform; }
#book-drag-preview .cover { width:64px; height:80px; flex-shrink:0; padding:6px; border-radius:9px; }
#book-drag-preview .cover-title,#book-drag-preview .rating { display:none; }
#book-drag-preview strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.6; color:var(--ink); }
#book-drag-preview span { display:block; margin-top:6px; font-size:11px; color:var(--muted); }
.is-arranging .book-card.is-dragging { border:1px dashed #db8eaf; background:#fbedf4; box-shadow:inset 0 0 0 5px #fff6fa; }
.is-arranging .book-card.is-dragging>* { visibility:hidden; }
.is-arranging .book-card.is-dragging::after { content:'วางตรงนี้'; position:absolute; inset:0; display:grid; place-items:center; color:#a75277; font-size:14px; pointer-events:none; }
.view-list.is-arranging .book-card { padding-left:54px; }
.view-list .book-drag-handle { left:8px; right:auto; top:50%; transform:translateY(-50%); padding:6px 10px; }
.view-list .book-drag-handle>span:last-child { display:none; }
@media(min-width:900px) and (pointer:fine) {
    .arrange-books,.book-drag-handle { display:inline-flex; }
}
@media(max-width:899px) {
    .book-order-help { flex-wrap:wrap; }
    .library-view-bar { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .is-arranging .book-card { transition:none; } }
.view-switch { display:flex; gap:4px; padding:4px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.view-switch button { display:flex; align-items:center; justify-content:center; gap:7px; border:0; padding:8px 14px; font-size:13px; background:transparent; }
.view-switch button[aria-pressed="true"] { background:var(--pink); color:#fff; }
.list-rating { display:none; }

.grid.view-list { grid-template-columns:minmax(0,1fr); gap:8px; }
.view-list .book-card { display:grid; grid-template-columns:64px minmax(0,1fr); border-radius:10px; }
.view-list .book-cover-link { border-radius:0; min-width:0; }
.view-list .book-card > .book-cover-link > .cover { width:100%; height:100%; min-height:0; aspect-ratio:auto; padding:6px; }
.view-list .cover::after { inset:4px; }
.view-list .cover-title { font-size:10px; -webkit-line-clamp:3; }
.view-list .cover .rating { display:none; }
.view-list .list-rating { display:inline-flex; }
.view-list .book-content { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; row-gap:3px; padding:10px 12px; align-content:center; }
.view-list .book-content > * { grid-column:1; min-width:0; }
.view-list .book-title { margin:0; font-size:16px; line-height:1.5; }
.view-list .book-content .blurb,.view-list .book-tags,.view-list .book-content .progress { display:none; }
.view-list .badges { gap:5px; }
.view-list .badge { padding:2px 6px; font-size:10px; }
.view-list .badges .muted { font-size:11px; }
.view-list .chapter-meta { margin:0; font-size:11px; }
.view-list .book-content .actions { grid-column:2; grid-row:1 / span 3; align-self:center; margin:0; gap:6px; }
.view-list .book-content .actions button { padding:7px 10px; font-size:12px; }

@media(max-width:720px) {
    .view-list .book-card { grid-template-columns:48px minmax(0,1fr); }
    .view-list .cover-title { font-size:9px; }
    .view-list .book-content { grid-template-columns:minmax(0,1fr); padding:8px 10px; gap:2px; }
    .view-list .book-title { font-size:14px; }
    .view-list .book-content .actions { grid-column:1; grid-row:auto; flex-wrap:wrap; margin-top:3px; gap:6px; }
    .view-list .book-content .actions button { font-size:12px; padding:6px 8px; }
    .view-list .book-content .actions .primary { flex-basis:auto; }
}

.filters button {
    border:0;
    background:#eaf2fc;
    flex:1;
    font-size:14px;
}

.filters button.active {
    color:white;
    background:var(--pink);
}

.filters .count {
    opacity:.7;
    font-size:12px;
    margin-left:5px;
}

.library-tools {
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    margin:18px 0;
}

.library-tools button {
    font-size:13px;
    background:transparent;
}

.library-tools .muted {
    margin-left:auto;
}

.grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
}

.book-card {
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    box-shadow:var(--shadow);
    background:white;
}

.cover {
    position:relative;
    height:225px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:28px;
    color:white;
    background:radial-gradient(ellipse at 80% 10%,#6882ad88,transparent 60%),linear-gradient(145deg,#101d3e,#3e526b);
    overflow:hidden;
}

.cover::before {
    content:'✦';
    position:absolute;
    font-size:220px;
    line-height:1;
    color:#fff1;
    right:-30px;
    bottom:-65px;
}

.cover::after {
    content:none;
}

.cover.rose {
    background:radial-gradient(ellipse at 15% 15%,#f6d3df,transparent 65%),linear-gradient(135deg,#ad687d,#665581);
}

.cover.sky {
    background:radial-gradient(ellipse at 85% 15%,#d8e8f9,transparent 60%),linear-gradient(145deg,#6b8ea4,#284866);
}

.cover.paper {
    color:#6b4a5c;
    background:linear-gradient(135deg,#fff1f6,#e3edf9);
}

.cover.has-image {
    background-position:center;
    background-size:cover;
}

.cover.has-image::before {
    content:'';
    inset:0;
    background:linear-gradient(transparent,#071a36b3);
    font-size:0;
}

.cover-title {
    display:none;
}

.cover-star {
    font-size:30px;
    color:#f9bfd4;
    margin-bottom:13px;
    position:relative;
}

.cover .rating {
    position:absolute;
    right:23px;
    top:22px;
    z-index:2;
    color:#a92e5e;
    background:#fff1f6;
    font-size:11px;
    border-radius:6px;
    padding:3px 7px;
}

.book-content {
    padding:20px;
}

.book-title {
    font-size:18px;
    margin-bottom:9px;
    overflow-wrap:anywhere;
}

.book-cover-link {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
}
.book-cover-link:hover .cover { filter: brightness(.96); }
.book-cover-link:focus-visible { outline-offset: -3px; }
button.book-cover-link { border:0; padding:0; width:100%; background:transparent; cursor:zoom-in; font:inherit; }
.continue-card > button.book-cover-link { width:auto; }
.continue-card > .book-cover-link { flex-shrink: 0; }
.read-title-link { color: inherit; text-decoration: none; }
.read-title-link:hover,
.read-title-link:focus-visible {
    color: var(--pink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.book-content .blurb {
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:46px;
    margin:12px 0;
}

.book-content .actions {
    margin-top:16px;
}

.book-content .actions .primary {
    flex:1;
}

.icon-button {
    padding:8px 12px;
}

.fav.active {
    color:#a92e5e;
    background:#fff1f6;
}

.empty {
    text-align:center;
    padding:64px 24px;
    margin:20px 0;
    background:linear-gradient(130deg,#fff,#f5f8ff);
}

.empty .empty-icon {
    font-size:46px;
    color:#d85385;
    margin-bottom:16px;
}

.empty p {
    max-width:510px;
    margin:0 auto 24px;
}

.vault {
    max-width:550px;
    margin:65px auto;
    background:linear-gradient(145deg,#fff,#fff7fb);
    padding:38px;
}

.vault h1 {
    font-size:28px;
}

.vault .lock-icon {
    font-size:40px;
    color:var(--pink);
    margin-bottom:15px;
}

.field {
    display:grid;
    gap:7px;
    margin-bottom:18px;
}

.field label,.field-label {
    font-size:13px;
    font-weight:600;
}

.field small {
    font-size:12px;
    color:var(--muted);
    line-height:1.7;
}

input,textarea,select {
    width:100%;
    border:1px solid #ccd7e6;
    background:white;
    color:var(--ink);
    border-radius:9px;
    padding:11px 13px;
    min-height:44px;
}

textarea {
    resize:vertical;
    line-height:1.8;
}

.error {
    color:#a12b43;
    font-size:13px;
    line-height:1.7;
    min-height:1.5em;
}

.vault .primary {
    width:100%;
}

.divider {
    height:1px;
    background:var(--line);
    margin:24px 0;
}

.back {
    background:transparent;
    border:none;
    color:var(--pink);
    padding-left:0;
}

.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin:10px 0 22px;
}

.page-heading h1 {
    font-size:28px;
    margin:0;
}

.save-state {
    font-size:12px;
    color:var(--muted);
}

.editor-layout {
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:24px;
    align-items:start;
}

.editor-sidebar .panel {
    padding:20px;
    margin-bottom:18px;
}

.two-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.editor-main .panel {
    padding:28px;
}

.chapter-list {
    list-style:none;
    margin:0;
    padding:0;
}

.chapter-item {
    display:flex;
    align-items:center;
    gap:4px;
    border-bottom:1px solid #eaf0f8;
    padding:5px 0;
}

.chapter-item:last-child {
    border:0;
}

.chapter-item .chapter-select {
    flex:1;
    text-align:left;
    border:0;
    background:transparent;
    padding:10px 8px;
    font-size:13px;
    overflow-wrap:anywhere;
}

.chapter-item.active {
    background:#fff1f6;
    border-radius:7px;
}

.chapter-item.active .chapter-select {
    color:var(--pink);
}

.chapter-item .move {
    padding:4px;
    min-width:28px;
    font-size:12px;
    border:0;
    background:transparent;
}

.chapter-meta {
    color:var(--muted);
    font-size:12px;
    margin:12px 0;
}

.writing-area {
    min-height:480px;
    line-height:2;
    font-size:17px;
    border-color:#e2e8f1;
    padding:22px;
}

.editor-footer {
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:16px;
    align-items:center;
}

.danger {
    color:#ad3546;
}

.cover-preview {
    height:120px;
    margin-bottom:12px;
    border-radius:10px;
}

.cover-preview .cover-title {
    font-size:16px;
}

.cover-preview .cover-star {
    font-size:18px;
}

.theme-picks {
    display:flex;
    gap:8px;
    margin-top:12px;
}

.theme-picks button {
    width:34px;
    min-height:34px;
    padding:0;
    border-radius:50%;
}

.theme-picks .navy {
    background:#233959;
}

.theme-picks .rose {
    background:#b87991;
}

.theme-picks .sky {
    background:#6f9cb9;
}

.theme-picks .paper {
    background:#f5e9ed;
}

.theme-picks button[aria-pressed=true] {
    outline:2px solid var(--pink);
    outline-offset:3px;
}

.reader-shell {
    max-width:1100px;
    margin:auto;
}

.reader-head {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:20px 0;
}

.reader-head h1 {
    font-size:27px;
}

.reader-grid {
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    gap:24px;
    align-items:start;
}

.toc {
    position:sticky;
    top:20px;
    padding:18px;
}

.toc summary {
    cursor:pointer;
    font-weight:600;
    padding:6px 0 16px;
}

.toc button {
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    font-size:13px;
    display:block;
    margin-top:4px;
}

.toc button.active {
    background:#fff1f6;
    color:var(--pink);
}

.reader-settings {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    padding:12px;
    margin-bottom:14px;
}

.reader-settings button {
    padding:7px 11px;
}

.reader-settings .actions {
    gap:5px;
}

.reader-settings select {
    width:100px;
    font-size:12px;
    padding:8px;
}

.reading-paper {
    --paper-padding:clamp(24px,4vw,55px);
    --paper-padding-inline:var(--paper-padding);
    background:var(--reader-bg,#fff);
    color:var(--reader-ink,#18253d);
    padding:var(--paper-padding) var(--paper-padding-inline);
    overflow:hidden;
    border:1px solid var(--reader-line,#dfe5ef);
    border-radius:18px;
    box-shadow:var(--shadow);
    min-height:440px;
}

.reading-intro.has-cover {
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    min-height:clamp(320px,38vw,460px);
    padding:clamp(130px,20vw,250px) var(--paper-padding-inline) 0;
    margin:calc(-1 * var(--paper-padding)) calc(-1 * var(--paper-padding-inline)) 42px;
}

.reading-cover {
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    cursor:zoom-in;
}

.reading-cover:hover { background:transparent; }
.reading-cover:focus-visible { outline-offset:-5px; }
.reading-intro.has-cover > :not(.reading-cover) { position:relative; z-index:1; }

.reading-cover img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 35%;
    -webkit-mask-image:linear-gradient(to bottom,#000 25%,#0009 55%,#0003 85%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 25%,#0009 55%,#0003 85%,transparent 100%);
}

.reading-book-title {
    text-align:center;
    font-size:16px;
    font-weight:600;
    overflow-wrap:anywhere;
    margin:0 0 12px;
}

.reading-intro.has-cover .chapter-kicker { margin:0 0 10px; opacity:1; }
.reading-intro.has-cover h2 { margin:0; }
.reading-intro.has-cover .ornament { margin:25px 0 0; }
.reading-intro.has-cover :is(.reading-book-title,.chapter-kicker,h2) {
    text-shadow:0 1px 10px var(--reader-bg,#fff),0 0 24px var(--reader-bg,#fff);
}

.reading-paper .chapter-kicker {
    text-align:center;
    font-size:13px;
    margin-bottom:10px;
    opacity:.7;
}

.reading-paper h2 {
    text-align:center;
    font-size:28px;
    overflow-wrap:anywhere;
}

.ornament {
    color:#85a6cf;
    text-align:center;
    margin:25px 0 42px;
}

.prose {
    font-size:var(--reader-size,18px);
    line-height:var(--reader-leading,2);
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    max-width:var(--reader-width,65ch);
    margin:auto;
}

.reading-paper.warm,
.writing-area.warm,
.preview-prose.warm {
    --reader-bg:#f6efdf;
    --reader-ink:#473e32;
    --reader-line:#ded2bf;
}

.reading-paper.dark,
.writing-area.dark,
.preview-prose.dark {
    --reader-bg:#142139;
    --reader-ink:#e2e9f6;
    --reader-line:#354967;
}

.reader-nav {
    margin-top:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.reader-nav-end {
    display:flex;
    align-items:stretch;
    gap:8px;
    flex-shrink:0;
}

.reader-position {
    white-space:nowrap;
}

.reader-nav .reader-top-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 44px;
    width:44px;
    min-height:44px;
    height:auto;
    padding:0;
    color:var(--pink);
}

.reader-status {
    font-size:12px;
    text-align:center;
    color:var(--muted);
    margin-top:15px;
}

.warning {
    border-left:3px solid #ed6f9d;
    background:#fff5f9;
    padding:12px 16px;
    font-size:13px;
    color:#8c3b5c;
    margin:15px 0;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

.trash-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:18px;
    border-bottom:1px solid var(--line);
}

.trash-row h3 {
    margin-bottom:4px;
}

.scroll-top {
    position:fixed;
    right:calc(18px + env(safe-area-inset-right, 0px));
    bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    z-index:90;
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    padding:0;
    border:1px solid #ffffff70;
    border-radius:50%;
    color:#fff;
    background:var(--pink);
    box-shadow:0 4px 16px #071a3626;
}
.scroll-top:hover { color:#fff; background:#a93062; }
.toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    background:#071a36;
    color:white;
    border-radius:12px;
    padding:14px 22px;
    z-index:200;
    max-width:90vw;
    box-shadow:0 8px 28px #071a3633;
    font-size:14px;
}

dialog {
    border:1px solid var(--line);
    border-radius:18px;
    padding:28px;
    max-width:450px;
    width:calc(100% - 32px);
    color:var(--ink);
    box-shadow:var(--shadow);
}

dialog::backdrop {
    background:#071a3677;
}

dialog p {
    color:var(--muted);
    line-height:1.8;
}

dialog .actions {
    justify-content:flex-end;
}

footer {
    display:flex;
    justify-content:center;
    gap:20px;
    color:var(--muted);
    font-size:12px;
    padding:30px;
}

footer span {
    border-left:1px solid var(--line);
    padding-left:20px;
}

.file-note {
    font-size:12px;
    line-height:1.7;
    color:var(--muted);
    margin-top:14px;
}

.storage-error {
    border:1px solid #ce536f;
    background:#fff1f6;
    color:#9b2842;
    padding:16px;
    border-radius:12px;
    margin-bottom:16px;
}

.reader-grid.wide {
    grid-template-columns:1fr;
}

.reader-grid.wide .toc {
    position:static;
}

.reader-grid.wide .toc:not([open]) {
    padding:10px 18px;
}

.reader-grid.wide .reading-paper {
    --paper-padding-inline:clamp(22px,8vw,100px);
}

@media(max-width:1000px) {
    .grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .location {
        display:none;
    }
    .editor-layout {
        grid-template-columns:260px minmax(0,1fr);
    }
    .reader-grid {
        grid-template-columns:210px minmax(0,1fr);
    }
    .hero {
        padding:28px;
    }
    .reading-paper {
        --paper-padding:25px;
    }
}

@media(max-width:720px) {
    .shell {
        width:calc(100% - 28px);
        margin-top:16px;
    }
    .topbar {
        padding:12px 16px;
        gap:10px;
    }
    .brand {
        font-size:22px;
        gap:7px;
    }
    .brand img {
        width:28px;
        height:28px;
    }
    .home-link {
        padding:9px 12px;
    }
    .nav-lock {
        font-size:11px;
        padding:7px 10px;
    }
    .hero {
        display:block;
        padding:26px 22px;
    }
    .hero-actions {
        display:flex;
        flex-wrap:wrap;
        margin-top:22px;
    }
    .hero-actions button {
        flex:1;
    }
    .continue-card {
        gap:12px;
        padding:16px;
        flex-wrap:wrap;
    }
    .continue-card .primary {
        width:100%;
    }
    .continue-copy h2 {
        font-size:17px;
    }
    .search-row {
        flex-wrap:wrap;
    }
    .search-row input {
        flex-basis:100%;
    }
    .search-row select {
        max-width:none;
        flex:1;
    }
    .filters {
        gap:7px;
    }
    .filters button {
        flex-basis:40%;
        font-size:13px;
    }
    .grid {
        gap:14px;
    }
    .cover {
        height:190px;
        padding:18px;
    }
    .cover-title {
        font-size:19px;
    }
    .cover .rating {
        right:16px;
        top:17px;
    }
    .book-content {
        padding:15px;
    }
    .book-title {
        font-size:16px;
    }
    .book-content .actions {
        gap:5px;
    }
    .book-content .actions .primary {
        flex-basis:100%;
    }
    .book-content .blurb {
        font-size:12px;
    }
    .editor-layout,.reader-grid {
        grid-template-columns:1fr;
    }
    .editor-sidebar {
        display:grid;
        grid-template-columns:1fr;
        gap:0;
    }
    .editor-main .panel {
        padding:18px;
    }
    .writing-area {
        padding:14px;
        min-height:420px;
    }
    .toc {
        position:static;
    }
    .reader-head {
        align-items:flex-start;
        flex-direction:column;
    }
    .reader-head h1 {
        font-size:23px;
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
    }
    .vault {
        margin:28px auto;
        padding:26px;
    }
    .library-tools .muted {
        margin-left:0;
        width:100%;
    }
    .reader-nav {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
    }
    .reader-nav button {
        flex:1;
        font-size:13px;
    }
    .reader-position {
        grid-row:1;
        grid-column:1 / -1;
        text-align:center;
    }
    .trash-row {
        flex-direction:column;
        align-items:flex-start;
    }
    .reading-paper h2 {
        font-size:25px;
    }
}

@media(max-width:400px) {
    .grid {
        grid-template-columns:1fr;
    }
    .cover {
        height:220px;
    }
    .home-link span {
        display:none;
    }
    .two-fields {
        grid-template-columns:1fr;
    }
}

.mini-cover .cover-title,.mini-cover .rating {
    display:none;
}

.mini-cover .cover-star {
    font-size:28px;
    margin:0;
}

.mini-cover::after {
    inset:6px;
}

.reader-settings button[aria-pressed=true] {
    background:#fff1f6;
    border-color:#bf3d70;
    color:#a92e5e;
}

.single-chapter-note {
    padding: 16px 18px;
    margin-bottom: 20px;
    border: 1px solid #f0d5e1;
    border-radius: 12px;
    background: #fff5f9;
}
.single-chapter-note p { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.cloud-update { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:16px 20px; margin-bottom:20px; border:1px solid var(--line); border-radius:14px; background:#eef5ff; font-size:14px; }
.storage-error button { margin:6px 8px 0 0; }
.character-editor { margin-bottom:24px; }
.character-editor h2 { margin:0; font-size:21px; }
.character-choices { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.character-choice { min-width:0; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fff; }
.character-select { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; overflow-wrap:anywhere; }
.character-select input[type=checkbox] { width:18px; height:18px; min-height:18px; padding:0; flex:0 0 18px; accent-color:var(--pink); }
.character-choice:has(input:checked) { border-color:#dc8dad; background:#fff8fb; }
.character-choice .story-figure { margin:12px 0; }
.character-choice .story-figure img { width:100%; height:170px; object-fit:contain; background:#f2f5fa; }
.character-choice figcaption { font-weight:600; opacity:1; }
.character-choice .actions { margin-top:12px; gap:6px; }
.character-choice .actions button { padding:7px 9px; font-size:12px; }
.cast-count { font-size:13px; color:var(--muted); margin:14px 0; }
.reader-sidebar { position:sticky; top:20px; min-width:0; padding:2px; }
.reader-grid.wide .reader-sidebar { position:static; }
.reader-sidebar .toc { position:static; }
.reader-characters { margin-top:16px; padding:16px; }
.reader-characters h2 { font-size:17px; margin:0; }
.reader-cast-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 10px; margin-top:16px; }
.reader-characters .story-figure { margin:0; min-width:0; width:100%; }
.reader-characters .story-figure .image-open { background:#f2f5fa; }
.reader-characters .story-figure .image-open img { width:100%; height:auto; aspect-ratio:1; max-height:none; object-fit:contain; }
.reader-characters .story-figure figcaption { font-size:13px; font-weight:600; opacity:1; margin-top:6px; }
.reader-grid.wide:has(.reader-characters) { grid-template-columns:230px minmax(0,1fr); }
.reader-grid.wide:has(.reader-characters) .reading-paper { --paper-padding-inline:clamp(22px,3vw,50px); }
@media(max-width:720px) {
    .reader-sidebar { position:static; }
    .reader-grid.wide:has(.reader-characters) { grid-template-columns:1fr; }
    .reader-cast-list { grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
}
.illustration-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.illustration-toolbar .file-note { flex:1; min-width:180px; }
.chapter-images { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.image-manager { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:14px; margin:16px 0; }
.image-tile { min-width:0; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.image-tile > strong { display:block; font-size:13px; margin:8px 0 3px; overflow-wrap:anywhere; }
.image-tile > small { color:var(--muted); font-size:12px; }
.image-tile .actions { margin-top:8px; gap:6px; }
.image-tile .actions button { padding:6px 10px; font-size:12px; }
button.image-open { display:block; border:0; padding:0; width:100%; background:transparent; overflow:hidden; border-radius:10px; cursor:zoom-in; }
.image-open img { display:block; max-width:100%; height:auto; margin:auto; }
.image-tile .image-open img { width:100%; height:120px; object-fit:contain; background:#f2f5fa; }
.prose.illustrated-prose { white-space:normal; }
.prose-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.story-figure { margin:24px auto; max-width:640px; }
.story-figure .image-open img { max-height:720px; width:auto; object-fit:contain; }
.story-figure figcaption { font-size:13px; line-height:1.6; text-align:center; opacity:.75; margin-top:10px; overflow-wrap:anywhere; }
.story-gallery { margin-bottom:24px; }
.story-gallery h2 { font-size:20px; margin:0; }
.gallery-strip { display:flex; gap:16px; overflow-x:auto; padding:18px 2px 8px; }
.gallery-strip > div { width:160px; flex:0 0 160px; }
.gallery-strip .story-figure { margin:0 0 8px; }
.gallery-strip .image-open img { width:160px; height:140px; object-fit:contain; background:#f2f5fa; }
#illustration-preview { margin-top:20px; }
#illustration-preview > summary { cursor:pointer; color:var(--pink); font-weight:600; padding:12px 0; }
.preview-prose { padding:20px; border:1px solid var(--line); border-radius:12px; margin-top:8px; }
.writing-area, .preview-prose {
    background:var(--reader-bg,#fff);
    color:var(--reader-ink,#18253d);
    border-color:var(--reader-line,#dfe5ef);
    caret-color:var(--reader-ink,#18253d);
}
.writing-area::placeholder { color:var(--reader-ink,#18253d); opacity:.65; }
.illustration-dialog { width:min(560px,calc(100% - 24px)); max-width:560px; max-height:calc(100dvh - 24px); overflow-y:auto; }
.illustration-preview-image { display:block; width:100%; height:200px; object-fit:contain; border-radius:12px; background:#f2f5fa; }
.image-lightbox { width:fit-content; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow-y:auto; padding:24px; border:0; border-radius:0; background:transparent; box-shadow:none; color:#fff; scrollbar-width:thin; }
.image-lightbox::backdrop { background:rgba(8,12,20,.82); backdrop-filter:blur(3px); }
.image-lightbox figure { margin:0; width:fit-content; }
.lightbox-stage { position:relative; width:fit-content; margin-inline:auto; }
.image-lightbox figure img { display:block; width:auto; max-width:min(1100px,calc(100vw - 64px)); height:auto; max-height:calc(100dvh - 130px); object-fit:contain; border-radius:10px; }
.image-lightbox figcaption { width:0; min-width:100%; text-align:center; margin-top:10px; padding:0 6px; font-size:12px; line-height:1.6; color:#d0d4dc; overflow-wrap:anywhere; }
.image-lightbox button { position:absolute; display:grid; place-items:center; width:40px; height:40px; min-height:40px; padding:0; border:1px solid #ffffff26; border-radius:50%; background:rgba(15,19,27,.65); color:#fff; backdrop-filter:blur(8px); box-shadow:0 2px 10px #0002; }
.image-lightbox button:hover { background:rgba(15,19,27,.9); border-color:#ffffff60; }
.image-lightbox button:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.image-lightbox button:disabled { opacity:0; pointer-events:none; }
.image-lightbox #image-close { top:0; right:0; transform:translate(50%,-50%); font-size:16px; line-height:1; }
.image-lightbox #image-counter { position:absolute; top:14px; left:12px; padding:4px 9px; border-radius:20px; background:rgba(15,19,27,.65); color:#fff; font-size:11px; }
.lightbox-nav button { top:50%; transform:translateY(-50%); font-size:30px; line-height:1; }
.lightbox-nav #image-prev { left:10px; }
.lightbox-nav #image-next { right:10px; }
.image-lightbox #image-pin { top:0; left:0; transform:translateY(-50%); width:auto; padding:0 13px; border-radius:999px; font-size:13px; white-space:nowrap; }
.image-lightbox.can-pin #image-counter { top:auto; bottom:12px; }
.image-lightbox .lightbox-reading-hint { margin:10px 0 0; text-align:center; color:#c7d3e7; font-size:12px; }
body.reader-images-pinned { --reader-pins-width:clamp(230px,22vw,320px); }
body.reader-images-pinned:has(#reader-pins.has-expanded-image) { --reader-pins-width:clamp(360px,36vw,760px); }
#reader-pins {
    position:fixed; top:88px; right:max(16px,env(safe-area-inset-right)); z-index:100;
    width:var(--reader-pins-width); max-width:calc(100vw - 24px); max-height:calc(100dvh - 120px);
    display:flex; flex-direction:column; padding:12px; border:1px solid #d9e2f0; border-radius:18px;
    background:#fff; color:var(--ink); box-shadow:0 12px 36px #071a3626;
}
.reader-pins-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 0 10px; flex-shrink:0; }
.reader-pins-heading strong { font-size:13px; }
.reader-pins-heading strong span { display:inline-block; padding:1px 6px; color:var(--pink); background:var(--pale); border-radius:20px; font-size:11px; }
.reader-pins-heading button { padding:3px 8px; min-height:36px; font-size:11px; border:0; color:var(--muted); }
.reader-pins-position { display:flex; gap:4px; padding:3px; margin-bottom:10px; border-radius:10px; background:#f3f6fb; flex-shrink:0; }
.reader-pins-position button { flex:1; min-height:36px; padding:4px 8px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--muted); font-size:12px; }
.reader-pins-position button[aria-pressed="true"] { background:var(--pale); border-color:var(--pink); color:var(--pink); }
.reader-pins-left #reader-pins { left:max(16px,env(safe-area-inset-left)); right:auto; }
.reader-pins-content { overflow-y:auto; overscroll-behavior:contain; min-height:0; scrollbar-width:thin; }
.reader-pins-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:3px; }
.reader-pin-card { position:relative; min-width:0; }
.reader-pin-image { display:block; padding:5px; width:100%; border-radius:12px; background:#f3f6fb; overflow:hidden; }
.reader-pin-image img { display:block; width:100%; height:100px; object-fit:contain; border-radius:8px; }
.reader-pin-image span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; font-size:11px; line-height:1.6; margin-top:6px; }
.reader-pin-card.is-selected .reader-pin-image { border-color:var(--pink); background:var(--pale); }
.reader-pin-remove { position:absolute; top:4px; right:4px; width:30px; height:30px; min-height:30px; padding:0; border-radius:50%; background:#142139df; color:#fff; border:1px solid #ffffff60; font-size:20px; }
.reader-pin-remove:hover { color:#fff; background:var(--pink); }
#reader-pin-preview { position:relative; padding:0 3px 14px; }
#reader-pin-preview .reader-pin-stage { display:flex; align-items:center; justify-content:center; height:min(52dvh,480px); overflow:hidden; border-radius:12px; background:#edf1f7; touch-action:none; }
#reader-pin-preview .reader-pin-stage img { display:block; flex:none; max-width:none; max-height:none; object-fit:contain; pointer-events:none; user-select:none; }
.reader-pin-stage.is-zoomed { cursor:grab; }
.reader-pin-stage.is-zoomed.is-panning { cursor:grabbing; }
.reader-pin-stage:focus-visible { outline:2px solid var(--pink); outline-offset:2px; }
.reader-pin-zoom { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; }
.reader-pin-zoom button { min-width:36px; min-height:36px; padding:3px 8px; font-size:14px; }
.reader-pin-zoom output { min-width:46px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
#reader-pins.has-expanded-image .reader-pins-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
#reader-pin-preview p { font-size:12px; text-align:center; overflow-wrap:anywhere; margin:8px 0 0; }
#reader-pin-collapse { position:relative; display:block; margin:0 0 8px auto; min-height:36px; padding:4px 10px; background:#142139df; border:1px solid #ffffff70; border-radius:999px; color:#fff; font-size:11px; }
.reader-pins-hint { flex-shrink:0; text-align:center; font-size:10px; color:var(--muted); margin:10px 0 0; }
/* Pins float independently: their size and side must never reflow the reader. */
@media(max-width:899px) {
    body.reader-images-pinned { --reader-pins-width:150px; }
    #reader-pins { top:auto; bottom:calc(80px + env(safe-area-inset-bottom)); right:max(12px,env(safe-area-inset-right)); padding:8px; border-radius:14px; max-height:52dvh; }
    #reader-pins.has-expanded-image { width:min(360px,82vw); max-height:70dvh; }
    .reader-pins-left #reader-pins { left:max(12px,env(safe-area-inset-left)); right:auto; }
    .reader-pins-heading strong { font-size:11px; }
    .reader-pins-heading button { padding:2px 5px; }
    .reader-pins-grid { grid-template-columns:minmax(0,1fr); }
    #reader-pins.has-expanded-image .reader-pins-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .reader-pin-image img { height:85px; }
    .reader-pin-remove { width:36px; height:36px; min-height:36px; }
    #reader-pin-preview .reader-pin-stage { height:32dvh; }
    .reader-pins-hint { font-size:9px; }
}
@media (max-width:600px) {
    .image-lightbox { max-width:calc(100vw - 8px); }
    .image-lightbox figure img { max-width:calc(100vw - 56px); border-radius:8px; }
    .image-lightbox button { width:44px; height:44px; min-height:44px; }
}
/* Custom pin dimensions float over the page without changing reading layout. */
#reader-pins button { touch-action:manipulation; }
#reader-pins.is-resized { max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); }
#reader-pins.is-resized .reader-pins-content { flex:1; }
#reader-pins.is-resized #reader-pin-preview .reader-pin-stage { height:var(--pin-image-height); }
#reader-pins.is-resizing { user-select:none; }
#reader-pins-reset { align-self:center; flex-shrink:0; min-height:28px; padding:2px 10px; margin-top:4px; font-size:11px; border:0; background:transparent; color:var(--pink); }
#reader-pins .reader-pins-resize { position:absolute; z-index:2; display:grid; place-items:center; width:28px; height:28px; min-height:28px; padding:0; border:0; background:transparent; border-radius:8px; touch-action:none; }
.reader-pins-resize span { width:11px; height:11px; border:solid var(--pink); border-width:0 2px 2px 0; }
.reader-pins-resize[data-pins-resize="nw"] { top:-6px; left:-6px; cursor:nwse-resize; }
.reader-pins-resize[data-pins-resize="ne"] { top:-6px; right:-6px; cursor:nesw-resize; }
.reader-pins-resize[data-pins-resize="sw"] { bottom:-6px; left:-6px; cursor:nesw-resize; }
.reader-pins-resize[data-pins-resize="se"] { bottom:-6px; right:-6px; cursor:nwse-resize; }
#reader-pins .reader-pins-resize[data-pins-resize="w"], #reader-pins .reader-pins-resize[data-pins-resize="e"] { top:28px; bottom:28px; width:18px; height:auto; border-radius:8px; cursor:ew-resize; }
.reader-pins-resize[data-pins-resize="w"] { left:-9px; }
.reader-pins-resize[data-pins-resize="e"] { right:-9px; }
.reader-pins-resize[data-pins-resize="w"] span, .reader-pins-resize[data-pins-resize="e"] span { width:4px; height:36px; border:0; border-radius:4px; background:var(--pink); opacity:.65; }
.reader-pins-resize[data-pins-resize="nw"] span { transform:rotate(180deg); }
.reader-pins-resize[data-pins-resize="ne"] span { transform:rotate(-90deg); }
.reader-pins-resize[data-pins-resize="sw"] span { transform:rotate(90deg); }
#reader-pins .reader-pins-resize:hover, #reader-pins .reader-pins-resize:focus-visible { background:var(--pale); outline:2px solid var(--pink); }
@media (max-width:600px) { .illustration-dialog { padding:18px; } .preview-prose { padding:14px; } .illustration-toolbar > button { width:100%; } }
.editor-import-bar { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 22px 0 18px; padding: 16px; background: #f3f7fd; border-radius: 12px; }
.editor-import-bar strong { font-size: 14px; }
.text-format-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 18px; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff8fc; }
.text-format-toolbar strong { font-size:14px; }
.text-format-toolbar .file-note { margin:4px 0 0; }
.text-format-toolbar .actions { flex-wrap:wrap; }
.text-format-toolbar button { font-size:12px; }
.text-format-dialog { width:min(960px,calc(100% - 24px)); max-width:960px; max-height:calc(100dvh - 24px); overflow-y:auto; }
.text-format-dialog h2 { margin:0 0 8px; }
.format-option { display:flex; align-items:center; gap:8px; font-size:14px; }
.format-option input { width:18px; height:18px; min-height:0; flex-shrink:0; }
.format-comparison { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.format-comparison textarea { height:clamp(160px,28vh,260px); resize:vertical; line-height:1.9; font-size:15px; }
@media (max-width:600px) {
    .text-format-dialog { padding:18px; }
    .format-comparison { grid-template-columns:minmax(0,1fr); gap:0; }
    .format-comparison textarea { height:180px; }
    .text-format-dialog .actions { flex-wrap:wrap; }
}
.editor-import-bar .file-note { margin: 5px 0 0; }
.book-card > .book-cover-link > .cover, .cover-preview { height: auto; aspect-ratio: 3 / 2; }
.cover-crop-dialog { width:min(640px,calc(100% - 24px)); max-width:640px; max-height:calc(100dvh - 24px); overflow-y:auto; padding:0; border-radius:20px; }
.crop-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; }
.crop-heading h2 { margin:0; font-size:23px; }
.crop-eyebrow { color:var(--pink); font-size:10px; letter-spacing:2px; margin:0 0 4px; font-weight:600; }
.crop-heading button { border:0; background:#f1f4f8; width:38px; height:38px; padding:0; border-radius:50%; flex-shrink:0; }
.crop-stage { position:relative; background:#182235; }
#crop-canvas { display:block; width:min(100%, max(240px, calc((100dvh - 370px) * 1.4545))); height:auto; margin:auto; aspect-ratio:16 / 11; cursor:grab; touch-action:none; }
#crop-canvas.is-dragging { cursor:grabbing; }
#crop-canvas:focus-visible { outline:3px solid var(--pink); outline-offset:-3px; }
.crop-ratio { position:absolute; top:10px; right:14px; border-radius:20px; padding:4px 10px; background:rgba(0,0,0,.35); color:#fff; font-size:11px; pointer-events:none; }
.crop-controls { padding:16px 24px 0; }
#crop-hint { text-align:center; color:var(--muted); font-size:12px; margin:0 0 12px; }
.crop-zoom-row { display:flex; align-items:center; gap:12px; }
.crop-zoom-row button { width:36px; height:36px; min-height:36px; flex-shrink:0; padding:0; border:0; border-radius:50%; background:#f1f4f8; font-size:22px; }
.crop-zoom-row output { min-width:42px; font-size:12px; text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); }
.crop-controls input[type=range] { appearance:none; -webkit-appearance:none; min-width:0; flex:1; width:auto; height:6px; min-height:6px; padding:0; border:0; border-radius:20px; background:#e9d4df; cursor:pointer; accent-color:var(--pink); }
.crop-controls input[type=range]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--pink); border:3px solid #fff; box-shadow:0 1px 6px #a65b7d55; }
.crop-controls input[type=range]::-moz-range-thumb { width:15px; height:15px; border-radius:50%; background:var(--pink); border:3px solid #fff; box-shadow:0 1px 6px #a65b7d55; }
.crop-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.crop-meta .file-note { margin:0; font-size:11px; }
.crop-meta button { border:0; padding:8px 0 8px 12px; color:var(--pink); background:transparent; font-size:12px; white-space:nowrap; }
.crop-controls .error:empty { display:none; }
.crop-footer { display:flex; justify-content:flex-end; gap:10px; margin:14px 0 0; padding:16px 24px; border-top:1px solid var(--line); background:#fff; position:sticky; bottom:0; }
.crop-footer button { min-width:100px; }
.crop-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.text-import-dialog h2 { margin-bottom:10px; }
.text-import-dialog { width: min(560px, calc(100% - 24px)); max-width: 560px; max-height: calc(100dvh - 24px); overflow-y: auto; }
.text-import-dialog .muted { overflow-wrap: anywhere; }
.import-modes { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin: 16px 0; }
.import-modes legend { font-size: 14px; font-weight: 600; }
.import-modes label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.import-modes input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--pink); flex-shrink: 0; }
@media (max-width: 600px) {
    .text-import-dialog { padding:18px; }
    .crop-heading { padding:16px 18px; }
    .crop-heading h2 { font-size:20px; }
    .crop-controls { padding:14px 18px 0; }
    .crop-footer { padding:14px 18px; }
    .editor-import-bar > button { width: 100%; }
}
.reader-names-status {
    display:block; margin:0 auto 24px; padding:6px 12px; min-height:36px;
    font-size:12px; border-color:var(--reader-line,var(--line));
    background:transparent; color:inherit; border-radius:999px;
}
.reader-names-status span { opacity:.65; }
.reader-names-dialog {
    --names-bg:#fff; --names-soft:#f5f7fc; --names-ink:var(--ink);
    --names-muted:var(--muted); --names-line:var(--line); --names-accent:#a52e5c;
    position:fixed; inset:16px 16px 16px auto; margin:0;
    width:min(480px,calc(100% - 32px)); max-width:480px; height:calc(100dvh - 32px);
    max-height:calc(100dvh - 32px); padding:0; overflow:hidden;
    color:var(--names-ink); background:var(--names-bg); border-color:var(--names-line);
    border-radius:24px; box-shadow:0 24px 80px #071a3640;
}
.reader-names-dialog.warm {
    --names-bg:#fffaf1; --names-soft:#f4eddf; --names-ink:#473e32;
    --names-muted:#796b5b; --names-line:#e4d9c8; --names-accent:#a54b33;
}
.reader-names-dialog.dark {
    --names-bg:#142139; --names-soft:#1d2e49; --names-ink:#e2e9f6;
    --names-muted:#afbdd3; --names-line:#354967; --names-accent:#f3a7c2;
    color-scheme:dark;
}
.reader-names-form { display:flex; flex-direction:column; height:100%; min-height:0; }
.reader-names-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:24px 24px 18px; }
.reader-names-head h2 { font-size:24px; margin:4px 0 0; letter-spacing:-.5px; }
.reader-names-dialog .reader-names-eyebrow { font-size:11px; color:var(--names-accent); margin:0; }
.reader-names-dialog button { color:var(--names-ink); background:var(--names-bg); border-color:var(--names-line); }
.reader-names-dialog button:hover { border-color:var(--names-accent); }
.reader-names-dialog .reader-names-close { flex-shrink:0; width:44px; height:44px; padding:0; font-size:28px; border:0; border-radius:50%; }
.reader-names-body { padding:0 24px 20px; overflow-y:auto; overscroll-behavior:contain; flex:1; min-height:0; }
.reader-names-dialog p { color:var(--names-muted); }
#reader-names-description { font-size:12px; margin:0 0 20px; }
.reader-names-switch { display:flex; align-items:center; gap:12px; padding:15px; border:1px solid var(--names-line); border-radius:14px; cursor:pointer; margin-bottom:22px; }
.reader-names-switch > span:first-child { flex:1; }
.reader-names-switch strong { font-size:14px; }
.reader-names-switch small { display:block; color:var(--names-muted); font-size:11px; margin-top:4px; line-height:1.7; }
.reader-names-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.reader-names-toggle { width:44px; height:26px; border-radius:20px; background:#8b93a0; padding:3px; flex-shrink:0; }
.reader-names-toggle::after { content:''; display:block; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; }
.reader-names-switch input:checked + .reader-names-toggle { background:var(--names-accent); }
.reader-names-switch input:checked + .reader-names-toggle::after { transform:translateX(18px); }
.reader-name-row { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 36px; gap:8px; align-items:end; margin-bottom:16px; }
.reader-name-row label { display:block; font-size:11px; color:var(--names-muted); margin-bottom:6px; }
.reader-name-row input { width:100%; min-width:0; padding:10px; border-radius:10px; font-size:14px; background:var(--names-bg); color:var(--names-ink); border:1px solid var(--names-line); height:44px; }
.reader-name-row input::placeholder { color:var(--names-muted); opacity:.8; }
.reader-name-arrow { line-height:44px; text-align:center; color:var(--names-muted); }
.reader-names-dialog .reader-name-remove { border:0; min-height:44px; padding:0; display:grid; place-items:center; color:var(--names-muted); }
.reader-names-dialog #reader-name-add { width:100%; border:1px dashed var(--names-line); color:var(--names-accent); background:transparent; }
.reader-names-hint { font-size:11px; margin:12px 0 20px; }
.reader-name-discovery { background:var(--names-soft); border-radius:14px; padding:14px; margin-bottom:20px; }
.reader-name-discovery h3 { font-size:13px; margin:0 0 6px; color:var(--names-accent); }
.reader-name-discovery p { font-size:11px; margin:5px 0; }
.reader-name-discovery-note { opacity:.85; }
#reader-name-suggestions { display:flex; flex-wrap:wrap; gap:6px; max-height:130px; overflow-y:auto; }
.reader-names-dialog .reader-name-suggestion { font-size:12px; border-radius:999px; padding:5px 10px; min-height:36px; max-width:100%; overflow-wrap:anywhere; }
.reader-name-source { grid-column:1 / -1; color:var(--names-muted); font-size:10px; margin-top:-2px; }
.reader-names-preview { border-radius:14px; background:var(--names-soft); padding:18px; }
.reader-names-preview h3 { margin:0 0 12px; font-size:12px; font-weight:500; }
.reader-names-preview .prose { font-size:16px; line-height:1.9; }
.reader-names-preview mark { background:transparent; color:var(--names-accent); font-weight:600; }
#reader-name-preview-note { font-size:11px; margin:12px 0 0; }
.reader-names-dialog #reader-name-error { color:var(--names-accent); font-size:13px; margin:12px 0 0; }
.reader-names-dialog #reader-name-error:empty { display:none; }
.reader-names-footer { display:grid; grid-template-columns:minmax(0,1fr); justify-content:stretch; flex-shrink:0; gap:8px; padding:16px 24px; border-top:1px solid var(--names-line); }
.reader-names-dialog .primary { color:#fff; background:var(--names-accent); border-color:var(--names-accent); min-height:48px; }
.reader-names-dialog.dark .primary { color:#142139; }
.reader-names-dialog #reader-name-clear { color:var(--names-muted); background:transparent; border:0; font-size:12px; }
@media(max-width:600px) {
    .reader-names-dialog { inset:auto 0 0; width:100%; max-width:none; height:88dvh; max-height:calc(100dvh - 16px); border-radius:24px 24px 0 0; border-bottom:0; }
    .reader-names-head { padding:22px 18px 14px; }
    .reader-names-head h2 { font-size:22px; }
    .reader-names-body { padding:0 18px 18px; }
    .reader-names-footer { padding:12px 18px max(12px,env(safe-area-inset-bottom)); }
    .reader-name-row { gap:5px; grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr) 30px; }
    .reader-name-row input { padding:8px; font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior:auto!important;
    }
}


/* Shared focus glow for all Library form controls, including dialogs. */
input:focus, textarea:focus, select:focus,
.reader-names-switch input:focus-visible + .reader-names-toggle {
    border-color:var(--pink);
    outline:none;
    box-shadow:inset 0 1px 4px #ed6f9d33, 0 0 16px 2px #bf3d7033;
}

@media (forced-colors:active) {
    input:focus, textarea:focus, select:focus,
    .reader-names-switch input:focus-visible + .reader-names-toggle {
        outline:1px solid Highlight;
        outline-offset:1px;
    }
}