/* =============================================================
   Flash — RSVP speed reader
   Palette: strict #000 / #fff / #e04a4a.
   Pivot stability is *structural* via a flat CSS Grid:
     `grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr)`
   with three direct child spans placed in columns 1, 2, 3 of
   row 2. The auto column is sized to the pivot glyph width, so
   the pivot character is mathematically pinned to the center
   regardless of the surrounding word's length.
   ============================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #000000;
  --fg:        #ffffff;
  --pivot:     #e04a4a;
  --line:      rgba(255,255,255,0.10);
  --line-mid:  rgba(255,255,255,0.18);
  --muted:     rgba(255,255,255,0.55);
  --muted-dk:  rgba(255,255,255,0.30);
  --card-bg:   rgba(255,255,255,0.03);
  --card-hov:  rgba(255,255,255,0.07);
  --hover-bg:  rgba(255,255,255,0.06);
  --track-bg:  rgba(255,255,255,0.10);
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

html, body {
  background: #000;
  color: #fff;
  height: 100%;
  width: 100%;
  color-scheme: dark;
}
html { overscroll-behavior: none; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
  position: fixed;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overscroll-behavior: none;
}

button, input, textarea {
  font-family: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

button {
  background: transparent;
  color: #fff;
  border: 1px solid var(--line-mid);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
button:hover { border-color: rgba(255,255,255,0.45); }
button:active { transform: scale(0.97); background: var(--hover-bg); }
button:disabled { opacity: 0.4; pointer-events: none; }

input[type="text"], textarea {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-mid);
  border-radius: 6px;
  padding: 10px;
  font-size: 14px;
  color: #fff;
  outline: none;
  transition: border-color 0.15s;
}
input[type="text"]:focus, textarea:focus { border-color: rgba(255,255,255,0.5); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--line-mid); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

.hidden { display: none !important; }

/* =============================================================
   Views
   ============================================================= */
.view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  background: #000;
  z-index: 1;
}
#reader-view { z-index: 2; }
#text-view   { z-index: 3; }

/* =============================================================
   Top bar
   ============================================================= */
/* 3-column grid layout: back/left, truncated title center, controls right.
   This fixes the previous overlap where 4 children in flex layout caused
   .top-title and view-toggle-btn to stack on top of each other. */
.top-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 10px 14px;
  flex-shrink: 0;
  gap: 8px;
  background: #000;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.top-bar-left,
.top-bar-right,
.top-bar-center { display: flex; align-items: center; min-width: 0; }
.top-bar-center { justify-content: center; overflow: hidden; }
.top-bar-right   { justify-content: flex-end; gap: 4px; }
.top-bar-spacer  { display: none; }
.app-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  display: block;
  max-width: 100%;
}
.icon-btn {
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
}
.icon-btn:active { background: var(--hover-bg); }
/* Legacy class kept for any stragglers — no-op under the new grid. */
.top-title { display: contents; }
.reader-title {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center;
  max-width: 100%;
}
.top-stats-right {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   Library view
   ============================================================= */
.library-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  align-content: start;
}
@media (min-width: 720px) { .library-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .library-grid { grid-template-columns: repeat(4, 1fr); } }

