@import url("./fonts.css");

:root {
  color-scheme: light;
  --paper: #f2efe8;
  --cream: #fffcf5;
  --ink: #2b241f;
  --muted: #6c6057;
  --line: #d8cdbe;
  --pink: #ffa6c7;
  --blush: #f8dfe7;
  --yellow: #ffef9f;
  --serif: "Noto Serif", Georgia, serif;
  font: 13px/1.4 "Open Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0 auto; max-width: 430px; }
main { min-height: 100dvh; padding: 21px 24px calc(106px + env(safe-area-inset-bottom)); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font: 400 30px/1.16 var(--serif); }
h1 { font-size: clamp(32px, 11vw, 43px); letter-spacing: -.03em; overflow-wrap: anywhere; }
h3 { font-size: 20px; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button, .pill { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
button, .pill, input:not([type=checkbox]), select {
  border: 1px solid var(--line);
  background: var(--cream);
  border-radius: 12px;
  min-height: 40px;
  padding: 8px 12px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #9b4568; outline-offset: 2px; }
label { display: grid; gap: 6px; margin: 12px 0; font-weight: 600; }
input:not([type=checkbox]), select { width: 100%; min-width: 0; }
img { display: block; }
.subline, .hint, .source { color: var(--muted); }
.subline { margin-top: 4px; }
.small, .source { font-size: 11px; }
.hint { margin-top: 12px; text-align: center; font-size: 10px; }
#notice { display: block; margin: 12px 24px 0; }
#notice:empty { display: none; }
body:has(main:not([hidden])) #notice:not(:empty) {
  position: fixed;
  z-index: 3;
  bottom: calc(96px + env(safe-area-inset-bottom));
  left: 50%;
  width: min(calc(100% - 48px), 382px);
  margin: 0;
  transform: translateX(-50%);
  padding: 10px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 8px #402e3319;
  pointer-events: none;
}

.masthead, .screen-head, .shelf-tools, .card-heading, .book-actions { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.masthead { margin-bottom: 11px; }
.screen-head { margin-bottom: 20px; }
.brand, .pill, .circle, .primary, .tabs { display: inline-flex; align-items: center; gap: 8px; }
.brand { font: 16px var(--serif); gap: 10px; }
.brand span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--blush); }
.circle { width: 36px; height: 36px; min-height: 36px; justify-content: center; padding: 0; border-radius: 50%; }
.pill { min-height: 36px; border-radius: 22px; font-size: 11px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.shelf-tools { margin: 15px 0; }
.tabs { gap: 4px; }
.tabs button { font-size: 11px; font-weight: 600; min-height: 34px; border-radius: 20px; background: transparent; border-color: transparent; }
.tabs [aria-pressed=true] { background: var(--blush); border-color: var(--line); }
.selected-sort, .yellow { background: var(--yellow); }

.rack {
  position: relative;
  overflow: hidden;
  border: 1px solid #504137;
  border-radius: 9px;
  padding: 8px;
  background: #e4d6bf;
  box-shadow: inset 0 0 0 1px #bda990, 0 4px 9px #402e211c;
}
.rack-row { position: relative; min-height: 122px; border-inline: 1px solid #bda990; background: var(--cream); padding: 9px 8px 9px 12px; }
.rack-row:nth-child(even) { background: #faf5ea; }
.rack-title { display: flex; align-items: center; gap: 7px; font: 700 11px/15px "Open Sans", system-ui, sans-serif; color: #504137; }
.rack-title i { width: 9px; height: 9px; border-radius: 2px; background: var(--status); border: 1px solid #bda99085; }
.rack-title span { font-size: 10px; font-weight: 600; color: var(--muted); }
.rack-link { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; margin: -8px 0 -9px -4px; padding: 0 4px; background: transparent; border: 0; border-radius: 5px; font: inherit; color: inherit; }
.rack-link:hover { text-decoration: underline; text-underline-offset: 2px; }
[data-status=reading] { --status: #fff0a5; }
[data-status=planned] { --status: #fffcf5; }
[data-status=finished] { --status: #ffa6c7; }
[data-status=unfinished] { --status: #ebe0d3; }
.spines { position: absolute; inset: 33px 8px 9px 14px; display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rack-row:has(.shelf-decoration) .spines { right: 100px; }
.rack-row[data-status=finished] .spines { right: 66px; }
.rack-row[data-status=reading] .spines { right: 82px; }
.spines::-webkit-scrollbar { display: none; }
.spine {
  position: relative;
  display: flex;
  flex: 0 0 44px;
  height: 72px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  border: 1px solid #504137;
  border-radius: 3px;
  padding: 3px;
  background: var(--status);
  box-shadow: inset 2px 0 #bda99080;
  font: 8px/1.13 var(--serif);
}
.spine:nth-of-type(4n+2) { flex-basis: 38px; height: 62px; }
.spine:nth-of-type(4n+3) { flex-basis: 46px; height: 75px; }
.spine:nth-of-type(4n+4) { flex-basis: 40px; height: 66px; }
.spine::before, .spine::after { content: ""; position: absolute; left: 5px; right: 4px; height: 3px; border-block: 1px solid #bda990b0; }
.spine::before { top: 7px; }
.spine::after { bottom: 6px; }
.spine span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.empty-shelf { color: var(--muted); font-size: 11px; align-self: center; }
.shelf-decoration { position: absolute; right: 9px; bottom: 9px; }
[data-status=planned] .shelf-decoration { right: 18px; }
[data-status=unfinished] .shelf-decoration { right: 23px; }
.wood {
  position: absolute;
  inset: auto -2px 0;
  height: 9px;
  display: flex;
  align-items: end;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #bda990;
  border-radius: 2px;
  background: #e4d6bf;
  box-shadow: inset 0 1px #f4ebd9;
}
.wood img { flex: none; margin-bottom: 1px; }

.dock {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: calc(30px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1.22fr 1fr 1fr 1fr;
  width: min(calc(100% - 40px), 390px);
  min-height: 62px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--cream);
  box-shadow: 0 4px 9px #402e211c;
}
.dock button { display: grid; justify-items: center; align-content: center; gap: 2px; border: 0; background: transparent; padding: 0; font-size: clamp(7px, 2.2vw, 9px); min-width: 0; font-weight: 600; color: #504137; }
.dock button span { display: grid; place-items: center; width: 33px; height: 31px; border-radius: 11px; }
.dock [aria-current] span { background: var(--blush); }
.dock .dock-add span { background: var(--pink); }

#sort-dialog {
  width: min(100%, 430px);
  max-width: 100%;
  margin: auto auto 0;
  padding: 9px 24px calc(44px + env(safe-area-inset-bottom));
  border: none;
  border-radius: 24px 24px 0 0;
  background: var(--cream);
  color: var(--ink);
}
#sort-dialog::backdrop { background: #2b241f50; }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 20px; background: var(--line); border-radius: 5px; }
.sheet-close { position: absolute; top: 30px; right: 24px; border: 0; background: var(--paper); }
#sort-options { display: grid; gap: 7px; margin-top: 20px; }
#sort-options button { display: flex; align-items: center; justify-content: space-between; min-height: 46px; background: #f8f2e6; text-align: left; font-weight: 600; }
#sort-options button[aria-pressed=true] { background: #fff4bd; border-color: #e5c86c; font-weight: 700; }
#sort-options span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #bda990; border-radius: 50%; background: var(--cream); margin-right: 8px; }
#sort-options [aria-pressed=true] span { background: var(--yellow); }

#add-screen h1 { font-size: clamp(31px, 9.4vw, 37px); }
#add-screen .screen-head { margin-bottom: 26px; }
#catalog { margin-top: 24px; }
.catalog-search, .select-shell { display: flex; align-items: center; gap: 8px; padding-inline: 13px; background: var(--cream); border: 1px solid var(--line); border-radius: 13px; }
.catalog-search input, .select-shell select { background: transparent; border: 0; padding-inline: 0; min-height: 46px; }
.select-shell select { appearance: none; }
.catalog-search button { min-height: 32px; padding: 4px 8px; }
#catalog-results:not(:empty) { margin-top: 12px; }
#catalog-results section, #shelf-manager, .shelf-edit, .picker, .card-menu {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin: 12px 0;
}
#catalog-results article { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 9px 0; }
#catalog-results article button { margin-left: auto; }
#add { margin-top: 18px; }
#edition-preview h2 { font-size: 23px; margin-bottom: 9px; }
.chosen-edition { display: flex; align-items: center; gap: 13px; padding: 12px; background: var(--cream); border: 1px solid #bda990; border-radius: 15px; margin-bottom: 16px; }
.chosen-check { flex: none; margin-left: auto; background: var(--yellow); border: 0; }
.primary { justify-content: center; width: 100%; min-height: 48px; background: var(--pink); border-color: #ed91b3; border-radius: 25px; font-weight: 600; margin-top: 6px; }
.source { display: inline-block; margin-top: 8px; }
.cover { width: 55px; height: 82px; object-fit: contain; border-radius: 4px; }
.status-field { margin-top: 18px; }
#custom-shelves { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.shelf-edit { display: flex; flex-wrap: wrap; gap: 6px; }
#shelf-detail-screen { --shelf-inset: 24px; }
#shelf-detail-screen .screen-head { margin-bottom: 30px; }
#shelf-detail-screen .screen-head .pill { min-height: 38px; font-weight: 700; }
.shelf-detail-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.shelf-detail-label i { width: 11px; height: 11px; border: 1px solid #a98779; border-radius: 4px; background: var(--status); }
#shelf-detail-title { font-size: clamp(28px, 9.8vw, 39px); }
#shelf-detail-count { margin-top: 8px; }
.shelf-closeup {
  position: relative;
  margin: 26px calc(-1 * var(--shelf-inset)) 0;
  border-top: 10px solid #d6bea0;
  border-bottom: 19px solid #d6bea0;
  background: linear-gradient(#d7c7ae, #f0e2c7 70%, #e6d2ae);
  box-shadow: inset 0 1px #ad9472, inset 0 -1px #b49c79;
}
.shelf-closeup::after {
  content: "";
  position: absolute;
  inset: auto 0 -18px;
  height: 16px;
  pointer-events: none;
  background: url("/design-assets/wood.svg") left 6px repeat-x,
    linear-gradient(#ebd7b3, #ddc39b 48%, #c2a681 52%, #ddc39b 60%, #d6bea0);
}
#shelf-book-grid {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-height: clamp(290px, 101vw, 394px);
  padding: 25px 22px 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #b99d79 transparent;
  scroll-padding-inline: 22px;
}
#shelf-book-grid:focus-visible { outline: 2px solid #9b4568; outline-offset: -2px; }
.shelf-book {
  --spine-width: 64px;
  --spine-height: 325px;
  --jacket-tone: #986880;
  --jacket-shadow: #57414d;
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 0 var(--spine-width);
  flex-direction: column;
  align-items: stretch;
  width: var(--spine-width);
  height: min(var(--spine-height), 80vw);
  min-height: 200px;
  border: 1px solid #5b4b45;
  border-radius: 6px 7px 5px 4px;
  padding: 0;
  background: var(--status);
  box-shadow: 2px 2px 5px #442c2752;
  overflow: hidden;
}
.shelf-book:nth-child(6n+2) { --spine-width: 52px; --spine-height: 306px; --jacket-tone: #819475; --jacket-shadow: #38483f; }
.shelf-book:nth-child(6n+3) { --spine-width: 36px; --spine-height: 264px; --jacket-tone: #689389; --jacket-shadow: #305851; }
.shelf-book:nth-child(6n+4) { --spine-width: 65px; --spine-height: 320px; --jacket-tone: #5e5169; --jacket-shadow: #3a3140; }
.shelf-book:nth-child(6n+5) { --spine-width: 49px; --spine-height: 288px; --jacket-tone: #bd8b77; --jacket-shadow: #694c46; }
.shelf-book:nth-child(6n+6) { --spine-width: 37px; --spine-height: 273px; --jacket-tone: #a99b90; --jacket-shadow: #68554d; }
.shelf-book::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(90deg, #281e2425, #fff4 9%, transparent 20% 81%, #3a28243d 85%, #ffedd477 89%, #47342a4f 95%, #fff2);
}
.shelf-spine-author, .shelf-spine-number { position: relative; display: grid; place-items: center; flex: 0 0 22%; padding: 4px 5px; overflow: hidden; overflow-wrap: anywhere; text-align: center; font-size: 8px; font-weight: 700; color: #504137; }
.shelf-spine-author { background: color-mix(in srgb, var(--status) 18%, #fffaf1); line-height: 1.13; }
.shelf-spine-number { flex-basis: 15%; font-size: 9px; }
.shelf-spine-author::before, .shelf-spine-author::after, .shelf-spine-number::after {
  content: "";
  position: absolute;
  inset: 8px 5px auto;
  height: 1px;
  background: #88665955;
}
.shelf-spine-author::after, .shelf-spine-number::after { inset: auto 5px 7px; }
.shelf-jacket {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 27%, #f1ce9b 0 16%, transparent 17%),
    linear-gradient(154deg, transparent 48%, var(--jacket-shadow) 49%),
    var(--jacket-tone);
}
.shelf-jacket > img:not(.cover) { position: absolute; bottom: 12px; opacity: .6; }
.shelf-jacket .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: var(--jacket-tone); }
.shelf-spine-title {
  z-index: 1;
  max-height: calc(100% - 16px);
  overflow: hidden;
  padding: 4px 2px;
  border-radius: 4px;
  background: #fff7e9ef;
  color: var(--ink);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 13px/1.1 var(--serif);
}
.shelf-swipe-hint { display: flex; align-items: center; gap: 11px; margin-top: 30px; }
.shelf-swipe-hint > span { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); font-size: 22px; }
.shelf-swipe-hint p { margin-top: 3px; color: var(--muted); font-size: 10px; }
.shelf-grid-empty { align-self: center; width: 100%; text-align: center; color: var(--muted); }
#add-to-shelf { margin-top: 15px; }
@media (max-width: 350px) { #shelf-detail-screen { --shelf-inset: 15px; } }

body:has(#recommend-screen:not([hidden])) { overflow-x: clip; }
#recommend-screen { margin-inline: -7px; }
#recommend-screen h1 { font-size: clamp(31px, 9.5vw, 40px); }
#recommend-counter { min-width: 58px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 99px; background: #faf5e9; color: var(--muted); font-size: 10px; font-weight: 700; text-align: center; }
#recommend-counter:empty { visibility: hidden; }
#recommend-deck { margin-top: 25px; }
.recommend-stack { position: relative; isolation: isolate; margin-inline: 4px; }
.recommend-stack::before, .recommend-stack::after { content: ""; position: absolute; z-index: -1; inset: 3px 1px 1px; border: 1px solid var(--line); border-radius: 19px; }
.recommend-stack::before { background: #ead7bd; transform: rotate(-4deg); }
.recommend-stack::after { background: #efd5df; transform: rotate(4deg); }
.recommend-card {
  position: relative;
  padding: 8px 8px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 0 5px 14px #402e3321;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.recommend-card.dragging { cursor: grabbing; z-index: 1; }
.recommend-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1.22;
  max-height: 265px;
  border-radius: 13px;
  overflow: hidden;
  background: radial-gradient(ellipse at 73% 34%, #c9a690 0, #8f6478 34%, #4d3c56 67%, #342b3c 100%);
  color: var(--cream);
}
.recommend-art::after { content: ""; position: absolute; inset: 7px; border: 1px solid #ffe9c766; border-radius: 8px; pointer-events: none; }
.recommend-art span { font: 23px/1.15 var(--serif); padding-inline: 24px; text-align: center; }
.recommend-art.has-loaded-cover span { visibility: hidden; }
.recommend-art .cover { position: absolute; inset: 9px 0; width: 100%; height: calc(100% - 18px); object-fit: contain; user-select: none; }
.recommend-card h2 { padding-inline: 8px; font-size: clamp(25px, 8vw, 34px); overflow-wrap: anywhere; }
.recommend-genre { margin: 12px 8px 5px; color: #865849; text-transform: uppercase; font-size: 9px; font-weight: 700; letter-spacing: .11em; }
.recommend-author { margin: 4px 8px 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.recommend-description { margin: 9px 8px 0; font-size: 12px; color: #504137; }
.recommend-credit { display: inline-block; margin: 9px 8px 0; color: var(--muted); font-size: 9px; }
.recommend-cue { position: absolute; top: 23px; left: 17px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--cream); color: var(--ink); font-weight: 700; pointer-events: none; }
.recommend-cue:empty { display: none; }
.recommend-cue[data-action=planned] { background: var(--pink); }
.recommend-cue[data-action=finished] { background: var(--yellow); }
.recommend-empty { margin: 12px 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--cream); }
.recommend-empty h2 { font-size: 25px; }
#recommend-actions { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; gap: 3px; }
#recommend-actions button { display: grid; justify-items: center; align-content: start; gap: 4px; border: 0; padding: 0 2px; background: transparent; font-size: 10px; font-weight: 700; text-align: center; }
#recommend-actions button span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; border: 1px solid var(--line); background: var(--cream); font-size: 23px; font-weight: 400; line-height: 1; }
#recommend-actions [data-action=planned] span { background: var(--pink); }
#recommend-actions [data-action=finished] span { background: var(--yellow); }
#recommend-status { margin-top: 9px; color: var(--muted); font-size: 11px; text-align: center; }

.book-hero { display: flex; align-items: center; gap: 20px; padding: 20px 15px 28px; background: var(--cream); border: 1px solid var(--line); border-radius: 17px; }
.book-jacket { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 6px; width: 109px; height: 158px; flex: 0 0 109px; overflow: hidden; border: 1px solid #504137; border-radius: 5px; background: var(--status); box-shadow: inset 0 0 0 4px #fff4, 0 3px 5px #402e2130; text-align: center; }
.book-jacket small { text-transform: uppercase; font-size: 7px; }
.book-jacket span { font: 17px/1.15 var(--serif); overflow-wrap: anywhere; min-width: 0; max-height: 70px; overflow: hidden; }
.book-jacket .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: var(--status); }
.book-info { min-width: 0; }
.book-info h1 { font-size: clamp(23px, 7.8vw, 30px); letter-spacing: 0; margin-top: 5px; }
.eyebrow { color: var(--muted); font-size: 9px; font-weight: 700; }
.status-chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid #d8cdbe; border-radius: 18px; margin: 12px 0 0; padding-left: 8px; background: var(--status); }
.status-chip select { appearance: none; background: transparent; border: 0; font-size: 11px; min-height: 30px; padding: 2px 9px 2px 0; }
.status-chip[data-status=finished] { background: var(--blush); border-color: #ebadca; }
.book-actions { justify-content: flex-start; flex-wrap: wrap; margin: 12px 0 18px; }
.book-actions .pill { min-height: 29px; }
.card-heading { margin-bottom: 11px; }
.card-entry-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0 0 20px; }
.card-entry-actions .pill { justify-content: center; padding-inline: 5px; gap: 5px; }
.card-entry-actions .note-action { background: var(--pink); }
.card-entry-actions .diary-action { grid-column: 1 / -1; }
.note-section-title { margin-top: 18px; margin-bottom: 10px; }
.note-card h3 { border-left: 3px solid var(--pink); padding-left: 8px; margin-bottom: 8px; }
.note-card footer { color: var(--muted); font-size: 11px; margin-top: 10px; }
#quotes-screen h1 { font-size: clamp(30px, 8.8vw, 38px); }
.entry-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 16px 0 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #faf5e9; }
.entry-filters label { margin: 0; min-width: 0; font-size: 11px; }
.entry-filters select, .entry-filters input { max-width: 100%; padding-inline: 7px; }
#entry-count { margin-bottom: 10px; }
.entry-kind { margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.annotation { background: var(--cream); border: 1px solid var(--line); border-radius: 15px; padding: 15px; margin: 0 0 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.quote-card p { font: 15px/1.15 var(--serif); }
.quote-card:has(footer) { min-height: 154px; display: flex; flex-direction: column; }
.quote-card footer { margin-top: auto; padding-top: 14px; color: var(--muted); font-size: 11px; }
.quote-mark { display: block; font: 700 30px/.7 var(--serif); color: #a34d6d; margin: 2px 0 6px; }
.quote-card button { margin-top: 12px; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.quote-actions button { min-height: 32px; margin: 0; font-size: 11px; }
.quote-comment { margin-top: 8px; color: var(--muted); font-size: 12px; }
.quote-photo {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0;
  margin: 0 0 8px;
  border: 0;
  text-align: left;
  font-weight: 700;
}
.quote-thumb { width: 66px; height: 80px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #f6e9d0; }
.quote-dialog { width: min(calc(100% - 24px), 406px); max-height: 90dvh; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); color: var(--ink); }
.quote-dialog::backdrop, #photo-viewer::backdrop { background: #2b241f90; }
.quote-dialog textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--cream); color: var(--ink); font: inherit; resize: vertical; }
#quote-error, .dialog-error { color: #9b4568; }
#book-delete-summary { margin: 12px 0; }
button.danger { color: #8d294f; border-color: #e7bbca; }
#quote-preview { max-width: 100%; max-height: 160px; object-fit: contain; }
#photo-viewer { width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #25201c; color: var(--cream); overflow: hidden; }
#photo-viewer header { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; }
#photo-viewer header button { color: var(--ink); }
#photo-viewer label { display: flex; align-items: center; margin: 0; }
#photo-zoom { width: min(35vw, 180px); padding: 0; accent-color: var(--pink); }
#photo-scroll { height: calc(100% - 64px); overflow: auto; }
#photo-full { max-width: none; height: auto; }
.checkbox-line { display: flex; align-items: center; }
.card-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.empty-panel { color: var(--muted); padding: 12px 0; }
#profile-name { margin: 12px 0; }

@media (max-width: 350px) {
  main { padding-inline: 15px; }
  .tabs button, #sort-toggle { padding-inline: 7px; }
  .book-hero { gap: 12px; }
}