:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --window: rgba(29, 31, 32, 0.97);
  --panel: #242728;
  --panel-soft: #2d3032;
  --line: rgba(255, 255, 255, 0.09);
  --muted: #92989a;
  --blue: #397af0;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #0f172a; color: white; }
button { font: inherit; }
button:focus-visible { outline: 2px solid #74a8ff; outline-offset: 2px; }

.desktop {
  position: relative;
  width: 100vw;
  min-width: 960px;
  height: 100vh;
  min-height: 650px;
  overflow: hidden;
  background: #90a5b0;
}

.wallpaper,
.wallpaper::before,
.wallpaper::after {
  position: absolute;
  inset: 0;
}

.wallpaper {
  overflow: hidden;
  background:
    radial-gradient(circle at 77% 58%, rgba(247, 213, 116, .55) 0 4%, transparent 16%),
    linear-gradient(#dce2de 0%, #dce1da 12%, #a4b8ca 25%, #6d8dad 44%, #27466d 72%, #152c44 100%);
}

.wallpaper::before {
  content: "";
  background: repeating-linear-gradient(102deg, transparent 0 24px, rgba(236, 208, 100, .18) 25px 27px, transparent 29px 46px);
  clip-path: polygon(55% 67%, 100% 43%, 100% 100%, 43% 100%);
  filter: blur(2px);
}

.wallpaper::after {
  content: "";
  background: linear-gradient(110deg, transparent 46%, rgba(255, 255, 255, .3) 52%, transparent 62%);
  opacity: .5;
}

.ridge { position: absolute; left: -6%; width: 112%; border-radius: 50% 48% 0 0; transform-origin: bottom; }
.ridge-back { bottom: 26%; height: 41%; opacity: .36; background: #315779; clip-path: polygon(0 63%, 9% 44%, 18% 57%, 29% 39%, 39% 55%, 50% 34%, 61% 52%, 72% 36%, 84% 56%, 100% 33%, 100% 100%, 0 100%); }
.ridge-mid { bottom: 4%; height: 52%; background: linear-gradient(145deg, #29496c 4%, #183a5b 55%, #244d53); clip-path: polygon(0 42%, 12% 28%, 25% 46%, 37% 18%, 50% 43%, 63% 22%, 74% 47%, 86% 16%, 100% 41%, 100% 100%, 0 100%); }
.ridge-front { bottom: -19%; height: 56%; background: linear-gradient(90deg, #17374b, #244537 58%, #4b5d2e); transform: rotate(-2deg); }
.mist { position: absolute; height: 10%; width: 70%; background: rgba(255,255,255,.35); filter: blur(28px); border-radius: 50%; }
.mist-one { top: 15%; left: -6%; }
.mist-two { top: 30%; right: -14%; opacity: .5; }

.menu-bar {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #111;
  background: rgba(244, 245, 240, .82);
  box-shadow: 0 1px 0 rgba(0,0,0,.14);
  background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,0));
  user-select: none;
}

.apple-mark { width: 30px; font-size: 19px; line-height: 1; text-align: center; }
.menu-button { height: 27px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #111; cursor: default; }
.menu-button.brand { font-weight: 700; }
.menu-button.active { background: rgba(0,0,0,.1); }
.system-status { margin-left: auto; display: flex; align-items: center; gap: 11px; padding-right: 3px; font-size: 13px; font-weight: 500; }

.menu-popover,
.submenu-popover {
  position: absolute;
  z-index: 1200;
  min-width: 270px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 13px;
  color: #f6f6f6;
  background: linear-gradient(160deg, rgba(65,69,70,.94), rgba(19,35,57,.94));
  box-shadow: 0 18px 45px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.1);
}

.menu-row { position: relative; display: grid; grid-template-columns: 22px 1fr auto 12px; align-items: center; min-height: 30px; gap: 5px; padding: 3px 8px; border-radius: 7px; font-size: 14px; white-space: nowrap; }
.menu-row:hover, .menu-row.open { background: #3477df; }
.menu-row.disabled { color: rgba(255,255,255,.32); }
.menu-row.disabled:hover { background: transparent; }
.menu-icon { text-align: center; opacity: .9; font-size: 12px; }
.menu-shortcut { color: rgba(255,255,255,.52); margin-left: 24px; }
.menu-row:hover .menu-shortcut { color: rgba(255,255,255,.86); }
.submenu-arrow { font-size: 10px; }
.menu-separator { height: 1px; margin: 5px 7px; background: rgba(255,255,255,.14); }

.book-window {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 53%;
  width: min(82vw, 1360px);
  height: min(76vh, 820px);
  min-width: 900px;
  min-height: 560px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 17px;
  background: var(--window);
  box-shadow: 0 30px 70px rgba(6,15,24,.52), 0 2px 10px rgba(0,0,0,.42);
  transition: opacity .18s ease, transform .2s ease, width .2s ease, height .2s ease;
}

.book-window.minimized { opacity: 0; transform: translate(-50%, 65vh) scale(.28); pointer-events: none; }
.book-window.zoomed { left: 8px !important; top: 40px !important; width: calc(100vw - 16px) !important; height: calc(100vh - 48px) !important; transform: none; }
.book-window.dragging, .book-window.resizing { transition: none; }
.book-window.resizing .book-workspace { transition: none; }
.window-resize-grip { position: absolute; z-index: 45; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; opacity: .65; touch-action: none; }
.window-resize-grip::before { content: ""; position: absolute; inset: 3px; border-right: 2px solid #a8acad; border-bottom: 2px solid #a8acad; box-shadow: 3px 3px 0 -1px #5e6364; }
.window-resize-grip:focus-visible { outline: 2px solid #74a8ff; outline-offset: -1px; border-radius: 4px; }

.window-titlebar {
  height: 57px;
  display: grid;
  grid-template-columns: 238px minmax(260px, 1fr) minmax(280px, .95fr);
  grid-template-rows: 57px;
  align-items: center;
  border-bottom: 1px solid #111;
  background: #202220;
  user-select: none;
  cursor: default;
}

.traffic-lights { position: absolute; top: 16px; left: 17px; display: flex; gap: 9px; }
.traffic { width: 14px; height: 14px; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.traffic.close { background: #ff655a; }
.traffic.minimize { background: #ffc23a; }
.traffic.zoom { background: #35c94a; }
.titlebar-tools { position: absolute; top: 12px; left: 154px; display: flex; gap: 7px; }
.round-tool { display: grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 50%; background: #45494a; color: #d1d4d5; }
.round-tool i { font-size: 13px; }
.document-name { grid-column: 2; grid-row: 1; min-width: 0; padding-left: 18px; display: flex; flex-direction: column; justify-content: center; font-size: 13px; line-height: 1.15; }
.document-name span { color: #888e8e; font-size: 10px; }
.word-count { grid-column: 2; grid-row: 1; justify-self: end; margin-right: 16px; padding: 5px 0; border: 0; color: #9ea2a3; background: transparent; font-size: 12px; font-weight: 650; }
.word-count i, .device-picker i { margin-left: 3px; font-size: 8px; }
.window-actions { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 9px; padding-right: 13px; }
.purchase-button, .circle-action { border: 1px solid #3a3e3e; background: #252826; color: #d9dddd; }
.purchase-button { height: 34px; padding: 0 15px; border-radius: 18px; font-size: 12px; }
.circle-action { width: 35px; height: 35px; border-radius: 50%; }
.panel-toggle { transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.panel-toggle.active { color: #fff; background: #3b4142; box-shadow: inset 0 0 0 1px rgba(113,164,255,.45); }

.book-workspace { display: grid; grid-template-columns: 238px minmax(370px, 1.16fr) minmax(330px, 1fr); height: calc(100% - 57px); transition: grid-template-columns .22s ease; }
.navigator-panel, .editor-panel, .preview-panel { min-width: 0; min-height: 0; }
.style-workspace { display: none; grid-column: 1 / 3; min-width: 0; min-height: 0; grid-template-columns: 238px minmax(430px, 1fr); background: #2d3032; border-right: 1px solid #111; }
.book-window.style-mode .navigator-panel,
.book-window.style-mode .editor-panel { display: none; }
.book-window.style-mode .style-workspace[hidden] { display: none; }
.book-window.style-mode .style-workspace { display: grid; }
.book-window.style-mode .round-tool[aria-pressed="true"] { color: #fff; background: #3b4142; box-shadow: inset 0 0 0 1px rgba(113,164,255,.45); }
.style-sidebar { position: relative; overflow: hidden; padding: 22px 8px 54px; background: linear-gradient(110deg, #202525, #242829); border-right: 1px solid rgba(255,255,255,.11); }
.style-sidebar h2 { margin: 0 8px 13px; color: #c4c9c9; font-size: 19px; font-weight: 750; }
.style-category-list { display: flex; flex-direction: column; gap: 3px; }
.style-category-item { width: 100%; height: 34px; display: grid; grid-template-columns: 27px 1fr; align-items: center; padding: 0 9px; border: 0; border-radius: 8px; color: #d9dddd; background: transparent; text-align: left; font-size: 13px; font-weight: 650; }
.style-category-item i { color: #d8dddd; text-align: center; font-size: 13px; }
.style-category-item.active { color: #268cff; background: rgba(255,255,255,.08); }
.style-category-item.active i { color: #268cff; }
.style-feature-filter { position: absolute; left: 16px; right: 16px; bottom: 14px; height: 31px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 0; border-radius: 6px; color: #e5e7e7; background: #4a4d4f; font-size: 12px; font-weight: 650; }
.style-browser { min-width: 0; overflow: hidden; background: #2e3233; }
.style-list { height: 100%; overflow: auto; padding: 15px 20px 34px; scrollbar-width: none; }
.style-list::-webkit-scrollbar { display: none; }
.style-card { position: relative; display: block; height: 200px; width: 100%; padding: 0; border: 0; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.09); color: #d7dddd; background: transparent; text-align: left; overflow: hidden; }
.style-card:hover { background: rgba(255,255,255,.025); }
.style-card.active { height: 290px; margin: 0 0 14px; border-bottom-color: transparent; border-radius: 12px; background: #486f9d; box-shadow: inset 0 1px rgba(255,255,255,.08); }
.style-card.selected-animate { animation: styleCardGrow .24s ease-out both; }
.style-card-preview { position: absolute; inset: 0; min-width: 0; height: 100%; }
.style-card-ebook-frame,
.style-card-print-frame { display: block; position: absolute; overflow: hidden; background: white; box-shadow: 0 1px 5px rgba(0,0,0,.36); }
.style-card-ebook-frame { left: 24px; top: 20px; width: 214px; height: 270px; }
.style-card-print-frame { left: 294px; right: 16px; bottom: 0; height: 154px; opacity: 0; transform: translateY(-22px); pointer-events: none; }
.style-card.active .style-card-print-frame { opacity: 1; transform: translateY(0); }
.style-card.selected-animate .style-card-print-frame { animation: stylePrintFadeIn .24s .08s ease-out both; }
.style-card-ebook,
.style-card-print { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: white; }
.style-card-ebook { height: auto; object-fit: fill; background: transparent; }
.style-card.active .style-card-print { object-fit: cover; background: transparent; }
.style-card-title { position: absolute; left: 294px; top: 78px; z-index: 2; min-width: 0; font-size: 25px; font-weight: 500; letter-spacing: -.02em; }
.style-card.active .style-card-title { top: 58px; font-size: 26px; transform: translateY(0); }
.style-card-title sup { color: #e7e9e9; font-size: .65em; }
.style-card-actions { position: absolute; top: 18px; right: 18px; display: none; align-items: center; height: 29px; padding: 0 6px; border-radius: 8px; background: rgba(255,255,255,.17); }
.style-card.active .style-card-actions { display: flex; }
.style-card-actions button { min-width: 27px; height: 24px; border: 0; color: #dce4e7; background: transparent; }
.style-card-actions button + button { border-left: 1px solid rgba(255,255,255,.25); }
@keyframes styleCardGrow {
  from { height: 200px; margin-bottom: 0; border-radius: 0; background: transparent; }
  to { height: 270px; margin-bottom: 14px; border-radius: 12px; background: #486f9d; }
}
@keyframes stylePrintFadeIn {
  from { opacity: 0; transform: translateY(-22px); }
  to { opacity: 1; transform: translateY(0); }
}
.style-detail { display: grid; grid-column: 1 / 3; grid-template-columns: 238px minmax(430px, 1fr); min-width: 0; min-height: 0; background: #303435; }
.style-detail[hidden],
.style-browser[hidden],
.style-sidebar[hidden] { display: none; }
.style-parts-panel { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 13px 8px 44px; background: linear-gradient(110deg, #202525, #242829); border-right: 1px solid rgba(255,255,255,.11); }
.style-detail-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.style-detail-title h2 { margin: 0; color: #c5caca; font-size: 20px; font-weight: 760; }
.style-back-button { width: 31px; height: 28px; border: 0; border-radius: 7px; color: #dfe3e3; background: #474b4d; }
.style-parts-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 3px; scrollbar-color: #6b7070 rgba(255,255,255,.06); }
.style-part-item { width: 100%; min-height: 32px; display: grid; grid-template-columns: 25px 1fr; align-items: center; padding: 0 10px; border: 0; border-radius: 7px; color: #e0e3e3; background: transparent; text-align: left; font-size: 13px; font-weight: 400; }
.style-part-item i { color: #c6cbcb; font-size: 12px; }
.style-part-item:not(.enabled) { padding-left: 35px; grid-template-columns: 1fr; }
.style-part-item:not(.enabled) i { display: none; }
.style-part-item.active { color: #fff; background: #2469df; }
.style-part-item.active i { color: #fff; }
.style-part-editor { position: relative; min-width: 0; overflow: auto; padding: 22px 32px; background: #303435; }
.style-part-title-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 30px; }
.style-part-editor h2 { margin: 0; color: #b4b9b9; font-size: 20px; font-weight: 750; }
.style-part-title-actions { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.style-part-preview-stage { position: relative; height: 268px; margin: 26px auto 0; max-width: 540px; overflow: hidden; }
.style-preset-slide { position: absolute; top: 0; left: 50%; width: 288px; height: 224px; opacity: .52; transform: translateX(-50%) scale(.82); transition: opacity .18s ease, transform .18s ease; filter: drop-shadow(0 4px 9px rgba(0,0,0,.45)); cursor: pointer; }
.style-part-preview-stage.has-print-edition-note { height: 302px; }
.style-part-preview-stage.has-print-edition-note .style-preset-slide { top: 34px; }
.style-print-edition-note { position: absolute; top: 0; left: 50%; display: inline-flex; align-items: center; gap: 8px; color: #c9d0d0; font-size: 14px; font-weight: 750; transform: translateX(-50%); }
.style-preset-slide.previous { transform: translateX(-112%) scale(.74); }
.style-preset-slide.next { transform: translateX(12%) scale(.74); }
.style-preset-slide.active { z-index: 2; opacity: 1; transform: translateX(-50%) scale(1); cursor: default; }
.style-part-preview-stage.carousel-forward .style-preset-slide.active { animation: carouselCenterFromRight .34s cubic-bezier(.22,.61,.36,1); }
.style-part-preview-stage.carousel-forward .style-preset-slide.previous { animation: carouselPreviousFromCenter .34s cubic-bezier(.22,.61,.36,1); }
.style-part-preview-stage.carousel-forward .style-preset-slide.next { animation: carouselNextFromFar .34s cubic-bezier(.22,.61,.36,1); }
.style-part-preview-stage.carousel-backward .style-preset-slide.active { animation: carouselCenterFromLeft .34s cubic-bezier(.22,.61,.36,1); }
.style-part-preview-stage.carousel-backward .style-preset-slide.previous { animation: carouselPreviousFromFar .34s cubic-bezier(.22,.61,.36,1); }
.style-part-preview-stage.carousel-backward .style-preset-slide.next { animation: carouselNextFromCenter .34s cubic-bezier(.22,.61,.36,1); }
@keyframes carouselCenterFromRight {
  from { opacity: .72; transform: translateX(12%) scale(.74); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes carouselCenterFromLeft {
  from { opacity: .72; transform: translateX(-112%) scale(.74); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes carouselPreviousFromCenter {
  from { opacity: 1; transform: translateX(-50%) scale(1); }
  to { opacity: .52; transform: translateX(-112%) scale(.74); }
}
@keyframes carouselNextFromCenter {
  from { opacity: 1; transform: translateX(-50%) scale(1); }
  to { opacity: .52; transform: translateX(12%) scale(.74); }
}
@keyframes carouselNextFromFar {
  from { opacity: 0; transform: translateX(90%) scale(.64); }
  to { opacity: .52; transform: translateX(12%) scale(.74); }
}
@keyframes carouselPreviousFromFar {
  from { opacity: 0; transform: translateX(-190%) scale(.64); }
  to { opacity: .52; transform: translateX(-112%) scale(.74); }
}
.style-preset-empty { display: grid; place-items: center; height: 224px; color: #cdd2d2; }
.style-preset-page { position: relative; width: 100%; height: 100%; overflow: hidden; padding: 26px 32px; background: #fff; color: #1b1b1b; font: 9px/1.42 Georgia, "Times New Roman", serif; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.style-preset-page p { margin: 0 0 9px; }
.style-preset-page h1,
.style-preset-page h2,
.style-preset-page h3 { margin: 0; color: #111; }
.preset-context { color: #333; font-size: 8px; }
.preset-kicker { text-align: var(--heading-align, center); text-transform: uppercase; letter-spacing: .12em; font-family: var(--heading-font, Georgia); font-size: 7px; color: var(--heading-accent, #111); }
.preset-number { margin: 2px 0 8px; text-align: var(--heading-align, center); text-transform: uppercase; font-family: var(--heading-font, Georgia); font-size: var(--number-size, 24px); font-weight: 800; line-height: .95; color: var(--heading-accent, #111); }
.preset-heading { padding-top: var(--heading-margin-top, 26px); }
.preset-heading h1 { margin-bottom: var(--heading-spacing, 18px); text-align: var(--heading-align, center); text-transform: var(--heading-case, uppercase); font-family: var(--heading-font, Georgia); font-size: var(--heading-size, 18px); font-weight: var(--heading-weight, 700); letter-spacing: var(--heading-letter-spacing, .04em); color: var(--heading-accent, #111); }
.preset-heading .preset-rule { display: var(--heading-rule-display, block); background: var(--heading-accent, #222); }
.preset-heading-centered { padding-top: 34px; }
.preset-heading-stacked h1 { font-size: 11px; }
.preset-heading-rule h1 { margin: 10px 0; }
.preset-heading-deck { padding-top: 40px; }
.preset-deck { text-align: center; font-size: var(--deck-size, 10px); font-style: italic; }
.preset-rule { width: var(--rule-width, 52%); height: 1px; margin: 8px auto; background: var(--rule-color, #222); }
.preset-rule.short { width: 28%; }
.preset-subhead h2 { margin: 9px 0 4px; font-size: var(--subhead-size, 13px); text-transform: none; }
.preset-subhead-caps h2 { text-transform: uppercase; letter-spacing: var(--letter-spacing, .08em); font-size: 11px; }
.preset-subhead-rule .preset-rule { margin: 10px 0 6px; }
.preset-first h3 { margin-bottom: 8px; text-transform: uppercase; font-size: 9px; letter-spacing: .08em; }
.preset-dropcap p:first-of-type::first-letter,
.preset-initial p:first-of-type::first-letter { float: left; margin: 3px 5px 0 0; font-size: var(--dropcap-size, 38px); line-height: .76; font-weight: 700; }
.preset-initial p:first-of-type::first-letter { padding: 3px 5px; border: var(--initial-border, 1px solid #222); }
.preset-lead strong { text-transform: uppercase; letter-spacing: .05em; font-weight: var(--lead-weight, 700); }
.preset-after-break .preset-breakline { margin: 0 0 12px; font-size: 8px; text-align: center; }
.preset-after-break.preset-spaced p:nth-child(2) { margin-top: var(--spacing-before, 20px); }
.preset-ornament .ornament { margin: 12px 0; text-align: center; color: var(--ornament-color, #333); font-size: 14px; letter-spacing: .12em; }
.preset-rule-break .preset-rule { margin: 16px auto; }
.preset-quote blockquote { margin: 10px var(--quote-indent, 28px); font-size: 9px; }
.preset-quote-centered blockquote,
.preset-quote-centered cite { display: block; text-align: center; }
.preset-quote-rule blockquote { padding-left: 10px; border-left: var(--quote-rule, 3px) solid #222; }
.preset-verse .verse { margin: 10px 0 12px var(--verse-indent, 32px); font-style: italic; }
.preset-verse .verse span { display: block; }
.preset-verse-centered .verse { margin-left: 0; text-align: center; }
.preset-stanza .verse br { display: block; content: ""; margin-top: var(--stanza-spacing, 14px); }
.preset-conversation .bubble { max-width: 70%; margin: 5px 0; padding: 5px 8px; border-radius: var(--bubble-radius, 14px); background: #ececec; font: 8px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.preset-conversation .bubble.right { margin-left: auto; background: #d7ebff; }
.preset-transcript strong { display: inline-block; min-width: 44px; font-weight: var(--speaker-weight, 700); }
.preset-script dl { display: grid; grid-template-columns: 42px 1fr; gap: var(--message-spacing, 8px) 10px; margin: 16px 0 0; }
.preset-script dt { font-weight: 700; }
.preset-note { padding: 38px 24px; }
.preset-note .note { width: var(--note-width, 76%); margin: 0 auto; padding: var(--note-padding, 16px); background: var(--paper-tone, #fffdf8); box-shadow: var(--note-shadow, 0 2px 8px rgba(0,0,0,.12)); transform: rotate(var(--note-rotation, -1deg)); }
.preset-note-script .note { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: var(--script-size, 15px); font-style: var(--script-slant, normal); line-height: 1.18; }
.preset-note-inset .note,
.preset-note-border .note { border: var(--note-border, 1px solid #ddd); }
.preset-note-folded .note { background: linear-gradient(135deg, #fffdf8 0 82%, #f1eee7 83%); }
.preset-note-formal .note { text-align: var(--note-align, left); }
.preset-photo figure,
.preset-caption figure { margin: 0; }
.preset-photo .photo-context { margin: 0 0 13px; }
.preset-photo .photo-after { margin: 13px 0 0; }
.preset-caption .caption-context { margin: 0 0 10px; }
.preset-caption .caption-after { margin: 10px 0 0; }
.photo-block { width: var(--photo-width, 92%); height: 78px; margin: 0 auto 7px; border: var(--photo-border, 0); border-radius: var(--photo-radius, 0); background: linear-gradient(#b8d5e9 0 42%, #e7d6aa 43% 55%, #44749a 56% 100%); background-size: cover; background-position: center; box-shadow: inset 0 0 0 var(--photo-frame, 0) var(--photo-frame-color, #fff), var(--photo-shadow, none); }
.preset-photo-plain .photo-block { --photo-width: 92%; }
.preset-photo-shadow .photo-block { --photo-width: 88%; --photo-shadow: 0 3px 8px rgba(0,0,0,.24); }
.preset-photo-hairline .photo-block { --photo-width: 92%; --photo-border: 1px solid #222; }
.preset-photo-gray-mat .photo-block { --photo-width: 92%; --photo-frame: 7px; --photo-frame-color: #cfcfcf; }
.preset-photo-cream-card .photo-block { --photo-width: 84%; --photo-frame: 8px; --photo-frame-color: #f8f5e6; --photo-shadow: 0 5px 10px rgba(0,0,0,.24); }
.preset-photo-inset .photo-block { width: var(--photo-width, 72%); }
.preset-photo-framed .photo-block { padding: var(--frame-width, 8px); border: 1px solid #ddd; background-clip: content-box; }
.preset-photo figcaption,
.preset-caption figcaption { text-align: var(--caption-align, center); text-transform: var(--caption-case, none); font-family: var(--caption-font, Georgia); font-size: var(--caption-size, 7px); font-style: var(--caption-style, normal); color: #333; }
.preset-caption figcaption { margin-top: 6px; line-height: 1.25; }
.preset-caption-serif figcaption { --caption-align: center; --caption-font: Georgia; --caption-size: 7px; }
.preset-caption-caps figcaption { text-transform: var(--caption-case, uppercase); letter-spacing: .08em; }
.preset-caption-italic figcaption { font-style: var(--caption-style, italic); }
.preset-caption-sans figcaption { --caption-font: Avenir, "Segoe UI", sans-serif; --caption-size: 6px; color: #555; }
.preset-caption-display figcaption { --caption-font: Georgia; --caption-size: 8px; font-weight: 700; color: #2f2b21; }
.preset-portrait { font-size: 9px; line-height: 1.32; text-align: justify; }
.preset-portrait p { margin: 0 0 7px; }
.preset-portrait .portrait-block { float: left; width: var(--portrait-width, 92px); height: var(--portrait-height, 112px); margin: 0 14px 6px 0; border-radius: var(--portrait-radius, 0); background: radial-gradient(circle at 50% 34%, #ddd 0 14%, transparent 15%), linear-gradient(#222 0 100%); background-size: cover; background-position: center; filter: grayscale(1); box-shadow: inset 0 0 0 var(--portrait-frame, 0) #fff, var(--portrait-shadow, 0 0 0 1px rgba(0,0,0,.12)); }
.preset-portrait-square-tight .portrait-block { --portrait-width: 92px; --portrait-height: 120px; }
.preset-portrait-square-wide .portrait-block { --portrait-width: 98px; --portrait-height: 110px; }
.preset-portrait-rounded-square .portrait-block { --portrait-width: 98px; --portrait-height: 110px; --portrait-radius: 5px; }
.preset-portrait-oval .portrait-block { --portrait-width: 92px; --portrait-height: 112px; border-radius: 50%; shape-outside: ellipse(46px 56px at 46px 56px); }
.preset-portrait-framed .portrait-block { border: var(--portrait-border, 6px solid #f7f2e8); }
.preset-header-footer header { display: grid; grid-template-columns: 18px 1fr 1fr 18px; gap: 8px; margin-bottom: 14px; border-bottom: 1px solid #ddd; font-size: 7px; }
.preset-header-footer footer { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 7px; }
.preset-running-title header { grid-template-columns: 1fr 1fr; }
.preset-no-header header,
.preset-no-header footer { display: none; }
.preset-background { background: var(--page-background, #fff); }
.preset-background.preset-border { box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 11px var(--border-color, #111); }
.preset-background.preset-tint { background: var(--page-background, #fbf6ea); }
.preset-body { font-family: var(--body-font, Georgia), "Times New Roman", serif; line-height: var(--line-height, 1.55); }
.preset-readable { font-family: Avenir, "Segoe UI", sans-serif; }
.preset-compact { line-height: var(--line-height, 1.35); }
.preset-screen { font-family: Helvetica, Arial, sans-serif; }
.style-part-carousel { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 28px; color: rgba(255,255,255,.35); }
.style-part-carousel-button { display: grid; place-items: center; width: 32px; height: 28px; margin: 0 18px; border: 0; color: rgba(255,255,255,.44); background: transparent; }
.style-part-carousel-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); }
.style-part-carousel-dot.active { background: white; }
.style-part-settings-button { display: grid; place-items: center; width: 42px; height: 31px; margin: 20px auto 0; border: 0; border-radius: 15px; color: #d8dddd; background: #484d50; }
.style-part-property-panel { width: min(460px, 88%); margin: 18px auto 0; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(28,31,32,.54); color: #dce1e1; }
.style-part-property-panel h3 { margin: 0 0 10px; color: #fff; font-size: 13px; }
.style-property-row { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 27px; gap: 12px; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; }
.style-property-row:first-of-type { border-top: 0; }
.style-property-row small { color: #aeb5b5; }
.style-property-pill { padding: 3px 8px; border-radius: 10px; background: rgba(255,255,255,.1); color: #f0f3f3; }
.style-part-editor[data-editor="heading-customize"] .style-part-preview-stage { height: 300px; max-width: 540px; overflow: visible; }
.style-part-editor[data-editor="header-and-footer-customize"] .style-part-preview-stage,
.style-part-editor[data-editor="body"] .style-part-preview-stage { height: auto; max-width: 620px; overflow: visible; }
.style-part-editor[data-editor="heading-customize"] .style-part-property-panel { width: min(470px, 94%); margin-top: 14px; padding: 0; border: 0; background: transparent; }
.style-settings-close { position: static; z-index: 4; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; color: #b9bebe; background: transparent; font-size: 20px; }
.style-settings-close i { font-size: 20px; }
.style-settings-large-preview { display: flex; justify-content: center; }
.heading-settings-preview { width: 360px; height: 260px; padding: 46px 34px 24px; overflow: hidden; background: white; color: #111; box-shadow: 0 8px 18px rgba(0,0,0,.34); font-family: Georgia, "Times New Roman", serif; }
.heading-settings-preview.heading-align-left { text-align: left; }
.heading-settings-preview.heading-align-center { text-align: center; }
.heading-settings-preview.heading-align-right { text-align: right; }
.heading-settings-preview.heading-small { padding-top: 32px; }
.heading-settings-preview.heading-medium { padding-top: 52px; }
.heading-settings-preview.heading-large { padding-top: 72px; }
.heading-preview-rule { width: 70%; height: 1px; margin: 0 auto 42px; background: #555; }
.heading-preview-number { margin: 0 0 10px; font-size: 15px; line-height: 1; }
.heading-settings-preview.heading-small .heading-preview-number { font-size: 13px; }
.heading-settings-preview.heading-large .heading-preview-number { font-size: 17px; }
.heading-settings-preview .heading-preview-rule + .heading-preview-number + .heading-preview-rule { margin-bottom: 34px; }
.heading-settings-preview h3 { margin: 0 0 9px; text-align: left; text-transform: uppercase; font-size: 15px; letter-spacing: .03em; }
.heading-settings-preview p { margin: 0; text-align: left; font-size: 13px; line-height: 1.28; }
.settings-card { border-radius: 14px; background: #3b3f40; color: #dadddd; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.heading-settings-card { padding: 16px 20px; font-size: 14px; font-weight: 700; }
.settings-row { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 34px; }
.settings-row > span:first-child { justify-self: end; color: #e2e4e4; }
.settings-row select { width: min(190px, 100%); height: 30px; padding: 0 10px; border: 0; border-radius: 8px; color: #f1f2f2; background: #565a5b; font: inherit; font-size: 13px; }
.settings-row input[type="range"] { width: min(230px, 100%); accent-color: #e4e6e6; }
.settings-row input[type="checkbox"],
.settings-row input[type="radio"] { width: 16px; height: 16px; margin: 0 6px 0 0; accent-color: #2d8cff; vertical-align: middle; }
.icon-segment { display: flex; gap: 5px; }
.icon-segment button { display: grid; place-items: center; min-width: 30px; height: 30px; border: 0; border-radius: 7px; color: #e8ebeb; background: #565a5b; }
.icon-segment button.active { background: #2d8cff; color: white; }
.heading-size-icon { display: block; width: 18px; height: 14px; border: 2px solid currentColor; border-bottom: 0; }
.heading-size-icon.small { height: 11px; }
.heading-size-icon.large { height: 17px; }
.settings-divider,
.settings-rule { height: 1px; background: rgba(255,255,255,.12); }
.settings-divider { margin: 12px 0 14px; }
.heading-settings-card h3 { margin: 0 0 8px; font-size: 15px; }
.settings-screen { position: relative; min-height: 360px; color: #d7dbdb; font-size: 14px; font-weight: 700; }
.settings-screen-subtitle { margin: 0 0 16px; color: #b5bbbb; font-size: 15px; }
.settings-screen-subtitle i { margin-right: 8px; }
.settings-help { position: absolute; right: 0; top: 30px; width: 30px; height: 30px; border: 0; border-radius: 50%; color: #e2e4e4; background: #484d4e; font-size: 18px; font-weight: 800; }
.header-footer-grid,
.body-settings-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 15px 12px; margin-top: 20px; }
.header-footer-grid > span,
.body-settings-grid > span { justify-self: end; }
.layout-options { display: flex; gap: 7px; align-items: center; }
.layout-thumb { position: relative; width: 62px; height: 84px; border: 2px solid transparent; background: #f8f8f5; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.layout-thumb.active,
.align-thumb.active { border-color: #6ea8ff; background-color: #d8e8ff; }
.layout-thumb span,
.align-thumb span { position: absolute; left: 22%; right: 22%; top: 12px; height: 5px; border-radius: 3px; background: #111; }
.layout-thumb::after,
.align-thumb::after { content: ""; position: absolute; left: 10px; right: 10px; top: 24px; height: 38px; background: repeating-linear-gradient(#cfd3d3 0 2px, transparent 2px 7px); }
.layout-thumb b,
.align-thumb b { position: absolute; right: 10px; bottom: 6px; color: #111; font-size: 11px; }
.layout-bottom span { top: auto; bottom: 24px; }
.layout-minimal span { display: none; }
.layout-split span { right: 52%; }
.layout-options.compact .align-thumb { width: 62px; height: 32px; }
.align-thumb { position: relative; border: 2px solid transparent; background: #f8f8f5; }
.align-thumb::after { top: 15px; height: 9px; }
.align-center span { left: 30%; right: 30%; }
.header-content-controls { display: grid; grid-template-columns: minmax(120px, 180px) 26px minmax(120px, 180px); gap: 8px; align-items: center; }
.header-content-controls select,
.body-print-card select { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; color: #f1f2f2; background: #565a5b; font: inherit; font-size: 13px; }
.stacked-checks { display: flex; flex-direction: column; gap: 8px; }
.stacked-checks label { font-weight: 650; }
.stacked-checks .indented { margin-left: 24px; }
.ornament-picker { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid #666c6d; border-radius: 7px; color: #aeb3b3; background: #474b4c; }
.ornament-picker input { position: absolute; opacity: 0; }
.ornament-picker i { font-size: 24px; }
.settings-info { display: flex; align-items: center; gap: 10px; margin: 16px 0 0 138px; color: #d9dddd; font-size: 12px; }
.body-settings-screen { min-height: 360px; }
.body-print-card { margin-top: 24px; padding: 14px 24px 18px; }
.body-print-card h3 { margin: 0 0 10px; color: #bfc4c4; font-size: 15px; }
.body-print-card small { display: block; margin-left: 24px; color: #b9bebe; font-size: 11px; }
.navigator-panel { position: relative; overflow: hidden; padding: 15px 11px 38px 17px; background: #222526; border-right: 1px solid #101111; transition: opacity .15s ease, visibility .15s ease, padding .22s ease, border-color .22s ease; }
.book-identity { padding: 0 8px 14px; border-bottom: 1px solid var(--line); }
.book-identity h1 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.book-identity p { margin: 1px 0 0; color: #e1e2e2; font-size: 11px; }
.navigator-label { margin: 11px 8px 5px; color: #b3b7b7; font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.chapter-list { height: calc(100% - 88px); overflow: auto; scrollbar-width: none; }
.chapter-list::-webkit-scrollbar { display: none; }
.chapter-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 0; border-radius: 6px; color: #dcdfdf; background: transparent; text-align: left; font-size: 12px; line-height: 1.15; }
.chapter-item:hover { background: rgba(255,255,255,.06); }
.chapter-item.active { color: #6ca2ff; background: #3a3d3e; }
.chapter-item.part { margin-top: 4px; color: #fff; font-weight: 600; }
.chapter-item .chapter-dot { width: 7px; color: #666; font-size: 4px; text-align: center; }
.navigator-footer { position: absolute; left: 17px; right: 11px; bottom: 9px; display: flex; gap: 7px; border-top: 1px solid var(--line); padding-top: 8px; }
.navigator-footer button { border: 0; background: transparent; color: #c7caca; }
.navigator-footer i { font-size: 11px; }

.editor-panel { display: flex; flex-direction: column; padding: 20px 25px 30px; overflow: hidden; background: #2d3032; border-right: 1px solid #111; transition: border-color .22s ease; }
.editor-heading-row { display: flex; justify-content: space-between; align-items: center; }
.editor-heading-row h2 { margin: 0 0 16px; font-size: 20px; color: #aeb2b2; font-weight: 700; }
.heading-settings { border: 0; color: #b5b8b8; background: transparent; }
.heading-settings i + i, .format-toolbar i + i { margin-left: 4px; font-size: 8px; }
.format-toolbar { display: flex; align-items: center; gap: 4px; height: 36px; margin-bottom: 17px; padding: 4px 8px; border-radius: 8px; background: #343739; }
.format-toolbar button { min-width: 28px; height: 27px; padding: 0 7px; border: 0; border-radius: 5px; background: #444749; color: #bfc2c2; }
.format-toolbar button:hover { background: #55595b; color: white; }
.format-toolbar button.active { color: white; background: #287be8; }
.toolbar-space { flex: 1; }
.find-bar { display: flex; align-items: center; gap: 7px; min-height: 38px; margin: -12px 0 14px; padding: 5px 8px; border-radius: 8px; background: #343739; color: #c9cccd; font-size: 12px; }
.find-bar[hidden] { display: none; }
.find-mode { position: relative; width: 100px; height: 27px; display: flex; align-items: center; padding: 0 9px; border-radius: 6px; background: #4a4d4f; }
.find-mode i { position: absolute; right: 8px; font-size: 7px; }
.find-mode .fa-chevron-up { top: 7px; }
.find-mode .fa-chevron-down { bottom: 6px; }
.find-bar input { width: min(230px, 45%); height: 27px; padding: 0 9px; border: 1px solid #292c2d; border-radius: 5px; outline: none; color: #e9ebeb; background: #292c2e; }
.find-bar button { min-width: 28px; height: 27px; padding: 0 7px; border: 0; border-radius: 5px; color: #bfc2c2; background: transparent; }
.find-bar button:hover { color: white; background: #4a4e50; }
.find-bar button i + i { margin-left: 3px; font-size: 7px; }
.find-space { flex: 1; }
.editor-content,
.editor-content.ql-container.ql-snow { flex: 1; min-height: 0; overflow: hidden; border: 0; outline: none; color: #f2f0ea; background: transparent; font: 17px/1.42 Georgia, "Times New Roman", serif; }
.editor-content .ql-editor { height: 100%; overflow-y: auto; padding: 0; color: #f2f0ea; font: inherit; }
.editor-content .ql-editor p { margin: 0 0 1.85em; }
.editor-content .ql-editor.ql-blank::before { left: 0; right: 0; color: #8f9696; font-style: normal; }
.editor-content .ql-editor::selection,
.editor-content .ql-editor *::selection { background: rgba(62,127,240,.6); }

.book-window.toc-collapsed .book-workspace { grid-template-columns: 0 minmax(370px, 1fr) minmax(330px, 1fr); }
.book-window.preview-collapsed .book-workspace { grid-template-columns: 238px minmax(370px, 1fr) 0; }
.book-window.toc-collapsed.preview-collapsed .book-workspace { grid-template-columns: 0 minmax(370px, 1fr) 0; }
.book-window.preview-collapsed { min-width: 620px; }
.book-window.preview-collapsed .window-titlebar { grid-template-columns: 238px minmax(230px, 1fr) minmax(170px, .7fr); }
.book-window.toc-collapsed .navigator-panel,
.book-window.preview-collapsed .preview-panel { visibility: hidden; opacity: 0; padding-right: 0; padding-left: 0; pointer-events: none; }
.book-window.toc-collapsed .navigator-panel { border-right-color: transparent; }
.book-window.preview-collapsed .editor-panel { border-right-color: transparent; }
.desktop-message { position: absolute; z-index: 1500; left: 50%; bottom: 34px; transform: translate(-50%, 18px); padding: 9px 14px; border-radius: 10px; background: rgba(30,32,33,.94); box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 13px; }
.desktop-message.show { opacity: 1; transform: translate(-50%, 0); }

.print-settings-overlay { position: absolute; z-index: 1300; inset: 0; display: grid; place-items: center; color: #e4e6e6; }
.print-settings-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.46); backdrop-filter: grayscale(.25) brightness(.64); }
.print-settings-dialog { position: relative; width: min(640px, calc(100% - 42px)); max-height: min(760px, calc(100% - 42px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(29,31,30,.98); box-shadow: 0 24px 70px rgba(0,0,0,.56), inset 0 1px rgba(255,255,255,.06); font-size: 13px; font-weight: 500; }
.print-settings-header { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 24px 20px 16px; }
.print-settings-header h2 { margin: 0; color: #d9dddd; font-size: 24px; line-height: 1; font-weight: 650; }
.print-unit-toggle { display: flex; padding: 2px; border-radius: 7px; background: #353837; }
.print-unit-toggle button { min-width: 44px; height: 27px; border: 0; border-radius: 6px; color: #d9dddd; background: transparent; font-size: 13px; font-weight: 600; }
.print-unit-toggle button.active { color: white; background: #2f86ff; }
.print-help-button { width: 32px; height: 32px; border: 0; border-radius: 50%; color: #e6e8e8; background: #3f4241; font-size: 18px; font-weight: 650; }
.print-settings-content { min-height: 0; overflow: auto; padding: 0 20px 16px; scrollbar-color: #7b8180 rgba(255,255,255,.08); }
.print-settings-content h3 { margin: 16px 0 16px 46px; color: #d8dddd; font-size: 14px; font-weight: 600; }
.popular-trims { display: flex; justify-content: center; gap: 30px; margin-bottom: 14px; }
.trim-card { width: 68px; padding: 0; border: 0; color: #d9dddd; background: transparent; font-size: 12px; font-weight: 600; }
.trim-card span { display: block; width: calc(74px * var(--trim-ratio)); height: 98px; max-width: 74px; margin: 0 auto 8px; border: 2px solid #9ca0a0; background: #3b3d3d; box-shadow: inset 3px 0 rgba(255,255,255,.14); }
.trim-card.active span { border-color: #d9e3f0; background: #496e99; box-shadow: inset 3px 0 rgba(255,255,255,.28), 0 0 0 1px #6fa8ff; }
.more-trim-options { display: block; height: 29px; margin: 0 45px 28px auto; padding: 0 16px; border: 0; border-radius: 8px; color: #e0e3e3; background: #3d403f; font-size: 13px; font-weight: 600; }
.print-settings-card { border-radius: 14px; background: #282b2a; box-shadow: inset 0 1px rgba(255,255,255,.03); }
.margin-card { width: calc(100% - 64px); display: grid; grid-template-columns: 1fr 140px 32px; align-items: center; gap: 12px; margin: 0 auto 22px; padding: 18px 96px 18px 82px; }
.margin-card > span { justify-self: end; }
.margin-card label { display: flex; height: 35px; min-width: 136px; border-radius: 8px; background: #202222; }
.margin-card input { width: 100px; padding: 0 10px; border: 1px solid #303433; border-radius: 8px 0 0 8px; color: #e8ebeb; background: #202222; font: inherit; }
.stepper { width: 33px; display: grid; place-items: center; border-left: 1px solid #373b3a; color: #b7bbbb; font-size: 11px; }
.auto-margin { height: 31px; border: 0; border-radius: 18px; color: #b9bebe; background: #303332; font-size: 12px; font-weight: 700; }
.margin-tune { width: 28px; height: 28px; border: 0; color: #c9cece; background: transparent; }
.print-settings-section { border-bottom: 1px solid rgba(255,255,255,.12); padding: 0 0 13px; }
.print-section-toggle { width: 100%; height: 32px; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; color: #d4d8d8; background: transparent; text-align: left; font-size: 14px; font-weight: 600; }
.print-section-toggle i { width: 20px; color: #b9bebe; font-size: 14px; transition: transform .14s ease; }
.print-settings-section.open .print-section-toggle i { transform: rotate(90deg); }
.print-section-summary { margin: -4px 0 0 32px; color: #aeb4b4; font-size: 12px; font-weight: 500; }
.print-section-body { display: none; }
.print-settings-section.open .print-section-body { display: block; }
.print-settings-section.open .print-section-summary { display: none; }
.text-adjust-card { width: calc(100% - 32px); margin: 4px 0 6px 32px; padding: 16px 48px; }
.text-adjust-card label { display: grid; grid-template-columns: 118px 18px 1fr 26px 52px; align-items: center; gap: 12px; min-height: 44px; }
.text-adjust-card label span { justify-self: end; }
.text-adjust-card input[type="range"] { accent-color: #e5e7e7; }
.text-adjust-card b { color: #9da3a3; font-size: 12px; font-weight: 600; }
.text-adjust-card .large-a { font-size: 22px; font-family: Georgia, serif; font-weight: 500; }
.text-adjust-card button { height: 30px; border: 0; border-radius: 8px; color: #dfe2e2; background: #414443; }
.print-radio-card { width: calc(100% - 44px); display: flex; flex-direction: column; gap: 7px; margin: 4px 0 6px 32px; padding: 18px 76px; }
.print-radio-card.two-column { display: grid; grid-template-columns: 210px minmax(0,1fr); align-items: start; }
.print-radio-card.two-column > span { justify-self: end; padding-top: 2px; }
.print-radio-card label { display: flex; align-items: center; gap: 10px; min-height: 27px; }
.print-radio-card input { width: 23px; height: 23px; margin: 0; accent-color: #2e87ff; }
.bleed-card { width: calc(100% - 32px); display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; gap: 12px 16px; margin: 4px 0 6px 32px; padding: 20px 84px 20px 72px; }
.bleed-card > span { justify-self: end; padding-top: 8px; }
.print-select-wrap { display: flex; flex-direction: column; gap: 4px; }
.print-select-wrap small { color: #9ea4a4; font-size: 12px; font-weight: 500; }
.print-select-button { min-width: 238px; height: 32px; display: grid; grid-template-columns: 1fr 12px 12px; align-items: center; gap: 2px; padding: 0 12px 0 14px; border: 0; border-radius: 8px; color: #e9ecec; background: #4d5150; text-align: left; font-size: 13px; font-weight: 500; }
.print-select-button i { font-size: 10px; color: #d2d5d5; }
.print-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px 20px; border-top: 1px solid rgba(255,255,255,.12); }
.print-settings-footer span { color: #e0e3e3; font-size: 12px; font-weight: 500; }
.print-settings-footer i { margin-right: 8px; color: #2f86ff; }
.print-done-button { height: 34px; min-width: 78px; border: 0; border-radius: 8px; color: #fff; background: #2f86ff; font-size: 14px; font-weight: 600; }
.trim-options-popover { position: absolute; z-index: 4; left: 36px; right: 8px; padding: 30px; border: 1px solid rgba(255,255,255,.28); border-radius: 28px; background: linear-gradient(145deg, rgba(44,47,46,.98), rgba(25,28,27,.98)); box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.trim-options-popover::before { content: ""; position: absolute; top: -12px; left: 50%; width: 22px; height: 22px; border-left: 1px solid rgba(255,255,255,.28); border-top: 1px solid rgba(255,255,255,.28); background: #2f3231; transform: translateX(-50%) rotate(45deg); }
.trim-popover-tabs { width: 304px; display: flex; margin: 0 auto 20px; padding: 2px; border-radius: 8px; background: #474a49; }
.trim-popover-tabs button { flex: 1; height: 32px; border: 0; border-radius: 7px; color: #eceeee; background: transparent; font-size: 14px; font-weight: 600; }
.trim-popover-tabs button.active { background: #2f86ff; color: white; }
.trim-options-popover h4 { margin: 15px 0 8px; color: #dfe2e2; font-size: 13px; font-weight: 600; }
.trim-size-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.trim-size-grid button { min-height: 42px; border: 1px solid #9fa3a3; border-radius: 6px; color: #f0f2f2; background: linear-gradient(135deg, #676b6a, #4b4e4d); font-size: 13px; font-weight: 600; box-shadow: inset 0 1px rgba(255,255,255,.22); }
.trim-size-grid button.active { background: #5d7fa6; border-color: #cdd9e7; }
.trim-size-grid small { display: block; margin-top: 2px; color: #d6dada; font-size: 11px; }
.print-select-popover { position: absolute; z-index: 5; min-width: 236px; padding: 6px; border: 1px solid rgba(255,255,255,.24); border-radius: 14px; background: linear-gradient(180deg, rgba(64,67,66,.98), rgba(24,26,25,.98)); box-shadow: 0 16px 36px rgba(0,0,0,.48); }
.print-select-popover button { width: 100%; min-height: 31px; display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 7px; color: #f2f4f4; background: transparent; text-align: left; font-size: 13px; font-weight: 500; }
.print-select-popover button:hover { background: #2f86ff; }
.print-select-popover i { font-size: 12px; }
.print-select-separator { height: 1px; margin: 6px 16px; background: rgba(255,255,255,.24); }

#app-popover-layer { position: absolute; z-index: 1400; inset: 0; pointer-events: none; }
.app-popover {
  position: fixed;
  min-width: 246px;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(255,255,255,.33);
  border-radius: 15px;
  color: #f3f3f3;
  background: linear-gradient(145deg, rgba(39,42,43,.98), rgba(64,66,67,.97));
  box-shadow: 0 16px 32px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.09);
  pointer-events: auto;
  scrollbar-width: none;
}
.app-popover::-webkit-scrollbar { display: none; }
.app-popover.opens-below { transform-origin: top center; }
.app-popover.opens-above { transform-origin: bottom center; }
.formatting-menu { min-width: 157px; padding: 7px 8px; border-radius: 16px; }
.formatting-menu .app-menu-row { min-height: 31px; grid-template-columns: 1fr; padding: 3px 12px; font-size: 15px; }
.formatting-menu .checkmark,
.formatting-menu .row-icon,
.formatting-menu .submenu-chevron { display: none; }
.formatting-menu .row-copy strong { font-weight: 500; }
.formatting-menu .format-small-caps { font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; font-weight: 700; letter-spacing: .02em; }
.formatting-menu .format-sans-serif { font-family: Arial, Helvetica, sans-serif; }
.formatting-menu .format-monospace { font-family: "Courier New", monospace; }
.formatting-menu .format-strikethrough .row-copy { text-decoration: line-through; }
.app-menu-row { position: relative; width: 100%; min-height: 31px; display: grid; grid-template-columns: 16px 27px 1fr 13px; align-items: center; padding: 3px 8px 3px 4px; border: 0; border-radius: 7px; color: #f4f4f4; background: transparent; text-align: left; font-size: 15px; white-space: nowrap; }
.app-menu-row:hover, .app-menu-row.open, .app-menu-row.selected { background: rgba(255,255,255,.14); }
.app-menu-row.selected { background: #168df4; }
.app-menu-row.disabled { color: rgba(255,255,255,.3); }
.app-menu-row.disabled:hover { background: transparent; }
.checkmark { width: 14px; color: #f7f7f7; font-size: 12px; text-align: center; }
.row-icon { width: 24px; color: #c9cecf; font-size: 17px; text-align: center; }
.row-copy { display: flex; flex-direction: column; line-height: 1.15; }
.row-copy strong { font-weight: 500; }
.row-copy small { margin-top: 2px; color: #bebfc0; font-size: 12px; }
.submenu-chevron { justify-self: end; font-size: 11px; }
.app-menu-separator { height: 1px; margin: 6px 9px; background: rgba(255,255,255,.17); }
.app-menu-heading { padding: 4px 39px 0; color: rgba(255,255,255,.26); font-size: 13px; font-weight: 700; }
.word-count-menu { min-width: 285px; }
.word-count-menu .app-menu-row { grid-template-columns: 16px 0 1fr 0; }
.word-count-menu .row-copy strong { font-weight: 500; }
.contents-menu { min-width: 225px; }
.contents-menu .app-menu-row { min-height: 27px; grid-template-columns: 0 0 1fr 0; padding-left: 12px; font-size: 14px; }
.app-submenu { min-width: 232px; }

.appearance-popover { width: 275px; padding: 12px; }
.font-size-picker { height: 47px; display: flex; align-items: end; justify-content: space-around; }
.font-size-picker button { width: 28px; height: 42px; padding: 0 0 7px; border: 0; border-bottom: 3px solid transparent; color: #f4f4f4; background: transparent; font-family: Georgia, serif; }
.font-size-picker button.active { border-color: #2588fa; }
.font-list { display: flex; flex-direction: column; align-items: stretch; }
.font-list button { position: relative; height: 31px; padding-left: 31px; border: 0; color: #f2f2f2; background: transparent; text-align: left; font-size: 15px; }
.font-list button.active::before { content: "✓"; position: absolute; left: 8px; color: #bfc2c3; }
.font-list button[data-font="Baskerville"], .font-list button[data-font="Georgia"] { font-family: Georgia, serif; }
.font-list button[data-font="Palatino"] { font-family: Palatino, serif; }
.theme-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.theme-picker button { height: 29px; border: 2px solid transparent; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.theme-picker button.active { border-color: #328dff; }
.theme-white { color: #111; background: #fff; }
.theme-sepia { color: #574a39; background: #eee3c4; }
.theme-black { color: #ddd; background: #202020; }
@media (max-height: 730px) {
  .book-window { top: 54%; height: 78vh; }
  .editor-content { font-size: 15px; }
}