.book-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 14px 12px;
  cursor: pointer;
  position: relative;
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
}
.book-card:hover { border-color: rgba(255,255,255,0.4); background: var(--card-hov); transform: translateY(-2px); }
.book-card:active { transform: translateY(0) scale(0.99); }
.book-card-title {
  font-size: 15px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word;
}
.book-card-progress-track {
  height: 5px; background: var(--track-bg);
  border-radius: 3px; overflow: hidden;
}
.book-card-progress-bar {
  height: 100%; background: var(--pivot);
  border-radius: 3px; width: 0%;
  transition: width 0.4s ease-out;
}
.book-card-meta {
  font-size: 11px; color: var(--muted);
  display: flex; justify-content: space-between;
  font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: 0.04em;
}
.book-card-delete {
  position: absolute; top: 6px; right: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: 28px; height: 28px;
  padding: 0; font-size: 18px; line-height: 1;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.book-card-delete:hover { color: var(--pivot); border-color: var(--pivot); opacity: 1; }
.book-card:hover .book-card-delete { opacity: 1; }

.book-card-confirm {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.94);
  border: 1px solid var(--line-mid);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; z-index: 2;
}
.book-card-confirm-text { font-size: 14px; color: rgba(255,255,255,0.85); }
.delete-btns { display: flex; gap: 8px; }
.delete-yes {
  background: var(--pivot) !important;
  border-color: var(--pivot) !important;
  color: #fff !important;
}
.delete-yes:active { background: #b73a3a !important; }

.library-empty {
  text-align: center; margin: auto;
  padding: 60px 24px;
  color: var(--muted-dk);
  font-size: 14px; line-height: 1.6;
}
.library-empty b { color: #fff; }

.paste-area { padding: 0 16px 16px; border-top: 1px solid var(--line); }
.paste-area summary {
  cursor: pointer; padding: 14px 0;
  color: var(--muted); font-size: 13px;
  list-style: none; user-select: none;
}
.paste-area summary::-webkit-details-marker { display: none; }
.paste-area summary::before { content: '▸ '; margin-right: 4px; }
.paste-area[open] summary::before { content: '▾ '; }
.paste-area[open] summary { padding-bottom: 10px; }
#paste-textarea {
  width: 100%; min-height: 100px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-mid);
  border-radius: 6px; padding: 12px;
  font-size: 14px; color: #fff;
  resize: vertical; outline: none;
}
.paste-actions { display: flex; gap: 8px; margin-top: 10px; }
.paste-actions input { flex: 1; }

