:root {
  color-scheme: light;
  --ink: #3d2937;
  --muted: #907b89;
  --forest: #b72f7c;
  --forest-dark: #3e1830;
  --moss: #b72f7c;
  --gold: #b72f7c;
  --cream: #fff8fc;
  --paper: #fffafd;
  --line: #eadde5;
  --soft: #fff1f7;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--cream); }
button, input, textarea, select { font: inherit; }
button, a, select, input[type="range"], input[type="file"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #c3925677; outline-offset: 2px; }
[hidden] { display: none !important; }

.library-shell { min-height: 100vh; }
.library-rail { position: fixed; inset: 0 auto 0 0; z-index: 2; display: flex; width: 238px; flex-direction: column; padding: 31px 20px 20px; color: #f4f0e8; background: var(--forest-dark); }
.rail-brand { display: inline-flex; width: fit-content; align-items: center; text-decoration: none; }
.rail-brand img { display: block; width: 105px; height: auto; }
.rail-section { display: grid; gap: 8px; margin-top: 64px; }
.rail-label, .kicker { color: var(--moss); font-size: 10px; font-weight: 700; letter-spacing: .17em; }
.rail-label { margin: 0 0 9px 11px; color: #a9b3a7; }
.rail-link { display: flex; min-height: 44px; align-items: center; gap: 12px; padding: 0 12px; border-radius: 7px; color: #d1d7cf; font-size: 13px; text-decoration: none; transition: .2s ease; }
.zoe-rail-link { width: 100%; border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.rail-link > span { width: 17px; color: #a8b3a6; font-size: 17px; text-align: center; }
.rail-link > .zoe-rail-mark { display: grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; }
.zoe-rail-mark img { display: block; width: 19px; height: 19px; }
.rail-link:hover, .rail-link.active { color: #fff; background: #ffffff12; }
.rail-link.active > span { color: #ddb982; }
.rail-link > .zoe-coming-soon {
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 1px solid #ef9bc855;
  border-radius: 999px;
  color: #ffd2e6;
  background: #e35a9e1c;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-align: left;
  white-space: nowrap;
}
.zoe-coming-soon::before {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: #f2a1c7;
  box-shadow: 0 0 7px #f2a1c7;
  content: "";
}
.rail-bottom { display: flex; align-items: center; gap: 11px; margin-top: auto; padding: 14px 2px 4px; border-top: 1px solid #ffffff1b; }
.rail-avatar { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #25382d; background: #d7bd94; font: 600 14px "Playfair Display", serif; }
.rail-bottom strong, .rail-bottom small { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-bottom strong { font-size: 11px; font-weight: 600; }
.rail-bottom small { margin-top: 4px; color: #abb5aa; font-size: 10px; }

.library-main { min-height: 100vh; margin-left: 238px; }
.topbar { position: sticky; top: 0; z-index: 1; display: flex; height: 64px; align-items: center; justify-content: space-between; padding: 0 5.2%; border-bottom: 1px solid var(--line); background: #f6f3edee; backdrop-filter: blur(12px); }
.breadcrumbs, .topbar-actions { display: flex; align-items: center; gap: 12px; font-size: 11px; }
.breadcrumbs { color: var(--muted); }
.breadcrumbs a, .back-link { color: var(--ink); text-decoration: none; }
.breadcrumbs > span:nth-child(2) { color: #b4b0a6; }
.topbar-actions { gap: 21px; }
.library-profile-menu { position: relative; }
.library-profile-trigger { display: flex; align-items: center; gap: 7px; max-width: 190px; color: var(--ink); cursor: pointer; font-size: 10px; list-style: none; }
.library-profile-trigger::-webkit-details-marker { display: none; }
.library-profile-avatar { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--forest); font-size: 11px; font-weight: 700; }
.library-profile-popover { position: absolute; top: calc(100% + 11px); right: 0; z-index: 5; display: grid; width: 205px; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 12px 30px #35202d20; }
.library-profile-popover label { color: var(--muted); font-size: 10px; }
.library-profile-popover select { width: 100%; min-height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; font-size: 11px; }
.library-profile-popover a { color: var(--forest); font-size: 10px; text-decoration: none; }
.library-profile-menu[open] .library-profile-trigger { color: var(--forest); }
.save-indicator { color: var(--muted); font-size: 10px; }
.save-indicator.saving { color: #a77132; }
.save-indicator.saved { color: #527451; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.back-link span { color: var(--moss); }

.shelf-view { width: min(1140px, 100%); margin: 0 auto; padding: 72px 5.2% 90px; }
.shelf-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.shelf-intro h1, .editor-heading h1 { margin: 11px 0 10px; font: 600 clamp(36px, 4.2vw, 56px)/1.08 "Playfair Display", serif; letter-spacing: -.035em; }
.title-period { color: var(--gold); }
.shelf-intro p { max-width: 420px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; gap: 10px; padding: 0 17px; border: 0; border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 600; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--forest); box-shadow: 0 5px 16px #2031271a; }
.button-primary:hover { background: #314b3a; box-shadow: 0 8px 20px #20312725; }
.button-primary > span:first-child { color: #e2c393; font-size: 18px; font-weight: 400; }
.shelf-intro .button { flex: 0 0 auto; margin-bottom: 4px; }
.shelf-summary { display: flex; justify-content: space-between; margin-top: 56px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.shelf-summary span:first-child { color: var(--ink); font-size: 11px; font-weight: 600; }
.shelf-summary span:last-child { color: #9a9a90; font-size: 9px; font-weight: 600; letter-spacing: .15em; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 31px 25px; padding-top: 30px; }
.book-card { min-width: 0; }
.book-card-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.book-card-open:focus-visible { outline-offset: 7px; }
.book-cover-wrap { position: relative; display: grid; height: 242px; place-items: center; perspective: 800px; }
.book-cover { position: relative; display: flex; width: min(78%, 174px); height: 218px; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 19px 17px 20px 24px; border-radius: 2px 5px 5px 2px; background: linear-gradient(145deg,#71806a,#334338 64%,#26362c); box-shadow: -7px 8px 0 -5px #c9c5ba, -11px 13px 0 -7px #aaa69d, 8px 14px 24px #1f291d32; transform: rotateY(-5deg) rotateZ(-1deg); transform-style: preserve-3d; transition: transform .35s ease, box-shadow .35s ease; }
.book-card-open:hover .book-cover { box-shadow: -7px 8px 0 -5px #c9c5ba, -11px 13px 0 -7px #aaa69d, 11px 17px 28px #1f291d40; transform: translateY(-5px) rotateY(-2deg) rotateZ(0); }
.book-cover::before { position: absolute; top: 0; bottom: 0; left: 0; width: 7px; border-right: 1px solid #ffffff20; background: linear-gradient(90deg,#17271f77,#e0c39322); content: ""; }
.book-cover.has-image { background-position: center; background-size: cover; }
.book-cover.has-image::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent,#131a15a6); content: ""; }
.book-cover-title, .book-cover-author, .book-cover-edition { position: relative; z-index: 1; color: #f7f3e9; }
.book-cover-title { display: -webkit-box; overflow: hidden; font: 600 20px/1.18 "Playfair Display", serif; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.book-cover-author { margin-top: 9px; color: #ede3cf; font-size: 9px; }
.book-cover-edition { margin-top: 15px; color: #ffffff99; font-size: 7px; letter-spacing: .17em; text-transform: uppercase; }
.cover-placeholder-icon { position: absolute; top: 25px; right: 17px; color: #f5dfbb6b; font: 34px "Playfair Display", serif; }
.book-card-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 11px 1px 0; }
.book-card-title { overflow: hidden; color: var(--ink); font: 600 15px "Playfair Display", serif; text-overflow: ellipsis; white-space: nowrap; }
.book-card-author { margin-top: 4px; color: var(--muted); font-size: 10px; }
.book-card-language { margin-top: 4px; color: #a17f95; font-size: 8px; }
.book-card-meta { flex: 0 0 auto; margin-top: 2px; color: #898e83; font-size: 9px; }
.book-card-privacy { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: #777e72; font-size: 9px; }
.empty-note { max-width: 440px; margin: 60px auto 0; color: var(--muted); font-size: 13px; line-height: 1.8; text-align: center; }

.editor-view { width: min(1450px, 100%); margin: 0 auto; padding: 34px 4.4% 70px; }
.editor-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.editor-heading h1 { margin: 6px 0 0; font-size: 36px; }
.text-button { padding: 0; border: 0; color: #777e72; background: none; cursor: pointer; font-size: 10px; text-align: left; }
.text-button:hover { color: var(--forest); }
.editor-heading-actions { display: flex; align-items: flex-end; gap: 13px; }
.visibility-control { display: grid; gap: 6px; color: #82857c; font-size: 9px; }
.visibility-control select { min-height: 37px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: #fffdf9; font-size: 10px; }
.share-book-button { min-height: 37px; align-self: end; color: #526b50; white-space: nowrap; }
.delete-book-button { min-height: 37px; align-self: end; color: #a3574c; white-space: nowrap; }
.save-button { min-height: 37px; padding-inline: 15px; }
.save-button > span { color: #dfbd8e; }
.editor-workspace { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(24px, 4.2vw, 64px); padding-top: 27px; }
.preview-column, .writing-column { min-width: 0; }
.preview-topline { display: flex; align-items: center; justify-content: space-between; color: #8a8b81; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.preview-page-count { color: #667362; font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.book-stage { display: flex; min-height: 500px; align-items: center; flex-direction: column; justify-content: center; margin-top: 13px; overflow: hidden; border: 1px solid #e6e1d7; border-radius: 8px; background: radial-gradient(ellipse at center,#fffefbcc 0,#eeece4b0 60%,#e6e2d8 100%); }
.open-book { position: relative; display: flex; width: min(85%, 425px); height: 385px; align-items: stretch; justify-content: center; padding: 0 0 0 16px; filter: drop-shadow(6px 16px 15px #302d201c); perspective: 1100px; }
.book-page { position: relative; display: flex; width: 83%; height: 100%; flex-direction: column; overflow: hidden; padding: 33px 32px 30px; border: 1px solid #e8e2d4; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(0deg,#fffef9,#fffef9 27px,#e8e5dc 28px,#fffef9 29px); transform: rotateY(-5deg); transform-origin: left center; }
.book-page::before { position: absolute; inset: 0 auto 0 0; width: 20px; border-right: 1px solid #ded8ca; background: linear-gradient(90deg,#d8d1c4a3,#fffef900); content: ""; }
.book-spine { position: absolute; inset: 0 auto 0 15px; width: 12px; border-right: 1px solid #c9c2b5; background: linear-gradient(90deg,#ddd7ca,#fffef8 53%,#dcd6ca); }
.page-running-title { position: relative; z-index: 1; overflow: hidden; margin: 0 0 16px 6px; color: #9c957f; font: italic 10px "Playfair Display", serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.page-content { position: relative; z-index: 1; flex: 1; overflow: auto; margin-left: 6px; color: #34392f; font: 12px/29px "Playfair Display", serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-content.empty::after { color: #aca898; content: attr(data-empty-text); font-style: italic; }
.page-content-image { display: block; max-width: 100%; height: auto; margin: 0 auto 10px; object-fit: contain; }
.page-image-caption { display: block; margin: -4px 0 10px; color: #888477; font: italic 9px/1.5 "DM Sans", sans-serif; text-align: center; }
.page-number { position: relative; z-index: 1; margin: 12px 0 0 6px; color: #a19a8a; font-size: 9px; text-align: center; }
.stage-caption { margin: 12px 0 18px; color: #88877d; font-size: 9px; }
.page-navigation { display: flex; min-height: 72px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.page-arrow, .icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: #475245; background: #fffdf9; cursor: pointer; font-size: 17px; transition: background .2s ease, color .2s ease; }
.page-arrow:hover, .icon-button:hover { color: #fff; background: var(--forest); }
.page-navigation-label { display: grid; gap: 4px; text-align: center; }
.page-navigation-label strong { color: var(--ink); font-size: 10px; font-weight: 600; }
.page-navigation-label span { color: var(--muted); font-size: 9px; }

.writing-column { padding: 7px 0 12px; }
.writing-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 19px; }
.writing-toolbar h2, .illustration-heading h3 { margin: 5px 0 0; font: 600 21px "Playfair Display", serif; }
.page-actions { display: flex; gap: 7px; }
.page-actions .icon-button { width: 30px; height: 30px; font-size: 16px; }
.field-label { display: block; margin: 0 0 7px; color: #5a6057; font-size: 10px; font-weight: 600; }
.writing-area, .text-input { width: 100%; border: 1px solid #e1ddd4; border-radius: 5px; outline: none; color: var(--ink); background: #fffefa; transition: border-color .2s ease, box-shadow .2s ease; }
.writing-area { min-height: 180px; padding: 15px; resize: vertical; font: 12px/1.8 "Playfair Display", serif; }
.text-input { min-height: 39px; padding: 0 11px; font-size: 11px; }
.writing-area:focus, .text-input:focus { border-color: #89927f; box-shadow: 0 0 0 3px #7d8b7118; }
.writing-area::placeholder, .text-input::placeholder { color: #aaa99f; }
.writing-footer { display: flex; justify-content: space-between; padding: 8px 1px 0; color: #929187; font-size: 9px; }
.illustration-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 26px; margin-bottom: 11px; }
.illustration-heading h3 { font-size: 17px; }
.image-limit { color: #9a9a90; font-size: 8px; }
.upload-zone { display: flex; min-height: 68px; align-items: center; gap: 13px; padding: 12px 15px; border: 1px dashed #cecbbf; border-radius: 5px; color: #777e72; background: #f8f6f0; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.upload-zone:hover, .upload-zone.dragging { border-color: #71806a; background: #f1f0e8; }
.upload-zone input, .cover-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.upload-icon { display: grid; width: 33px; height: 33px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #6c7967; background: #e8ebe3; font-size: 18px; }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { color: #4a5648; font-size: 10px; font-weight: 600; }
.upload-zone small { margin-top: 4px; color: #99998e; font-size: 9px; }
.image-editor { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr); gap: 15px; margin-top: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 5px; background: #fffefa; }
.image-editor-preview { width: 100%; max-height: 190px; align-self: start; border-radius: 3px; object-fit: contain; background: #f0eee8; }
.image-editor-fields { display: grid; align-content: start; gap: 7px; }
.image-editor-fields .field-label { margin: 0; }
.image-editor-fields .text-input { min-height: 34px; }
.range-label { display: flex; justify-content: space-between; margin-top: 3px !important; }
.range-label output { color: var(--moss); font-weight: 500; }
.width-range { width: 100%; height: 14px; margin: 0; accent-color: var(--forest); cursor: pointer; }
.remove-image { justify-self: start; color: #a3574c; font-size: 9px; }
.editor-message { min-height: 16px; margin: 8px 0 0; color: #a3574c; font-size: 10px; }

.create-dialog { width: min(450px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 25px; overflow: auto; border: 1px solid #e5e0d5; border-radius: 9px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 80px #1d2b2233; }
.zoe-dialog .dialog-heading { position: relative; justify-content: center; margin: 0; padding: 10px 28px; text-align: center; }
.create-dialog.zoe-dialog { border-color: #e5a9d0; color: #38243b; background: linear-gradient(135deg, #f2b6dd 0%, #e7c9ec 48%, #bfe5ff 100%); box-shadow: 0 24px 80px rgba(110, 37, 111, .3); }
.zoe-dialog .dialog-heading::before { position: absolute; inset: -10px; z-index: 0; overflow: hidden; content: ""; background-image: radial-gradient(circle, rgba(145, 38, 117, .16) 2px, transparent 2.5px); background-size: 28px 28px; pointer-events: none; }
.zoe-dialog .zoe-dialog-content { position: relative; z-index: 1; }
.zoe-dialog-content { display: grid; justify-items: center; gap: 18px; }
.zoe-dialog-logo { display: block; width: min(220px, 65vw); max-height: 180px; object-fit: contain; }
.zoe-dialog .dialog-heading h2 { margin: 0; font-size: 22px; }
.zoe-dialog-meta { display: grid; width: min(360px, 70vw); gap: 10px; margin: 4px 0 0; text-align: left; }
.zoe-dialog-meta > div { display: grid; grid-template-columns: minmax(120px, .9fr) minmax(0, 1.1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.zoe-dialog-meta dt { color: var(--muted); font-size: 11px; }
.zoe-dialog-meta dd { margin: 0; color: var(--ink); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.zoe-dialog .dialog-close { position: absolute; top: 0; right: 0; z-index: 2; }
.create-dialog::backdrop { background: #1d2b2273; backdrop-filter: blur(3px); }
.create-dialog form { display: grid; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.dialog-heading h2 { margin: 6px 0; font: 600 30px "Playfair Display", serif; }
.dialog-heading p { max-width: 335px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.dialog-close { flex: 0 0 auto; font-size: 19px; }
.create-dialog .field-label { margin-top: 12px; }
.optional { color: #99998e; font-weight: 400; }
.create-dialog select.text-input { color: #4d534b; }
.cover-picker { display: flex; min-height: 39px; align-items: center; gap: 9px; padding: 0 11px; border: 1px dashed #cecbbf; border-radius: 5px; color: #7b8075; background: #f8f6f0; cursor: pointer; font-size: 10px; }
.cover-picker > span:first-of-type { color: #70806c; font-size: 16px; }
.dialog-error { min-height: 16px; margin: 8px 0 0; color: #a3574c; font-size: 10px; }
.dialog-submit { width: 100%; margin-top: 5px; }
.dialog-submit span { margin-left: auto; color: #dfbd8e; }

@media (min-width: 1500px) {
  .shelf-view { padding-top: 92px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
  .book-cover-wrap { height: 270px; }
  .book-cover { width: min(78%, 190px); height: 242px; }
}
@media (max-width: 1050px) {
  .library-rail { width: 200px; padding-inline: 15px; }
  .library-main { margin-left: 200px; }
  .editor-workspace { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 25px; }
  .book-stage { min-height: 420px; }
  .open-book { height: 335px; }
  .book-page { padding: 28px 22px 25px; }
}
@media (max-width: 760px) {
  .library-rail { position: static; width: 100%; height: 57px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 17px; }
  .rail-brand img { width: 96px; }
  .rail-section { display: flex; gap: 3px; margin: 0; }
  .rail-label, .rail-bottom, .rail-link:first-of-type { display: none; }
  .rail-link { min-height: 35px; gap: 7px; padding-inline: 9px; font-size: 10px; }
  .rail-link > span { font-size: 14px; }
  .library-main { margin: 0; }
  .topbar { height: 51px; padding: 0 17px; }
  .breadcrumbs, .topbar-actions { gap: 8px; font-size: 10px; }
  .topbar-actions { gap: 12px; }
  .save-indicator { font-size: 9px; }
  .shelf-view { padding: 42px 18px 60px; }
  .shelf-intro { align-items: flex-start; flex-direction: column; gap: 19px; }
  .shelf-intro h1 { font-size: 43px; }
  .shelf-intro p { font-size: 12px; }
  .shelf-intro .button { align-self: flex-start; }
  .shelf-summary { margin-top: 37px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 22px 13px; padding-top: 20px; }
  .book-cover-wrap { height: 215px; }
  .book-cover { width: min(79%, 156px); height: 192px; padding: 14px 13px 16px 19px; }
  .book-cover-title { font-size: 17px; }
  .book-card-title { font-size: 13px; }
  .editor-view { padding: 24px 17px 50px; }
  .editor-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .editor-heading h1 { font-size: 31px; }
  .editor-heading-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .editor-workspace { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .book-stage { min-height: 410px; }
  .open-book { width: min(88%, 400px); height: 335px; }
  .writing-column { padding-top: 0; }
  .page-navigation { min-height: 61px; }
  .create-dialog { padding: 21px; }
}
@media (max-width: 390px) {
  .rail-link { gap: 5px; padding-inline: 6px; font-size: 9px; }
  .topbar { padding-inline: 12px; }
  .back-link { font-size: 10px; }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-cover-wrap { height: 192px; }
  .book-cover { height: 174px; }
  .image-editor { grid-template-columns: 80px minmax(0, 1fr); }
}

.library-rail { background: linear-gradient(160deg, #4b1b3a, #321429 78%); }
.rail-label { color: #f0c7dc; }
.rail-link { color: #f3e2ec; }
.rail-link:hover, .rail-link.active { background: #ffffff18; }
.rail-link.active > span, .rail-link > span { color: #f3a9ca; }
.rail-bottom { border-color: #ffffff2a; }
.rail-avatar { color: #fff; background: #b72f7c; }
.rail-bottom small { color: #e5bfd2; }
.topbar { border-color: #eadde5; background: #fff8fced; }
.save-indicator.saving, .share-book-button { color: #ac2468; }
.save-indicator.saved { color: #527451; }
.back-link span, .page-arrow, .icon-button { color: #a7296b; }
.shelf-intro h1, .editor-heading h1, .writing-toolbar h2, .illustration-heading h3,
.dialog-heading h2 { color: #382332; }
.title-period { color: #b72f7c; }
.shelf-intro p, .empty-note { color: #806c7a; }
.button-primary { background: linear-gradient(120deg, #c53c87, #a7256d); box-shadow: 0 7px 18px #b72f7c33; }
.button-primary:hover { background: linear-gradient(120deg, #d04a94, #96205f); box-shadow: 0 10px 22px #b72f7c40; }
.button-primary > span:first-child, .save-button > span, .dialog-submit span { color: #ffd6e9; }
.shelf-summary { border-color: #eadde5; }
.shelf-summary span:last-child, .book-card-meta { color: #9a8492; }
.book-cover { background: linear-gradient(145deg, #d77eaa, #b72f7c 64%, #79214f); box-shadow: -7px 8px 0 -5px #edc5d7, -11px 13px 0 -7px #d8a9bf, 8px 14px 24px #67264830; }
.book-card-open:hover .book-cover { box-shadow: -7px 8px 0 -5px #edc5d7, -11px 13px 0 -7px #d8a9bf, 11px 17px 28px #67264840; }
.book-cover::before { background: linear-gradient(90deg, #731d4b99, #ffffff2a); }
.book-cover.has-image::after { background: linear-gradient(transparent, #41162cb3); }
.cover-placeholder-icon { color: #ffe2efb0; }
.book-card-privacy { color: #967184; }
.editor-heading { border-color: #eadde5; }
.text-button { color: #907b89; }
.text-button:hover { color: #b72f7c; }
.visibility-control { color: #806c7a; }
.visibility-control select, .writing-area, .text-input { border-color: #eadde5; background: #fffafd; color: #3d2937; }
.visibility-control select:focus, .writing-area:focus, .text-input:focus { border-color: #c8528c; box-shadow: 0 0 0 3px #b72f7c1c; }
.delete-book-button, .remove-image { color: #b12656; }
.preview-topline, .image-limit, .writing-footer { color: #907b89; }
.preview-page-count, .range-label output { color: #a7286b; }
.book-stage { border-color: #eadde5; background: radial-gradient(ellipse at center, #fffafd 0, #faedf4 62%, #f0dce7 100%); }
.book-page { border-color: #eadde5; background: repeating-linear-gradient(0deg, #fffafd, #fffafd 27px, #f0e2ea 28px, #fffafd 29px); }
.book-page::before { border-color: #ead2df; background: linear-gradient(90deg, #ebd5e0a3, #fffafd00); }
.book-spine { border-color: #d6bacb; background: linear-gradient(90deg, #e4ceda, #fffafd 53%, #e2cad8); }
.page-running-title { color: #a77b94; }
.page-content { color: #493744; }
.page-content.empty::after { color: #b59baa; }
.page-image-caption, .page-number, .stage-caption { color: #9b8392; }
.page-arrow, .icon-button { border-color: #eadde5; background: #fffafd; }
.page-arrow:hover:not(:disabled), .icon-button:hover:not(:disabled) { color: #fff; background: #b72f7c; }
.page-navigation { border-color: #eadde5; }
.page-navigation-label strong { color: #493744; }
.page-navigation-label span { color: #907b89; }
.field-label { color: #594553; }
.writing-area::placeholder, .text-input::placeholder { color: #b59baa; }
.upload-zone { border-color: #e3c6d6; color: #806c7a; background: #fff5fa; }
.upload-zone:hover, .upload-zone.dragging { border-color: #b72f7c; background: #fceaf3; }
.upload-icon { color: #a7296b; background: #f8dce9; }
.upload-zone strong { color: #763454; }
.upload-zone small { color: #9b8392; }
.image-editor { border-color: #eadde5; background: #fffafd; }
.image-editor-preview { background: #fff1f7; }
.width-range { accent-color: #b72f7c; }
.create-dialog { border-color: #eadde5; color: #3d2937; background: #fffafd; box-shadow: 0 24px 80px #44213940; }
.create-dialog::backdrop { background: #40152fa1; }
.dialog-heading p { color: #806c7a; }
.cover-picker { border-color: #e3c6d6; color: #806c7a; background: #fff5fa; }
.cover-picker > span:first-of-type { color: #b72f7c; }
.page-actions .icon-button:disabled, .page-arrow:disabled, .button:disabled { cursor: not-allowed; opacity: .4; transform: none; box-shadow: none; }

.open-book {
  display: grid;
  width: min(96%, 760px);
  grid-template-columns: minmax(0, 1fr) 13px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  height: clamp(310px, 39vw, 425px);
  padding: 0;
  filter: drop-shadow(7px 17px 15px #57243d25);
  transform-style: preserve-3d;
  transition: transform .45s ease, opacity .45s ease;
}

.book-page {
  display: flex;
  width: auto;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  padding: var(--page-margin-top, 12px) var(--page-margin-right, 12px) var(--page-margin-bottom, 12px) var(--page-margin-left, 12px);
  border-radius: 3px 0 0 3px;
  transform: none;
  transform-origin: center;
  transition: box-shadow .25s ease, background .25s ease;
}

.book-page-right { border-radius: 0 3px 3px 0; }
.book-page-left { box-shadow: inset -13px 0 14px -15px #71345477; }
.book-page-right { box-shadow: inset 13px 0 14px -15px #71345477; }
.book-page-left::before, .book-page-right::before { display: none; }
.book-spine { position: relative; inset: auto; z-index: 1; width: 13px; }
.page-running-title { flex: 0 0 auto; margin: 0 0 10px; font-size: 9px; }
.page-content { min-height: 0; margin: 0; font-size: clamp(8px, .85vw, 11px); line-height: 23px; }
.page-number { display: none; }
.spread-page-select {
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 0 0 5px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #ab8a9e;
  background: transparent;
  cursor: pointer;
  font: 600 8px "DM Sans", sans-serif;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.book-page-right .spread-page-select { align-self: flex-start; }
.spread-page-select:hover, .spread-page-select.selected { border-color: #efd0df; color: #a7296b; background: #fff1f7; }
.page-content.empty::after { content: attr(data-empty-text); font-size: 9px; line-height: 1.7; }
.book-spine::after { position: absolute; inset: 0 4px; border-right: 1px solid #fffafd; border-left: 1px solid #cbaabc; content: ""; }
.open-book.turning-next { animation: book-turn-next .55s ease; }
.open-book.turning-previous { animation: book-turn-previous .55s ease; }
@keyframes book-turn-next { 0% { transform: rotateY(0); opacity: 1; } 48% { transform: rotateY(-12deg); opacity: .62; } 100% { transform: rotateY(0); opacity: 1; } }
@keyframes book-turn-previous { 0% { transform: rotateY(0); opacity: 1; } 48% { transform: rotateY(12deg); opacity: .62; } 100% { transform: rotateY(0); opacity: 1; } }

.margin-controls {
  display: grid;
  gap: 10px;
  margin: 20px 0 0;
  padding: 13px;
  border: 1px solid #eadde5;
  border-radius: 8px;
  background: linear-gradient(120deg, #fffafd, #fff4f9);
}
.margin-controls legend { padding: 0 5px; color: #594553; font-size: 10px; font-weight: 700; }
.margin-controls > p { margin: 0; color: #907b89; font-size: 9px; }
.margin-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.margin-fields label { display: grid; grid-template-columns: 1fr auto; gap: 4px; color: #806c7a; font-size: 9px; }
.margin-fields label span { color: #aa91a0; }
.margin-fields input { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 32px; padding: 0 7px; border: 1px solid #eadde5; border-radius: 5px; color: #493744; background: #fffafd; font-size: 10px; }
.margin-fields input:focus { border-color: #c8528c; outline: none; box-shadow: 0 0 0 3px #b72f7c1c; }

@media (max-width: 760px) {
  .open-book { width: 100%; height: clamp(270px, 70vw, 350px); grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr); }
  .book-stage { min-height: 370px; padding: 12px; }
  .book-page { padding: var(--page-margin-top, 10px) var(--page-margin-right, 9px) var(--page-margin-bottom, 10px) var(--page-margin-left, 9px); }
  .page-content { font-size: 8px; line-height: 20px; }
  .page-running-title { font-size: 7px; }
  .spread-page-select { padding: 2px 4px; font-size: 7px; }
  .margin-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-heading-actions { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.shelf-summary { margin-top: 19px; }
.book-card-info { display: block; }
.book-card-title { white-space: normal; }
.book-card-privacy { display: block; line-height: 1.5; }
.reading-book-card .book-cover::after { position: absolute; inset: 0; border: 3px solid #ffffff75; content: ""; pointer-events: none; }

.editor-view { transition: padding-right .25s ease; }
.editor-view .editor-workspace { transition: margin-right .25s ease; }
.editor-view:not(.settings-collapsed) .editor-workspace { margin-right: 350px; }
.editor-heading-actions { align-items: center; }
.settings-open-button { display: inline-flex; min-height: 37px; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #eadde5; border-radius: 5px; color: #9b2867; background: #fffafd; cursor: pointer; font-size: 10px; font-weight: 600; }
.settings-open-button:hover { border-color: #d797b7; background: #fff1f7; }
.settings-open-button span { font-size: 15px; }
.book-settings-panel { position: fixed; inset: 130px 0 0 auto; z-index: 4; display: flex; width: 330px; flex-direction: column; border-left: 1px solid #eadde5; background: #fffafd; box-shadow: -12px 0 35px #512c3d12; transition: width .25s ease; }
.settings-panel-heading { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 15px; border-bottom: 1px solid #eadde5; }
.settings-panel-heading .kicker { overflow: hidden; color: #a7296b; font-size: 8px; white-space: nowrap; }
.settings-collapse-button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid #eadde5; border-radius: 50%; color: #a7296b; background: #fffafd; cursor: pointer; font-size: 20px; }
.settings-panel-content { min-height: 0; overflow: auto; padding: 10px 13px 25px; }
.settings-category { border-bottom: 1px solid #f0e3eb; }
.settings-category > summary { padding: 15px 3px; color: #493744; cursor: pointer; font: 600 14px "Playfair Display", serif; list-style-position: inside; }
.settings-fields { display: grid; gap: 7px; padding: 0 2px 16px; }
.settings-fields .field-label { margin: 3px 0 0; font-size: 9px; }
.settings-fields .text-input { min-height: 36px; font-size: 10px; }
.settings-cover-picker { min-height: 42px; margin: 0; padding: 8px 10px; font-size: 9px; }
.settings-cover-picker > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-fields .share-book-button, .settings-fields .delete-book-button { min-height: 32px; margin-top: 2px; }
.settings-help { color: #927f8b; font-size: 9px; line-height: 1.6; }
.book-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.book-card-tags span { padding: 4px 7px; border: 1px solid #eadde5; border-radius: 20px; color: #91617d; background: #fff7fb; font-size: 8px; }
.open-book.design-fairy .book-page { background: repeating-linear-gradient(0deg,#fffdf2,#fffdf2 27px,#f1e8ce 28px,#fffdf2 29px); }
.open-book.design-textbook .book-page { background: repeating-linear-gradient(0deg,#f8fcff,#f8fcff 27px,#dceaf1 28px,#f8fcff 29px); }
.open-book.design-poetry .book-page { background: repeating-linear-gradient(0deg,#fffafd,#fffafd 27px,#ecdde9 28px,#fffafd 29px); }
.book-design-fairy .book-cover { background: linear-gradient(145deg,#d7ad60,#a47a35 64%,#72501e); }
.book-design-textbook .book-cover { background: linear-gradient(145deg,#70a7bd,#376c87 64%,#24495f); }
.book-design-novel .book-cover { background: linear-gradient(145deg,#d77eaa,#b72f7c 64%,#79214f); }
.book-design-poetry .book-cover { background: linear-gradient(145deg,#a995c5,#745f98 64%,#51416d); }
.book-card-tags span { white-space: nowrap; }
.settings-margin-fields { gap: 7px; }
.settings-margin-fields label { font-size: 8px; }
.settings-margin-fields input { min-height: 30px; font-size: 9px; }
.editor-view.settings-collapsed .book-settings-panel { width: 48px; }
.editor-view.settings-collapsed .settings-panel-heading { min-height: 52px; justify-content: center; padding: 8px; }
.editor-view.settings-collapsed .settings-panel-heading .kicker,
.editor-view.settings-collapsed .settings-panel-content { display: none; }
.editor-view.settings-collapsed .settings-collapse-button { transform: rotate(180deg); }
.editor-view.settings-collapsed .editor-workspace { margin-right: 62px; }
.settings-open-button[aria-expanded="false"] { display: none; }

@media (max-width: 1050px) {
  .editor-view:not(.settings-collapsed) .editor-workspace { margin-right: 0; }
  .book-settings-panel { width: min(330px, calc(100vw - 48px)); box-shadow: -16px 0 45px #512c3d24; }
  .editor-view.settings-collapsed .book-settings-panel { width: 44px; }
  .editor-view.settings-collapsed .editor-workspace { margin-right: 50px; }
}
@media (max-width: 760px) {
  .editor-heading { align-items: flex-start; }
  .editor-heading-actions { flex-wrap: wrap; justify-content: flex-end; }
  .editor-view:not(.settings-collapsed) .editor-workspace { margin-right: 0; }
  .book-settings-panel { inset-block-start: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .book-settings-panel, .editor-view .editor-workspace { transition-duration: .01ms; }
}

/* Library refresh */
:root {
  --ink: #352333;
  --muted: #887583;
  --forest: #b72f7c;
  --forest-dark: #32182f;
  --moss: #c879a5;
  --gold: #b72f7c;
  --cream: #fbf7fa;
  --paper: #fff;
  --line: #eee4eb;
  --soft: #f8edf4;
}

body { background: #fbf7fa; }
.library-shell { background: #fbf7fa; }
.library-rail {
  width: 250px;
  padding: 30px 19px 22px;
  background:
    radial-gradient(ellipse at 10% 0%, #713353 0, transparent 40%),
    linear-gradient(165deg, #351a32, #241322 78%);
}
.rail-brand img { width: 112px; }
.rail-tagline { margin: 10px 0 0 4px; color: #c7b1c2; font: italic 11px "Playfair Display",serif; }
.rail-section { gap: 6px; margin-top: 52px; }
.rail-label { margin-left: 12px; color: #c58cab; font-size: 9px; letter-spacing: .2em; }
.rail-link {
  min-height: 47px;
  gap: 13px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #e4d8e2;
  font-size: 12px;
}
.rail-link > span { width: 19px; color: #c7a7bd; font-size: 17px; }
.rail-link:hover { color: #fff; background: #ffffff0d; }
.rail-link.active { border-color: #ffffff12; color: #fff; background: linear-gradient(100deg,#ffffff19,#ffffff0a); box-shadow: inset 3px 0 #e48ab8; }
.rail-link.active > span { color: #f2a9ca; }
.rail-bottom { min-height: 62px; gap: 12px; padding: 15px 4px 2px; border-color: #ffffff20; }
.rail-avatar { width: 38px; height: 38px; color: white; background: linear-gradient(145deg,#d77eaa,#a52a70); box-shadow: 0 3px 12px #170c1844; }
.rail-bottom strong { color: #fff; font-size: 11px; }
.rail-bottom small { color: #cbb8c7; }

.library-main { margin-left: 250px; }
.topbar {
  height: 66px;
  padding-inline: clamp(25px,5.1vw,76px);
  border-color: #eee4eb;
  background: #fffdfdeF;
}
.breadcrumbs { color: #988694; }
.breadcrumbs a { color: #594354; font-weight: 600; }
.topbar-actions { gap: 22px; }
.save-indicator { padding: 7px 11px; border: 1px solid #eee4eb; border-radius: 30px; background: #fff; font-size: 9px; }
.save-indicator::before { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; content: ""; vertical-align: 1px; }
.back-link { color: #685467; font-size: 10px; font-weight: 600; }
.back-link span { color: #bb4786; }

.shelf-view { width: min(1320px,100%); padding: 53px clamp(25px,5.1vw,76px) 90px; }
.shelf-intro { align-items: center; }
.shelf-intro h1 { margin: 10px 0 8px; color: #3c2739; font-size: clamp(39px,4.1vw,54px); }
.shelf-intro p { max-width: 480px; color: #887583; font-size: 12px; line-height: 1.8; }
.kicker { color: #b14983; font-size: 9px; letter-spacing: .19em; }
.button { min-height: 44px; padding-inline: 18px; border-radius: 7px; font-size: 10px; }
.button-primary { background: linear-gradient(130deg,#c4488c,#a72a70); box-shadow: 0 7px 18px #a72a7028; }
.button-primary:hover { background: linear-gradient(130deg,#d15b9b,#94215f); box-shadow: 0 10px 22px #a72a7038; }
.shelf-intro .button { margin: 0 2px 0 0; }

.discovery-banner {
  position: relative;
  display: grid;
  min-height: 258px;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  overflow: hidden;
  margin-top: 32px;
  padding: 31px clamp(25px,4vw,53px);
  border: 1px solid #eedce7;
  border-radius: 17px;
  background:
    radial-gradient(ellipse at 83% 15%,#f0d4e4 0,transparent 37%),
    linear-gradient(112deg,#fff 0,#fff9fc 52%,#f9eaf3 100%);
  box-shadow: 0 12px 34px #5931480a;
}
.discovery-copy { position: relative; z-index: 1; max-width: 495px; }
.discovery-eyebrow { color: #a35881; font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.discovery-eyebrow span { margin-right: 6px; color: #c34788; font-size: 14px; }
.discovery-copy h2 { margin: 15px 0 9px; color: #43283e; font: 600 clamp(27px,3vw,38px)/1.12 "Playfair Display",serif; letter-spacing: -.035em; }
.discovery-copy h2 em { color: #b43f7f; font-weight: 500; }
.discovery-copy p { max-width: 380px; margin: 0; color: #877481; font-size: 10px; line-height: 1.8; }
.discovery-link { display: inline-flex; align-items: center; gap: 13px; margin-top: 19px; padding: 0; border: 0; color: #9f2a6c; background: none; cursor: pointer; font-size: 9px; font-weight: 700; }
.discovery-link span { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid #e6c7d9; border-radius: 50%; transition: transform .2s ease; }
.discovery-link:hover span { transform: translateX(3px); }
.discovery-art { position: relative; height: 205px; }
.discovery-orbit { position: absolute; top: 3px; right: 4%; width: 230px; height: 190px; border: 1px solid #eac8dc; border-radius: 50%; transform: rotate(-23deg); }
.discovery-orbit::before,.discovery-orbit::after { position:absolute; inset:15px 29px; border:1px solid #f0dce7; border-radius:50%; content:""; transform:rotate(48deg); }
.discovery-orbit::after { inset:32px 4px; transform:rotate(-51deg); }
.discovery-book { position:absolute; bottom:13px; display:block; width:104px; height:142px; border:1px solid #fff8fc; border-radius:4px 8px 8px 4px; box-shadow:0 15px 22px #713c5d28; transform:rotate(-13deg); }
.discovery-book-back { right:27%; background:linear-gradient(145deg,#dab7ce,#986282); transform:rotate(11deg) translate(18px,-8px); }
.discovery-book-front { right:37%; display:flex; flex-direction:column; justify-content:flex-end; padding:12px 11px 15px 18px; background:linear-gradient(155deg,#d879a7,#b73378 68%,#78234f); }
.discovery-book-front::before { position:absolute; inset:0 auto 0 8px; width:4px; border-right:1px solid #ffffff4d; background:linear-gradient(90deg,#67204488,#ffffff32); content:""; }
.discovery-book-front i { width:28px; height:28px; align-self:flex-end; margin-bottom:auto; border:1px solid #ffffff80; border-radius:50%; }
.discovery-book-front b { width:57px; height:2px; margin-bottom:7px; background:#ffffffd9; }
.discovery-book-front b::after { display:block; width:39px; height:2px; margin-top:6px; background:#ffffff99; content:""; }
.discovery-spark { position:absolute; color:#c45791; font-family:"Playfair Display",serif; }
.discovery-spark-one { top:30px; right:22%; font-size:22px; }
.discovery-spark-two { top:68px; right:9%; color:#d5a0bd; font-size:20px; }

.shelf-summary { align-items: center; margin-top: 27px; padding-bottom: 11px; border-color: #e9dfe7; }
.shelf-summary span:first-child { color: #594354; font-size: 10px; }
.shelf-summary span:last-child { color: #a17f95; font-size: 8px; }
.book-grid { grid-template-columns: repeat(auto-fill,minmax(172px,1fr)); gap: 28px 21px; padding-top: 22px; }
.book-card { position:relative; padding: 12px 12px 14px; border:1px solid #f0e7ed; border-radius:12px; background:#fff; box-shadow:0 6px 18px #4f29420a; transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease; }
.book-card:hover { transform:translateY(-4px); border-color:#ead5e2; box-shadow:0 14px 25px #4f294215; }
.book-cover-wrap { height: 219px; }
.book-cover { width:min(78%,166px); height:202px; padding:17px 15px 16px 21px; border-radius:3px 7px 7px 3px; }
.book-cover-title { font-size:18px; }
.book-cover-author { font-size:8px; }
.book-cover-edition { margin-top:12px; font-size:6px; }
.book-card-info { min-height:47px; padding: 10px 1px 0; }
.book-card-title { color:#432e40; font-size:13px; line-height:1.35; }
.book-card-author { color:#998895; font-size:9px; }
.book-card-meta { color:#a18f9d; font-size:8px; }
.book-card-privacy { margin-top:7px; color:#967489; font-size:8px; }
.book-card-tags { gap:4px; margin-top:7px; }
.book-card-tags span { padding:4px 6px; border-color:#f0e1ea; color:#9f6285; background:#fff8fc; font-size:7px; }
.empty-note { max-width:490px; margin:46px auto 0; padding:25px; border:1px dashed #e8d4e1; border-radius:12px; color:#887583; background:#fffafd; font-size:11px; }

.editor-view { width:min(1500px,100%); padding:32px clamp(22px,3.8vw,56px) 70px; }
.editor-heading { align-items:center; margin-bottom:23px; padding-bottom:17px; border-color:#e9dfe7; }
.editor-heading h1 { margin:7px 0 0; color:#3c2739; font-size:clamp(31px,3vw,42px); }
.text-button { color:#977f90; font-size:9px; }
.editor-heading-actions { gap:9px; }
.settings-open-button { min-height:40px; border-color:#eadde5; border-radius:7px; color:#96316c; background:#fff; font-size:9px; }
.save-button { min-height:40px; border-radius:7px; }
.editor-workspace { grid-template-columns:minmax(0,1fr) minmax(0,.93fr); gap:22px; padding-top:0; }
.preview-column,.writing-column { padding:18px; border:1px solid #efe5ec; border-radius:13px; background:#fff; box-shadow:0 8px 24px #4f29420a; }
.preview-topline { color:#9c8494; font-size:8px; }
.preview-page-count { color:#ad3b7d; font-size:9px; }
.book-stage { min-height:clamp(390px,40vw,515px); margin-top:13px; border-color:#f0e4ed; border-radius:11px; background:radial-gradient(ellipse at center,#fff 0,#fbf1f7 68%,#f5e7f0 100%); }
.open-book { width:min(96%,760px); height:clamp(290px,34vw,410px); }
.book-page { border-color:#efe3ec; background:repeating-linear-gradient(0deg,#fff,#fff 27px,#f1e7ee 28px,#fff 29px); }
.book-spine { border-color:#d8b9cc; background:linear-gradient(90deg,#e9d8e3,#fff 53%,#ead5e1); }
.page-running-title { color:#ac819c; }
.page-content { color:#493744; }
.stage-caption { color:#a28e9c; font-size:8px; }
.writing-column { padding:20px; }
.writing-toolbar { margin-bottom:17px; }
.writing-toolbar h2,.illustration-heading h3 { color:#432e40; font-size:18px; }
.writing-area { min-height:210px; border-color:#eee4eb; border-radius:8px; background:#fdfbfc; font-size:11px; }
.writing-footer { color:#a18e9c; font-size:8px; }
.illustration-heading { margin-top:25px; }
.illustration-heading h3 { font-size:15px; }
.image-limit { color:#a18e9c; font-size:7px; }
.upload-zone { min-height:72px; border-color:#ead3e1; border-radius:8px; background:#fff8fc; }
.upload-zone strong { color:#6e405c; }
.image-editor { border-color:#eee4eb; border-radius:9px; }
.page-navigation { min-height:59px; margin-top:9px; border-color:#eee4eb; }
.page-navigation-label strong { font-size:9px; }
.page-navigation-label span { font-size:8px; }
.page-arrow,.icon-button { width:32px; height:32px; border-color:#eadde5; color:#a7296b; background:#fff; }
.editor-message { color:#a3574c; font-size:9px; }
.book-settings-panel { inset-block-start:66px; width:350px; border-color:#eadde5; background:#fff; }
.settings-panel-heading { min-height:57px; }
.settings-panel-content { padding:10px 17px 25px; }
.settings-category > summary { color:#483344; font-size:13px; }
.settings-fields .text-input { border-radius:6px; }

.create-dialog { width:min(500px,calc(100vw - 30px)); padding:30px; border:1px solid #eedee8; border-radius:15px; }
.dialog-heading h2 { color:#432e40; }
.dialog-heading p { color:#897684; }
.cover-picker { border-radius:8px; }

@media (min-width:1500px) {
  .shelf-view { padding-top:66px; }
  .book-grid { grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:30px 24px; }
  .book-cover-wrap { height:229px; }
  .book-cover { height:210px; }
}
@media (max-width:1050px) {
  .library-rail { width:210px; }
  .library-main { margin-left:210px; }
  .shelf-view { padding-inline:28px; }
  .discovery-banner { min-height:230px; padding-inline:28px; }
  .discovery-art { transform:scale(.88); transform-origin:center right; }
  .book-settings-panel { width:min(350px,calc(100vw - 48px)); }
}
@media (max-width:760px) {
  .library-rail { position:sticky; top:0; width:100%; height:61px; flex-direction:row; justify-content:space-between; padding:0 15px; }
  .rail-brand img { width:91px; }
  .rail-tagline,.rail-label,.rail-bottom { display:none; }
  .rail-section { display:flex; gap:4px; margin:0; }
  .rail-link,.rail-link:first-of-type { display:flex; min-height:35px; gap:6px; padding:0 8px; border-radius:7px; font-size:9px; }
  .rail-link > span { width:auto; font-size:13px; }
  .library-main { margin:0; }
  .topbar { height:51px; padding-inline:16px; }
  .breadcrumbs,.topbar-actions { gap:8px; font-size:9px; }
  .topbar-actions { gap:9px; }
  .save-indicator { padding:6px 8px; font-size:8px; }
  .back-link { font-size:9px; }
  .shelf-view { padding:37px 17px 56px; }
  .shelf-intro { align-items:flex-start; flex-direction:column; gap:15px; }
  .shelf-intro h1 { font-size:41px; }
  .shelf-intro p { font-size:11px; }
  .shelf-intro .button { align-self:flex-start; }
  .discovery-banner { min-height:245px; grid-template-columns:1fr .55fr; margin-top:24px; padding:23px 18px; }
  .discovery-copy h2 { font-size:27px; }
  .discovery-copy p { max-width:290px; font-size:9px; }
  .discovery-art { height:180px; transform:scale(.72); transform-origin:center right; }
  .shelf-summary { margin-top:23px; }
  .book-grid { grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:17px 11px; }
  .book-card { padding:8px 8px 11px; border-radius:10px; }
  .book-cover-wrap { height:190px; }
  .book-cover { width:min(80%,150px); height:175px; padding:13px 12px 14px 18px; }
  .book-cover-title { font-size:16px; }
  .book-card-info { min-height:45px; padding-top:8px; }
  .book-card-title { font-size:12px; }
  .editor-view { padding:22px 14px 46px; }
  .editor-heading { align-items:flex-start; flex-direction:column; gap:13px; }
  .editor-heading h1 { font-size:31px; }
  .editor-heading-actions { width:100%; justify-content:flex-start; }
  .editor-workspace { grid-template-columns:minmax(0,1fr); gap:15px; }
  .preview-column,.writing-column { padding:14px; }
  .book-stage { min-height:380px; }
  .open-book { width:min(96%,600px); height:clamp(275px,68vw,370px); }
  .writing-area { min-height:180px; }
  .book-settings-panel { inset-block-start:61px; }
}
@media (max-width:430px) {
  .rail-section { gap:1px; }
  .rail-link,.rail-link:first-of-type { gap:4px; padding-inline:6px; font-size:8px; }
  .rail-link > span { font-size:12px; }
  .discovery-banner { grid-template-columns:1fr; min-height:275px; }
  .discovery-copy { max-width:75%; }
  .discovery-art { position:absolute; right:-29px; bottom:-20px; width:190px; opacity:.72; transform:scale(.64); }
  .discovery-copy h2 { font-size:25px; }
  .discovery-copy p { max-width:235px; }
  .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .book-cover-wrap { height:181px; }
  .book-cover { height:168px; }
  .image-editor { grid-template-columns:78px minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .book-card,.discovery-link span,.rail-link { transition-duration:.01ms; }
}