.add-panel { border-top: 1px solid var(--line); background: rgba(255,255,255,0.02); padding: 16px; }
.add-panel-row { margin-bottom: 12px; }
.file-label {
  display: block; cursor: pointer;
  border: 2px dashed var(--line-mid);
  border-radius: 10px; padding: 28px 16px;
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}
.file-label:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.03); }
.file-label:active { background: rgba(255,255,255,0.05); }
.file-label input[type=file] {
  position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0;
}
.file-label-icon { display: block; font-size: 28px; margin-bottom: 6px; color: var(--pivot); line-height: 1; }
.file-label-text { font-size: 14px; color: var(--muted); }
.file-label-text code {
  background: rgba(255,255,255,0.06);
  padding: 2px 6px; border-radius: 3px;
  color: #fff; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}
.add-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hint { font-size: 12px; color: var(--muted-dk); }

/* =============================================================
   Reader view — RSVP (flat CSS Grid for pivot pinning)

   Layout:
     .word-anchor is itself the 1fr | auto | 1fr grid.
     Three direct child spans are placed in row 2, columns 1, 2, 3.
     The auto column is sized to the pivot glyph width (1ch in
     monospace). Columns 1 and 3 are `minmax(0, 1fr)` and split
     remaining space equally — so the auto column sits at exact W/2.

     Each span has `min-width: 0` to override the default `min-width:
     auto` of grid items, which would otherwise expand the 1fr
     columns to fit long content and push the pivot column off-center.

     .before uses `direction: rtl` so that when its text overflows
     column 1, the LETTERS CLOSEST TO THE PIVOT remain visible and
     the EARLIER letters clip off the left edge (instead of LTR
     clipping the wrong end).

     .pivot uses `text-align: center` so the visible glyph is centered
     in its 1ch advance cell regardless of glyph width (narrow
     glyphs like "I" would otherwise sit at the left edge of the cell).
   ============================================================= */
.hold-area {
  flex: 1;
  position: relative;
  cursor: pointer;
  background: #000;
  min-height: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* Pivot stability layout. The KEY trick is `justify-self: end` on .before
   and `justify-self: start` on .after — without those, the spans stretch
   to fill the full `1fr` track (the default `justify-self: stretch`) and
   the visible letters get pushed to the outer edges of the columns,
   tearing the word apart with big empty gaps between them. With justify-
   self, each span only takes its content width and hugs its anchored
   side (pivot side), so letters sit flush against the pivot on both
   sides, forming one continuous unbroken word.

   Other invariants enforced here (any violation visibly splits the word):
   - gap: 0 between grid cells (no horizontal gap between columns)
   - no padding, margin, letter-spacing on the spans
   - white-space: pre on container AND spans (so trailing/leading spaces
     don't collapse and break the visual continuity)
   - font-size cap: 56px desktop, 40px mobile (set via --reader-fs-base)
   - long-word auto-scaling: JS dynamically overrides --reader-fs to
     scale DOWN a word that would otherwise overflow the viewport */
.word-anchor {
  position: relative;
  flex: 1;
  width: 100%;
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  justify-items: stretch;
  row-gap: 14px;
  column-gap: 0;
  gap: 0;
  padding: 0;
  white-space: pre;
  --reader-fs-base: 56px;
}
@media (max-width: 480px) {
  .word-anchor { --reader-fs-base: 40px; }
}

/* font-size is set ONLY on the three text spans (NOT on .word-anchor
   itself) so the .focus-tick rows (which have explicit fixed heights in
   the same grid) are NOT affected by long-word auto-scaling. The CSS
   variable --reader-fs is set by the JS fit function on the parent;
   falls back to --reader-fs-base from the breakpoint media query. */
.word-anchor > .before,
.word-anchor > .pivot,
.word-anchor > .after {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  letter-spacing: 0;
  white-space: pre;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: var(--reader-fs, var(--reader-fs-base));
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.focus-tick {
  grid-column: 2;
  grid-row: 1 / span 1;
  justify-self: center;
  align-self: center;
  width: 2px;
  height: 28px;
  background: #fff;
  border-radius: 1px;
  flex-shrink: 0;
  pointer-events: none;
}
.focus-tick.top    { grid-row: 1; }
.focus-tick.bottom { grid-row: 3; }

/* Row 2:
   The user spec says column 1 holds pre-pivot text "text-align: right"
   and column 3 holds post-pivot text "text-align: left". With LTR
   text-align + overflow:hidden, content that exceeds the 1fr column
   extends OUTWARD from its anchored side:
     - .before text-align: right  → anchored to right edge of column 1
       (pivot side) → overflow grows LEFT off the column → letters
       closest to the pivot stay visible.
     - .after  text-align: left   → anchored to left edge of column 3
       (pivot side) → overflow grows RIGHT off the column → letters
       closest to the pivot stay visible.
   This matches the spec literally and avoids any bidi-script reordering
   risk (compared with the previous `direction: rtl` approach). */
/* Row 2 — pivot-glyph-aligned text on either side. The combination of
   justify-self + text-align makes the word render as one continuous
   unbroken word centered on the pivot column:
     .before: justify-self:end → span hugs RIGHT edge of column 1 (pivot side)
              text-align:right → content within the span aligns to its right edge
     .after:  justify-self:start → span hugs LEFT edge of column 3 (pivot side)
              text-align:left → content within the span aligns to its left edge
   Combined with no padding/gap/letter-spacing, the letters sit flush
   against the pivot character on both sides. */
.before {
  grid-row: 2;
  grid-column: 1;
  justify-self: end;
  direction: ltr;
  text-align: right;
  overflow: hidden;
  color: #fff;
}
.pivot {
  grid-row: 2;
  grid-column: 2;
  justify-self: center;
  direction: ltr;
  text-align: center;     /* center the visible glyph in its 1ch advance cell */
  overflow: hidden;
  color: var(--pivot);
}
.after {
  grid-row: 2;
  grid-column: 3;
  justify-self: start;
  direction: ltr;
  text-align: left;
  overflow: hidden;
  color: #fff;
}

.hold-hint {
  grid-row: 4;
  grid-column: 1 / 4;
  position: relative;
  text-align: center;
  font-size: 13px;
  color: var(--muted-dk);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  animation: hint-pulse 2.2s ease-in-out infinite;
  margin-top: 4px;
}
.hold-hint.hidden { display: none; }
@keyframes hint-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

.bottom-bar {
  background: rgba(0,0,0,0.96);
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  padding-bottom: calc(12px + var(--safe-bottom));
  flex-shrink: 0;
}
.progress-row { margin-bottom: 6px; }

.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  background: var(--track-bg);
  border-radius: 3px;
  outline: none; cursor: pointer; margin: 0;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--pivot); cursor: pointer; border: none;
  transition: transform 0.1s;
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--pivot); cursor: pointer; border: none;
}
.slider::-webkit-slider-runnable-track {
  background: transparent; height: 6px; border-radius: 3px;
}

.controls-row {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 10px; margin-top: 6px;
}
.ctrl-btn { font-size: 13px; padding: 7px 14px; white-space: nowrap; border-radius: 7px; }
.chapter-btn { min-width: 78px; }
.chapter-btn-spacer { min-width: 78px; height: 1px; }
.control-middle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dot { color: rgba(255,255,255,0.25); }

.wpm-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.wpm-label { font-size: 11px; color: var(--muted); min-width: 30px; text-transform: uppercase; letter-spacing: 0.06em; }
.wpm-value { font-size: 13px; color: #fff; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.chapter-list {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #000;
  border-top: 1px solid var(--line-mid);
  max-height: 65vh;
  overflow-y: auto;
  z-index: 10;
  padding-bottom: var(--safe-bottom);
  overscroll-behavior: contain;
}
.chapter-list-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-size: 14px;
  transition: background 0.1s;
}
.chapter-list-item:hover,
.chapter-list-item:active { background: var(--hover-bg); }
.chapter-list-item.current { color: var(--pivot); }
.chapter-list-item-meta {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase; letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* =============================================================
   Text view (scrub mode)
   ============================================================= */
#text-back-btn { display: none; }
.text-view #text-back-btn { display: inline-block; }
.text-view #text-close-btn { display: inline-block; }

.text-scroll {
  flex: 1;
  position: relative;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.text-content {
  position: relative;
  max-width: 65ch;
  margin: 0 auto;
  padding: 32px 20px 60px;
  font-family: ui-serif, "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 18px; line-height: 1.7; color: #fff;
}
.text-paragraph {
  position: absolute; left: 0; right: 0;
  margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
}
.text-heading {
  position: absolute; left: 0; right: 0;
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  cursor: pointer;
  transition: color 0.15s;
}
.text-heading:hover { color: var(--pivot); }
.text-heading::before { content: '— '; color: var(--pivot); }
.text-word {
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
  padding: 0 2px;
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s, color 0.1s;
}
.text-word:hover { background: rgba(255,255,255,0.10); }
.text-word.current {
  background: var(--pivot);
  color: #000;
  font-weight: 600;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 480px) {
  .focus-tick { height: 22px; }
  .hold-hint { font-size: 12px; }
  .library-grid { padding: 14px; gap: 12px; }
  .book-card { padding: 12px; min-height: 110px; }
  .book-card-title { font-size: 14px; }
  .text-content { padding: 24px 16px 48px; font-size: 17px; line-height: 1.65; }
}
@media (min-width: 1100px) {
  .focus-tick { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .hold-hint { animation: none; opacity: 0.6; }
  * { transition-duration: 0s !important; }
}

/* =============================================================
   Sync layer — UI additions
   ============================================================= */
.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  margin: 0 6px 0 0;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.2s;
}
.bookmark-btn.saved {
  color: var(--pivot) !important;
}
.conflict-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(224, 74, 74, 0.18);
  border-bottom: 1px solid var(--pivot);
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
}
.conflict-banner.hidden { display: none !important; }
.conflict-msg { flex: 0 1 auto; }
.conflict-banner .ctrl-btn { padding: 6px 14px; font-size: 12px; }
.conflict-banner .conflict-yes {
  background: var(--pivot) !important;
  border-color: var(--pivot) !important;
  color: #fff !important;
}

.view-setup #library-view,
.view-setup #reader-view,
.view-setup #text-view { display: none !important; }

.setup-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 100;
  padding: 24px;
}
.setup-card {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.setup-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0;
}
.setup-body {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.55;
}
.setup-body code {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #fff;
}
.setup-key-input {
  width: 100%;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  font-family: ui-monospace, Menlo, Consolas, monospace !important;
  font-size: 14px !important;
  color: #fff !important;
  outline: none !important;
}
.setup-key-input:focus {
  border-color: var(--pivot) !important;
}
.setup-err {
  font-size: 12px;
  color: var(--pivot);
  min-height: 16px;
}
.setup-save-btn {
  background: var(--pivot) !important;
  border: 1px solid var(--pivot) !important;
  color: #fff !important;
  padding: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}
.setup-save-btn:active { background: #b73a3a !important; }

/* download indicator: overlay on card showing remote-only + needs download */
.book-card-remote {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pivot);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.book-card-remote::before { content: '\u2193 '; }