:root {
  color-scheme: light;
  --bg: #f5eadb;
  --bg-2: #fff8ee;
  --paper: #fffaf2;
  --paper-deep: #ead8c1;
  --ink: #2d211c;
  --muted: #76675e;
  --line: #d9c3aa;
  --rose: #b66a78;
  --rose-dark: #7e3447;
  --wine: #6f2f45;
  --sage: #7e9275;
  --gold: #c79546;
  --copper: #a96943;
  --blue: #5d7f94;
  --shadow: 0 22px 55px rgba(73, 49, 31, 0.14);
  --small-shadow: 0 10px 24px rgba(73, 49, 31, 0.12);
  --radius: 18px;
  --font-soft-serif: "Lucida Bright", "Lucida Fax", Georgia, serif;
  --font-soft-ui: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}

.night {
  color-scheme: dark;
  --bg: #17110e;
  --bg-2: #261b16;
  --paper: #2e231d;
  --paper-deep: #453126;
  --ink: #f7eadb;
  --muted: #c9b5a4;
  --line: #6d5140;
  --rose: #d58b99;
  --rose-dark: #e1a5b1;
  --wine: #e7b4bf;
  --sage: #a7bb9c;
  --gold: #e0b65f;
  --copper: #d09060;
  --blue: #8fb3c8;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  --small-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(182, 106, 120, 0.22), transparent 28%),
    radial-gradient(circle at 92% 2%, rgba(199, 149, 70, 0.18), transparent 24%),
    linear-gradient(135deg, var(--bg), var(--bg-2));
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(0deg, var(--line) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, #000, transparent 80%);
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  top: 0;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px;
  border-right: 1px solid color-mix(in srgb, var(--line), transparent 18%);
  background: color-mix(in srgb, var(--paper), transparent 10%);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.profile-chip {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 999px 18px 18px 999px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--paper), var(--paper-deep));
  box-shadow: var(--small-shadow);
  text-align: left;
}

.avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid color-mix(in srgb, var(--gold), #fff 30%);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 34% 28%, #f4cad1, transparent 24%),
    linear-gradient(135deg, var(--wine), var(--copper));
  font-family: Georgia, serif;
  font-size: 1.35rem;
  font-weight: 800;
}

.profile-chip small,
.meta,
.overline,
.hint {
  color: var(--muted);
}

.nav {
  display: grid;
  gap: 9px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.nav button,
.theme-toggle,
.soft-btn,
.primary-btn,
.icon-btn,
.stamp-btn {
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--paper);
}

.nav button {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: left;
}

.nav button.active {
  border-color: color-mix(in srgb, var(--rose), var(--line) 25%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rose), var(--paper) 78%), var(--paper));
  box-shadow: var(--small-shadow);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  min-height: 42px;
  border-radius: 999px;
}

.stage {
  position: relative;
  min-width: 0;
  padding: 22px;
}

.app.genre-tint .stage {
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--active-genre), transparent 82%), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--active-genre-soft), #fff 28%), color-mix(in srgb, var(--active-genre-soft), var(--paper) 28%));
}

.topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 1240px;
  margin: 0 auto 18px;
}

.overline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.overline-back {
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
}

h1,
.display,
.script,
.quote-text {
  font-family: Georgia, "Times New Roman", serif;
}

h1 {
  margin-top: 3px;
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  letter-spacing: -0.02em;
}

h1:empty {
  display: none;
}

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

.soft-btn,
.primary-btn,
.icon-btn,
.stamp-btn {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(73, 49, 31, 0.08);
}

.primary-btn {
  color: #fff;
  border-color: var(--wine);
  background: linear-gradient(135deg, var(--wine), var(--rose));
  font-family: var(--font-soft-ui);
  font-weight: 600;
}

.icon-btn {
  width: 42px;
  padding: 0;
}

#view {
  max-width: 1240px;
  margin: 0 auto;
}

.grid-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 16px;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--paper), transparent 4%), color-mix(in srgb, var(--paper-deep), var(--paper) 68%));
  box-shadow: var(--shadow);
}

.pad {
  padding: 18px;
}

.dashboard-top {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 1.15fr);
  gap: 16px;
}

.rank-card {
  position: relative;
  overflow: hidden;
  padding: 18px;
  min-height: 218px;
}

.rank-card::after {
  content: "✦";
  position: absolute;
  right: 18px;
  bottom: -18px;
  color: color-mix(in srgb, var(--gold), transparent 44%);
  font-size: 7rem;
}

.rank-number {
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 0.9;
}

.progress {
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper), #000 5%);
}

.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rose), var(--gold));
}

.current-book {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 16px;
}

.cover {
  position: relative;
  overflow: hidden;
  min-height: 192px;
  border-radius: 10px 6px 6px 10px;
  border: 1px solid color-mix(in srgb, var(--line), #fff 20%);
  background: var(--cover) center/cover no-repeat;
  box-shadow: 12px 12px 0 color-mix(in srgb, var(--ink), transparent 88%);
}

.cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 16px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-head h2,
.section-head h3 {
  font-family: Georgia, serif;
  font-size: 1.35rem;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stat {
  position: relative;
  overflow: hidden;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.stat strong {
  display: block;
  margin-top: 5px;
  font-family: Georgia, serif;
  font-size: 1.6rem;
}

.habit {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 6px;
}

.day-dot {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
}

.day-dot.read {
  background: linear-gradient(135deg, var(--sage), var(--gold));
}

.book-row,
.series-row,
.badge-row,
.quote-list,
.genre-grid {
  display: grid;
  gap: 12px;
}

.book-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.book-card {
  position: relative;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper), transparent 3%);
  box-shadow: var(--small-shadow);
}

.book-card button {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.book-card .cover {
  min-height: 132px;
  box-shadow: 0 12px 20px rgba(44, 29, 20, 0.12);
}

.book-title {
  display: block;
  font-family: var(--font-soft-serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.stars {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--gold), var(--line) 40%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--gold), #fff 8%);
  background: linear-gradient(135deg, rgba(255, 244, 205, .72), rgba(216, 184, 116, .22));
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.star-btn {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  color: color-mix(in srgb, var(--line), var(--ink) 30%);
  background: transparent;
  font-size: clamp(.86rem, 1.45vw, 1.08rem);
  line-height: 1;
}

.star-btn.on {
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(90, 57, 20, 0.16);
}

.tag-row,
.filters-body,
.tabs,
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag,
.paper-tag,
.seal,
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1;
}

.paper-tag,
.tag {
  border-radius: 6px 13px 6px 13px;
  background: color-mix(in srgb, var(--paper), var(--paper-deep) 32%);
}

.stamp {
  border-radius: 4px;
  color: var(--wine);
  border-color: color-mix(in srgb, var(--rose), var(--line) 36%);
  background: transparent;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-1.5deg);
}

.seal {
  border-radius: 999px;
  color: #fff;
  border-color: var(--wine);
  background: radial-gradient(circle at 30% 20%, #f2b5be, var(--wine));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
}

.bookmark {
  position: absolute;
  top: -1px;
  right: 16px;
  width: 28px;
  height: 44px;
  background: linear-gradient(180deg, var(--rose), var(--wine));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.filters-panel {
  margin-bottom: 12px;
}

.filters-panel.pad {
  padding: 10px 12px;
}

.filters-panel:not(.open).pad {
  padding: 9px 12px;
}

.filters-panel .section-head h2 {
  font-size: .94rem;
}

.filters-panel .section-head {
  align-items: center;
  margin-bottom: 0;
}

.filters-panel .search-strip {
  min-height: 32px;
}

.filters-panel .filter-cluster {
  padding: 7px 9px;
  border-radius: 13px;
}

.filters-panel .filter-cluster summary {
  font-size: .76rem;
}

.filters-body {
  display: none;
  padding-top: 10px;
}

.filters-panel.open .filters-body {
  display: flex;
}

.pill {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--paper);
}

.pill.active {
  color: #fff;
  border-color: var(--wine);
  background: linear-gradient(135deg, var(--wine), var(--rose));
}

.range-chip {
  display: grid;
  gap: 6px;
  min-width: 170px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.shelf {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: end;
  overflow: visible;
  padding: 8px 8px 26px;
}

.shelf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 18px;
  border-radius: 99px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--copper), #fff 22%), color-mix(in srgb, var(--copper), #000 10%));
  box-shadow: 0 12px 24px rgba(78, 49, 28, 0.2);
}

.shelf-book {
  position: relative;
  z-index: 1;
  width: 94px;
  min-width: 94px;
  height: 148px;
  border: 1px solid color-mix(in srgb, var(--line), #fff 20%);
  border-radius: 8px 4px 4px 8px;
  background: var(--cover) center/cover no-repeat;
  box-shadow: 9px 8px 0 rgba(44, 29, 20, 0.1);
}

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

.library-grid.shelves {
  display: block;
}

.monthly-shelves {
  display: grid;
  gap: 18px;
}

.monthly-shelf-group {
  display: grid;
  gap: 8px;
}

.monthly-shelf-group > h3 {
  width: fit-content;
  margin: 0 0 2px 10px;
  padding: 6px 18px;
  border: 1px solid color-mix(in srgb, var(--line), var(--rose) 20%);
  border-radius: 999px 999px 999px 10px;
  background: color-mix(in srgb, var(--paper), var(--rose-soft) 28%);
  color: var(--ink);
  font-family: var(--font-soft-ui);
  font-size: .96rem;
  font-weight: 700;
  text-transform: lowercase;
  box-shadow: 0 8px 18px rgba(77, 48, 35, .08);
}

.view-switch {
  display: flex;
  gap: 8px;
}

.detail {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
}

.detail-cover {
  min-height: 430px;
}

.detail-main {
  display: grid;
  gap: 14px;
}

.detail-title {
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 0.95;
}

.editable,
.edit-box,
.review-box {
  border: 1px dashed color-mix(in srgb, var(--line), var(--rose) 18%);
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper), transparent 8%);
}

.editable {
  padding: 3px 7px;
}

.edit-box,
.review-box {
  width: 100%;
  min-height: 42px;
  padding: 11px 12px;
  color: var(--ink);
}

.review-box {
  min-height: 180px;
  line-height: 1.58;
}

.book-detail-page {
  display: grid;
  gap: 16px;
  padding: 12px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--active-genre-soft, var(--paper)), #fff 38%);
}

.book-hero {
  display: grid;
  grid-template-columns: 220px minmax(0, 1.18fr) minmax(300px, .78fr);
  gap: 16px;
  align-items: stretch;
  border-color: color-mix(in srgb, var(--genre, var(--rose)), var(--line) 54%);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--genre, var(--rose)), #fff 60%), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--genre-soft, var(--paper)), #fff 5%), color-mix(in srgb, var(--genre-soft, var(--paper)), var(--genre, var(--rose)) 16%) 58%, color-mix(in srgb, var(--genre-soft, var(--paper)), #fff 10%));
  box-shadow: 0 22px 50px color-mix(in srgb, var(--genre, var(--rose)), transparent 82%);
}

.book-cover-stack {
  position: relative;
  display: grid;
  gap: 32px;
  align-content: start;
}

.book-cover-stack .stamp-btn {
  margin-top: 24px;
}

.book-cover-stack .seal,
.book-cover-stack .stamp-btn {
  width: 100%;
}

.reading-history-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--genre, var(--line)), var(--line) 42%);
  border-radius: 18px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper), var(--genre-soft, #fff) 34%);
  font-size: .9rem;
}

.reading-history-card .label {
  color: color-mix(in srgb, var(--genre, var(--wine)), #000 12%);
}

.reading-history-card .latest {
  font-weight: 800;
  color: var(--ink);
}

.reread-action {
  min-height: 42px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--genre, var(--wine)), #fff 28%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--genre, var(--wine)), #25140f 18%);
  background: color-mix(in srgb, var(--genre-soft, var(--cream)), #fff 52%);
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(65, 37, 24, .1);
  cursor: pointer;
}

.reread-action:hover {
  transform: translateY(-1px);
}

.reread-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.reread-form label {
  display: grid;
  gap: 8px;
  font-weight: 800;
  color: var(--muted);
}

.reread-form label.wide {
  grid-column: 1 / -1;
}

.reread-form input,
.reread-form select,
.reread-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 38%);
  font: inherit;
}

.reread-form textarea {
  min-height: 110px;
  resize: vertical;
}

.book-hero .detail-cover {
  min-height: 330px;
}

.book-detail-page .book-hero.panel {
  background:
    radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--genre, var(--rose)), #fff 62%), transparent 30%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--genre-soft, var(--paper)), var(--genre, var(--rose)) 18%) 0%,
      color-mix(in srgb, var(--genre-soft, var(--paper)), #fff 5%) 48%,
      color-mix(in srgb, var(--genre-soft, var(--paper)), var(--genre, var(--rose)) 14%) 100%) !important;
}

.detail-heart {
  position: absolute;
  right: -10px;
  top: -10px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.44);
  box-shadow: 0 10px 22px rgba(80, 20, 39, .26), inset 0 0 0 3px rgba(255,255,255,.12);
}

.favorite-ribbon {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 112px;
  height: 98px;
  padding: 0;
  color: #fff;
  background:
    radial-gradient(circle at 34% 24%, #ffb8c4, transparent 30%),
    linear-gradient(135deg, #d8192a, #9e0920);
  box-shadow: 0 12px 24px rgba(76, 18, 22, .32), inset 0 0 0 5px rgba(255,255,255,.12);
  clip-path: polygon(50% 95%, 9% 57%, 2% 36%, 7% 18%, 20% 7%, 36% 6%, 50% 19%, 64% 6%, 80% 7%, 93% 18%, 98% 36%, 91% 57%);
  font-family: var(--font-soft-ui);
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-8deg);
  pointer-events: none;
}

.favorite-ribbon > span {
  position: relative;
  z-index: 2;
  display: block;
  width: 84px;
  text-align: center;
  transform: translateY(-2px);
}

.book-hero-main {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.book-title-input {
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-family: "Lucida Bright", Georgia, serif;
  font-size: clamp(1.9rem, 3.2vw, 3.1rem);
  font-weight: 700;
  line-height: 1.02;
  width: 100%;
  min-width: 0;
  min-height: 2.2em;
  resize: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.book-author-line,
.book-series-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.book-author-line input {
  width: min(320px, 100%);
  border: 0;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 1.05rem;
}

.author-name-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.author-name-wrap input {
  min-width: 0;
}

.author-link.light,
.series-link {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 6%);
  font-size: .82rem;
}

.nationality-flag {
  font-size: 1.15rem;
}

.author-edit-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.author-flag-badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper-deep), #fff 36%);
  font-size: 1.45rem;
  box-shadow: var(--small-shadow);
}

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

.gender-picker button,
.author-meta-line span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--ink);
  background: var(--paper);
}

.gender-picker button.active {
  border-color: var(--rose);
  color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--wine));
}

.author-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 5px;
}

.author-meta-line span {
  padding: 4px 9px;
}

.book-series-line .inline-number {
  width: 42px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.hero-stars .stars {
  border: 0;
  padding: 0;
  background: transparent;
}

.hero-stars .star-btn {
  font-size: 1.65rem;
}

.hero-rating-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.status-stamp {
  min-height: 34px;
  padding: 7px 18px;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22) inset, 2px 4px 0 rgba(112, 70, 78, .18);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  transform: rotate(-.7deg);
}

.status-stamp summary {
  color: inherit;
}

.status-stamp.planned {
  border-color: #b6b2ad;
  background: linear-gradient(135deg, #9d9892, #6e6963);
}

.status-stamp.reading {
  border-color: #78a5cf;
  background: linear-gradient(135deg, #6ba3d7, #2f6f9d);
}

.status-stamp.done {
  border-color: #7dab82;
  background: linear-gradient(135deg, #5b946c, #3f7c56);
}

.status-stamp.unfinished {
  border-color: #d38b8b;
  background: linear-gradient(135deg, #c75757, #8e2d35);
}

.book-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.book-taxonomy-board {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--genre, var(--rose)), #fff 34%);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--genre), #fff 16%), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--genre-dark, var(--wine)), #000 16%), color-mix(in srgb, var(--genre, var(--rose)), #000 28%));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--genre, var(--rose)), transparent 72%);
}

.book-taxonomy-board .taxonomy-label {
  color: rgba(255,255,255,.72);
}

.book-taxonomy-board .subgenre-slip,
.book-taxonomy-board .series-link {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 6%);
}

.taxonomy-row,
.book-genre-panel summary,
.taxonomy-actions {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.book-genre-panel {
  display: grid;
}

.book-theme-panel {
  display: grid;
}

.book-genre-panel summary,
.book-theme-panel summary {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.book-genre-panel summary::-webkit-details-marker,
.book-theme-panel summary::-webkit-details-marker {
  display: none;
}

.taxonomy-label {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.05;
  text-transform: uppercase;
}

.taxonomy-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.subgenre-slip.empty {
  color: var(--muted);
  border-style: dashed;
}

.trophy-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--genre, var(--gold)), var(--line) 35%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--genre-dark, var(--wine)), #000 12%);
  background: color-mix(in srgb, var(--genre-soft, var(--paper)), #fff 28%);
  font-size: .8rem;
  font-weight: 700;
}

.trophy-chip.add {
  cursor: pointer;
  border-style: dashed;
  color: var(--ink);
}

.taxonomy-actions {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.status-select {
  min-height: 42px;
}

.book-heart-action {
  min-width: 190px;
  margin: 0;
}

.book-genre-panel .compact-picker {
  max-height: 310px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--genre, var(--rose)), var(--line) 50%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 5%);
}

.theme-picker {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--genre, var(--rose)), var(--line) 55%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 6%);
}

.book-modal-block {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper), #fff 5%);
}

.book-modal-block h3 {
  font-family: var(--font-book);
  font-size: 1.18rem;
}

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

.modal-chip-grid.small {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.modal-genre-chip {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 5px 10px;
  align-items: center;
  min-height: 74px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 36%);
  border-radius: 15px;
  color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre-soft), #fff 18%), var(--paper));
  text-align: left;
}

.modal-genre-chip span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--genre), #fff 54%);
}

.modal-genre-chip strong,
.modal-genre-chip small {
  min-width: 0;
}

.modal-genre-chip small {
  color: var(--muted);
  font-size: .74rem;
}

.modal-genre-chip.main {
  color: #fff;
  background: linear-gradient(135deg, var(--genre), color-mix(in srgb, var(--genre), #000 22%));
}

.modal-genre-chip.main small {
  color: rgba(255,255,255,.78);
}

.modal-genre-list {
  display: grid;
  gap: 12px;
}

.modal-genre-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 36%);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre-soft), #fff 34%), var(--paper));
}

.modal-genre-card .tag-row,
.modal-tags {
  gap: 9px;
}

.modal-tags {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.selected-theme-box {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper), var(--rose-soft) 20%);
}

.selected-theme-box .tag-row {
  gap: 8px;
}

.genre-add-line,
.subgenre-add-line {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.theme-add-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.theme-add-line span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.subgenre-slip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 9px 18px 18px 9px;
  color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--paper), #fff 8%), color-mix(in srgb, var(--paper-deep), var(--paper) 70%));
  font-size: .82rem;
}

.book-meta-board {
  display: grid;
  gap: 10px;
  padding: 12px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--genre, var(--line)), var(--line) 42%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--genre), #fff 48%), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, var(--genre-soft, var(--paper)), var(--genre) 22%), color-mix(in srgb, var(--genre-soft, var(--paper)) 58%, #fff 42%));
}

.book-meta-board label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.book-meta-board input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
}

.date-range-card span:last-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.pretty-select {
  position: relative;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.pretty-select summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}

.pretty-select summary::-webkit-details-marker {
  display: none;
}

.pretty-select .pill {
  margin: 8px 6px 0 0;
}

.format-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.format-switch button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 58px;
  min-width: 0;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: var(--paper);
}

.format-switch button span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.55rem;
}

.format-switch button.active {
  color: #fff;
  border-color: var(--wine);
  background: linear-gradient(135deg, var(--wine), var(--rose));
}

.audio-extra-panel {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 55%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--active-genre-soft, #f7efff), #fff 42%);
}

.audio-extra-panel label,
.narrator-picker {
  display: grid;
  gap: 8px;
}

.narrator-add-line {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.narrator-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 8px 10px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: .95rem;
  line-height: 1.15;
}

.narrator-tag button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--rose)), #fff 30%);
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  font-size: .85rem;
  line-height: 1;
}

.book-detail-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.annotation-card,
.score-card,
.book-diary,
.book-characters-card,
.book-quotes-card,
.favorite-chapters-card {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 58%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper), var(--active-genre-soft, #fff) 18%);
  box-shadow: var(--small-shadow);
}

.annotation-card {
  grid-column: span 5;
}

.score-card {
  grid-column: span 7;
}

.book-diary {
  grid-column: span 7;
}

.book-characters-card {
  grid-column: span 5;
}

.book-quotes-card {
  grid-column: 1 / -1;
}

.favorite-chapters-card {
  grid-column: 1 / -1;
}

.annotation-text {
  min-height: 220px;
  outline: 0;
  color: var(--ink);
  font-family: var(--font-soft-ui);
  font-size: .96rem;
  line-height: 1.65;
  white-space: pre-wrap;
  background: transparent;
}

.compact-picker {
  max-height: 430px;
  overflow: auto;
  padding-top: 12px;
}

.book-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.score-tile {
  display: grid;
  gap: 9px;
  overflow: visible;
  padding: 10px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 60%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 6%);
}

.score-tile .label {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-start;
}

.score-tile .label i {
  font-style: normal;
}

.score-tile .score-value {
  margin-left: auto;
}

.score-value {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

.book-range {
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
}

.book-range::-webkit-slider-runnable-track {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--rose)), var(--line) 45%);
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--active-genre, var(--rose)) 0 var(--score-p), color-mix(in srgb, var(--paper-deep), #fff 45%) var(--score-p) 100%);
}

.book-range::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 2px solid color-mix(in srgb, var(--active-genre, var(--rose)), #fff 25%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(45, 33, 28, .18);
}

.icon-scale {
  display: flex;
  gap: 7px;
}

.icon-scale button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: var(--paper);
}

.icon-scale button.on {
  color: #fff;
  border-color: var(--wine);
  background: linear-gradient(135deg, var(--wine), var(--rose));
}

.pepper-tile .pepper-row {
  font-size: 1.15rem;
}

.emotion-picker {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 55%);
}

.emotion-chip {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 55%);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 6%);
  font-size: .82rem;
}

.emotion-chip.active {
  color: #fff;
  border-color: var(--active-genre, var(--rose));
  background: linear-gradient(135deg, var(--active-genre, var(--rose)), color-mix(in srgb, var(--active-genre, var(--rose)), #000 18%));
}

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

.chapter-card {
  position: relative;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 54%);
  border-radius: 18px 18px 18px 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--paper), #fff 8%), color-mix(in srgb, var(--active-genre-soft, var(--gold)), var(--paper) 58%));
}

.chapter-card strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-book);
  font-size: 1.45rem;
  color: color-mix(in srgb, var(--active-genre, var(--wine)), #000 12%);
}

.chapter-rank-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 32px 8px 0;
}

.chapter-rank-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px dashed color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 45%);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper), #fff 10%);
  font-size: .84rem;
  font-weight: 700;
}

.chapter-rank-row input {
  width: 4ch;
  min-width: 42px;
  border: 0;
  color: color-mix(in srgb, var(--active-genre, var(--wine)), #000 12%);
  background: transparent;
  font: inherit;
  text-align: center;
}

.chapter-card strong span {
  color: inherit;
}

.chapter-card input {
  width: 5.2ch;
  min-width: 72px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 20%);
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
}

.chapter-card p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}

.quote-character-input {
  width: 100%;
  margin-top: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px dashed color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 46%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper), #fff 8%);
}

.delete-note-btn {
  position: absolute;
  right: 9px;
  top: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 48%);
  border-radius: 50%;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper), #fff 8%);
  font-family: Arial, sans-serif;
  font-size: 0;
  line-height: 1;
  text-align: center;
}

.delete-note-btn::before {
  content: "×";
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-.5px);
}

.delete-note-btn:hover {
  color: #fff;
  border-color: #9e2d38;
  background: #b83a46;
}

.detail-grid,
.score-grid,
.profile-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  font-family: var(--font-soft-ui);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pepper-row {
  display: flex;
  gap: 2px;
}

.pepper-btn {
  border: 0;
  background: transparent;
  filter: grayscale(1);
  opacity: 0.48;
  font-size: 1.35rem;
}

.pepper-btn.on {
  filter: none;
  opacity: 1;
}

.quote-card {
  position: relative;
  padding: 26px 20px 18px 56px;
  border: 1px solid color-mix(in srgb, var(--genre, var(--rose)), var(--line) 48%);
  border-radius: 14px 34px 16px 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--genre-soft, var(--paper)), #fff 18%), color-mix(in srgb, var(--paper), #fff 4%));
  box-shadow: 0 16px 30px rgba(76, 47, 30, .12);
}

.quote-card::before {
  content: "“";
  position: absolute;
  left: 14px;
  top: -6px;
  color: color-mix(in srgb, var(--genre, var(--rose)), #fff 4%);
  font-family: "Lucida Calligraphy", "Apple Chancery", Georgia, serif;
  font-size: 5.4rem;
  line-height: 1;
}

.quote-text {
  color: color-mix(in srgb, var(--ink), var(--genre, var(--rose)) 12%);
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.58;
}

.quote-speaker {
  margin-top: 8px;
  color: color-mix(in srgb, var(--genre-dark, var(--wine)), var(--muted) 22%);
  font-family: "Lucida Calligraphy", "Apple Chancery", Georgia, serif;
  font-size: 1rem;
  text-align: right;
}

.archive-page {
  display: grid;
  gap: 14px;
}

.archive-filter-panel {
  padding: 12px;
}

.compact-head h3 {
  font-family: var(--font-soft-serif);
  font-size: 1.05rem;
}

.archive-filter-body {
  display: none;
}

.archive-filter-panel.open .archive-filter-body {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.4fr) auto;
  gap: 10px;
  align-items: start;
  margin-top: 10px;
}

.quote-list.redesigned {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.quote-meta-row,
.quote-source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.quote-source-row {
  justify-content: flex-start;
  padding-top: 10px;
  border-top: 1px dashed color-mix(in srgb, var(--genre, var(--line)), transparent 45%);
}

.quote-book-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb, var(--genre, var(--gold)), var(--line) 36%);
  border-radius: 4px 14px 14px 4px;
  color: color-mix(in srgb, var(--genre-dark, var(--wine)), #000 12%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--paper), #fff 8%), color-mix(in srgb, var(--genre-soft, var(--paper)), #fff 24%));
  font-family: var(--font-soft-serif);
  font-weight: 700;
}

.quote-author-stamp {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--mahogany), var(--line) 32%);
  border-radius: 999px;
  color: var(--mahogany);
  background: color-mix(in srgb, var(--paper), #fff 8%);
  font-family: var(--font-soft-ui);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.quote-character-label {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 12px 12px 12px 2px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre, var(--rose)), #000 8%), color-mix(in srgb, var(--genre, var(--rose)), #000 24%));
  font-size: .82rem;
  font-weight: 700;
}

.quote-series-mark {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px dashed color-mix(in srgb, var(--genre, var(--line)), var(--line) 35%);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper), #fff 4%);
  font-size: .78rem;
}

.quote-favorite-seal {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px 999px 999px 4px;
  color: #fff;
  background: linear-gradient(135deg, #db4a62, #9d1630);
  font-size: .78rem;
  font-weight: 800;
}

.quote-favorite-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

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

.chapter-archive-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--genre, var(--line)), var(--line) 42%);
  border-radius: 18px 18px 28px 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--genre-soft, var(--paper)), #fff 16%), color-mix(in srgb, var(--paper), #fff 6%));
  box-shadow: 0 14px 28px rgba(70, 44, 28, .11);
}

.chapter-book-title {
  justify-self: start;
  border: 0;
  padding: 0;
  color: color-mix(in srgb, var(--genre-dark, var(--wine)), #000 10%);
  background: transparent;
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 800;
  text-align: left;
}

.chapter-number {
  color: color-mix(in srgb, var(--genre-dark, var(--wine)), #000 12%);
  font-family: var(--font-book);
  font-size: 1.35rem;
}

.chapter-number strong {
  font-size: 2rem;
}

.chapter-archive-card p {
  color: var(--muted);
  line-height: 1.5;
}

.profile-page {
  display: grid;
  gap: 16px;
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(280px, 1fr) minmax(280px, .8fr);
  gap: 18px;
  align-items: stretch;
  background:
    radial-gradient(circle at 9% 14%, color-mix(in srgb, var(--rose), #fff 55%), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--paper), #fff 10%), color-mix(in srgb, var(--lavender), #fff 40%));
}

.profile-avatar-editor,
.character-photo-editor {
  display: grid;
  gap: 10px;
  align-content: start;
}

.profile-avatar {
  width: 132px;
  height: 132px;
  font-size: 3.2rem;
  box-shadow: 0 18px 34px rgba(76, 47, 30, .16);
}

.profile-url-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-family: var(--font-soft-ui);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-url-field input {
  min-width: 0;
}

.profile-copy {
  display: grid;
  align-content: start;
  gap: 8px;
}

.profile-name-input {
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-family: "Lucida Bright", Georgia, serif;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 800;
}

.profile-description {
  min-height: 118px;
  border: 1px dashed color-mix(in srgb, var(--rose), var(--line) 42%);
  border-radius: 16px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 30px, color-mix(in srgb, var(--rose), transparent 82%) 31px 32px),
    color-mix(in srgb, var(--paper), #fff 4%);
  font-family: "Lucida Handwriting", "Apple Chancery", Georgia, serif;
  line-height: 2;
}

.profile-level-card {
  display: grid;
  gap: 9px;
  padding: 18px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--wine), color-mix(in srgb, var(--wine), #000 22%));
  box-shadow: 0 16px 32px rgba(76, 32, 42, .2);
}

.profile-level-card .label,
.profile-level-card small {
  color: rgba(255,255,255,.75);
}

.profile-level-card strong {
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 2rem;
}

.level-map summary {
  cursor: pointer;
  font-weight: 800;
}

.level-map div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 210px;
  overflow: auto;
  margin-top: 10px;
}

.level-map span {
  padding: 6px 8px;
  border-radius: 999px;
  color: rgba(255,255,255,.74);
  background: rgba(255,255,255,.08);
  font-size: .78rem;
}

.level-map span.earned {
  color: var(--ink);
  background: var(--gold);
}

.profile-dashboard,
.record-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.profile-dashboard {
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 0%, rgba(216,109,149,.34), transparent 32%),
    linear-gradient(135deg, #2b1720, #412436 55%, #21171a);
  box-shadow: 0 24px 44px rgba(58, 26, 37, .24);
}

.profile-dashboard .stat,
.profile-records .stat {
  border-color: rgba(255,255,255,.12);
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
}

.profile-dashboard .stat .label,
.profile-dashboard .stat .meta,
.profile-records .stat .label,
.profile-records .stat .meta {
  color: rgba(255,255,255,.68);
}

.profile-shortcuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.paper-action {
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 10px 24px 10px 24px;
  color: var(--ink);
  background: linear-gradient(135deg, var(--paper), var(--paper-deep));
  font-family: var(--font-soft-ui);
  font-weight: 800;
}

.profile-two-col {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 14px;
}

.profile-book-strip {
  display: grid;
  gap: 10px;
}

.mini-cover {
  display: inline-block;
  background-image: var(--cover);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mini-cover.empty-cover {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper), var(--sand) 55%);
  color: var(--muted);
}

.profile-mini-book {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 8%);
  text-align: left;
}

.profile-mini-book .mini-cover {
  width: 46px;
  height: 64px;
}

.shelf-profile-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(to bottom, transparent 0 76%, rgba(111, 71, 42, .2) 77% 100%),
    color-mix(in srgb, var(--paper-deep), var(--paper) 58%);
}

.profile-shelf-book {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: end;
  width: min(310px, 100%);
  min-height: 132px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 38%);
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--genre-soft), #fff 44%);
  box-shadow: var(--small-shadow);
  text-align: left;
}

.profile-shelf-book .cover {
  width: 74px;
  height: 108px;
  min-height: 108px;
}

.profile-shelf-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.profile-shelf-copy strong,
.profile-shelf-copy small,
.profile-shelf-copy em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-shelf-copy em {
  color: var(--muted);
  font-style: normal;
}

.profile-records.panel {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 12%, rgba(255,215,90,.32), transparent 28%),
    linear-gradient(135deg, #fff8ed, #f4dfc8);
}

.profile-records h3 {
  color: var(--ink);
}

.profile-records .stamp {
  color: var(--wine);
  background: color-mix(in srgb, var(--rose), #fff 70%);
}

.profile-records .stat {
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 22px rgba(80, 50, 30, .08);
}

.badge-group + .badge-group {
  margin-top: 14px;
}

.badge-group h4 {
  margin-bottom: 8px;
  font-family: var(--font-soft-serif);
  font-size: 1rem;
}

.profile-badges .badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.profile-badges .badge-card {
  width: auto;
  min-width: 188px;
  max-width: 260px;
  padding: 10px 12px;
}

.profile-badges .badge-icon {
  width: 42px;
  height: 42px;
}

.profile-badges .badge-card.locked {
  display: none;
}

.genre-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.genre-card,
.series-card,
.badge-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--small-shadow);
}

.genre-card {
  border-color: color-mix(in srgb, var(--genre), var(--line) 42%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--genre-soft), #fff 20%), color-mix(in srgb, var(--genre), #fff 72%)),
    var(--paper);
}

.genre-card .paper-tag {
  border-color: color-mix(in srgb, var(--genre), var(--line) 35%);
  background: color-mix(in srgb, var(--genre), #fff 80%);
}

.genre-card button,
.series-card button {
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.genre-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--genre), color-mix(in srgb, var(--genre), #fff 38%));
  font-size: 1.4rem;
}

.series-covers {
  display: flex;
  margin-top: 12px;
}

.series-covers .mini-cover {
  width: 48px;
  height: 72px;
  margin-right: -10px;
  border: 1px solid var(--line);
  border-radius: 6px 3px 3px 6px;
  background: var(--cover) center/cover no-repeat;
  box-shadow: 4px 4px 0 rgba(44, 29, 20, 0.08);
}

.series-page {
  display: grid;
  gap: 14px;
}

.series-hero,
.series-controls,
.series-detail-hero,
.series-diary,
.series-status-card,
.series-book-strip {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper), #fff 3%);
  box-shadow: var(--small-shadow);
}

.series-hero {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(330px, 1.1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  color: #fff8f1;
  border-color: rgba(255, 235, 222, .18);
  background: linear-gradient(135deg, #4a2a31, #2e2023);
}

.series-hero h2 {
  font-family: var(--font-book);
  font-size: 1.35rem;
}

.series-hero .meta {
  color: rgba(255, 248, 241, .74);
}

.series-dashboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #5f3842, #392529);
  box-shadow: var(--small-shadow);
}

.series-dashboard.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  padding: 8px;
  background: color-mix(in srgb, #2c1d20, transparent 18%);
  box-shadow: none;
}

.series-dashboard.compact article {
  min-height: 62px;
  padding: 8px 10px;
}

.series-dashboard article {
  display: grid;
  gap: 4px;
  min-height: 78px;
  padding: 11px;
  border: 1px solid rgba(255, 235, 222, .2);
  border-radius: 14px;
  color: #fff8f1;
  background: linear-gradient(135deg, rgba(196, 126, 138, .62), rgba(130, 75, 87, .62));
}

.series-dashboard strong {
  font-family: var(--font-book);
  font-size: 1.32rem;
}

.series-dashboard span,
.series-dashboard small {
  color: rgba(255, 248, 241, .76);
  font-size: .76rem;
}

.series-controls {
  display: block;
  padding: 10px 12px;
}

.series-tab-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 122px));
  gap: 9px;
  justify-content: start;
}

.series-tab-strip .pill {
  min-height: 36px;
  padding: 6px 10px;
}

.series-controls summary {
  cursor: pointer;
  font-family: var(--font-soft-ui);
  font-size: .92rem;
  font-weight: 600;
  list-style: none;
}

.series-controls summary::-webkit-details-marker {
  display: none;
}

.series-controls summary::after {
  content: "⌄";
  float: right;
  color: var(--muted);
}

.series-controls[open] summary::after {
  content: "⌃";
}

.series-controls-body {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(320px, 1fr);
  gap: 10px;
  padding-top: 10px;
}

.series-filter-pills .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.series-filter-pills {
  grid-column: 1 / -1;
}

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

.series-card.rich {
  padding: 14px;
  border-color: color-mix(in srgb, var(--genre), var(--line) 36%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--genre-soft), #fff 28%), color-mix(in srgb, var(--paper), var(--genre-soft) 52%)),
    var(--paper);
}

.series-card.rich h3 {
  margin-top: 12px;
  font-family: var(--font-book);
  font-size: 1.28rem;
}

.series-card-top,
.series-progress-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.series-card-top {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
}

.series-card-heading {
  display: grid;
  min-width: 0;
}

.series-card-heading strong {
  overflow: hidden;
  font-family: var(--font-book);
  font-size: 1.18rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.series-card-heading small {
  overflow: hidden;
  color: var(--muted);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.series-status.done {
  color: #fff;
  background: linear-gradient(135deg, #6f8f72, #3f6c49);
}

.series-status.reading {
  color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--wine));
}

.series-status.waiting {
  color: #fff;
  background: linear-gradient(135deg, #7d8fb7, #4d638f);
}

.genre-scroll-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  margin-top: 12px;
  padding: 5px 14px 5px 11px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 30%);
  border-radius: 7px 18px 18px 7px;
  color: color-mix(in srgb, var(--genre-dark), #000 14%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--genre), #fff 68%), color-mix(in srgb, var(--genre-soft), #fff 28%));
  font-size: .82rem;
  font-weight: 600;
}

.series-progress-line {
  margin-top: 10px;
  font-size: .86rem;
}

.series-card.rich .series-stars {
  display: inline-flex;
  min-width: 180px;
  justify-content: flex-end;
  color: #d99d35;
  font-size: 1.18rem;
  letter-spacing: -1.5px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.empty-cover {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper-deep), #fff 30%);
}

.series-detail-page {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--genre-soft), #fff 22%);
}

.series-detail-page > .overline-back {
  justify-self: start;
  margin-left: 0;
}

.series-detail-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(220px, .8fr) minmax(240px, .9fr);
  gap: 12px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--genre), var(--line) 34%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre-dark), #000 4%), color-mix(in srgb, var(--genre), var(--genre-dark) 48%));
}

.series-title-edit,
.series-count-card,
.series-rating-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.12);
}

.series-detail-hero .label {
  color: rgba(255,255,255,.72);
}

.series-detail-hero input {
  border-color: rgba(255,255,255,.28);
  color: #fff;
  background: rgba(255,255,255,.12);
}

.series-title-edit input {
  min-height: 54px;
  padding-inline: 16px;
  font-family: var(--font-book);
  font-size: 1.52rem;
  font-weight: 600;
}

.author-link {
  width: fit-content;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(255,255,255,.12);
  font-family: var(--font-soft-ui);
  font-size: .78rem;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.34);
  text-underline-offset: 4px;
}

.author-edit-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.series-count-card div:first-of-type {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1rem;
}

.series-count-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: var(--font-book);
  font-size: 2rem;
}

.series-count-inline span,
.series-count-inline input {
  font: inherit;
}

.series-count-line {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.series-count-card strong {
  font-family: var(--font-book);
  font-size: 2rem;
}

.series-count-card input {
  width: 42px;
  border: 0;
  padding: 0;
  text-align: center;
  background: transparent;
}

.series-count-card input[type="number"] {
  appearance: textfield;
}

.series-count-card input[type="number"]::-webkit-outer-spin-button,
.series-count-card input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.series-soft-actions .pill {
  min-height: 30px;
  padding: 5px 10px;
  border-color: color-mix(in srgb, var(--genre), #fff 25%);
  color: color-mix(in srgb, var(--genre-dark), #fff 14%);
  background: color-mix(in srgb, var(--genre-soft), #fff 38%);
  font-size: .78rem;
}

.series-soft-actions .pill.active {
  color: #fff;
  border-color: color-mix(in srgb, var(--genre), #fff 18%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre), var(--genre-dark) 18%), var(--genre-dark));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--genre-dark), transparent 70%);
}

.mini-progress {
  flex: 1;
  height: 9px;
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.18);
}

.mini-progress span {
  background: linear-gradient(90deg, #fff4c7, color-mix(in srgb, var(--genre-soft), #fff 8%));
}

.series-progress-with-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.series-progress-with-label strong {
  color: #fff7cf;
  font-size: .86rem;
}

.series-rating-card {
  justify-items: center;
  align-content: center;
}

.series-rating-stars .stars,
.new-series-stars .stars {
  padding: 0;
  border: 0;
  background: transparent;
}

.new-series-stars {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), var(--gold) 8%);
}

.new-series-stars .star-btn {
  color: color-mix(in srgb, var(--line), var(--ink) 24%);
  font-size: 1.55rem;
}

.new-series-stars .star-btn.on {
  color: var(--gold);
}

.series-rating-stars.new-series-stars .star-btn {
  color: color-mix(in srgb, var(--line), var(--ink) 24%);
}

.series-rating-stars.new-series-stars .star-btn.on {
  color: var(--gold);
}

.series-rating-stars .star-btn {
  font-size: 1.55rem;
  color: rgba(255,255,255,.42);
}

.series-rating-stars .star-btn.on {
  color: #f2c15f;
  text-shadow: 0 2px 4px rgba(70, 39, 11, .2);
}

.series-dashboard.detail {
  background: linear-gradient(135deg, var(--genre-dark), color-mix(in srgb, var(--genre-dark), #000 16%));
}

.series-dashboard.detail article {
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre-dark), var(--genre-soft) 18%), color-mix(in srgb, var(--genre-dark), var(--genre) 16%));
}

.series-dashboard.detail {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-select summary {
  display: grid;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}

.metric-select summary::-webkit-details-marker {
  display: none;
}

.metric-select div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.series-status-card {
  padding: 10px;
  border-color: color-mix(in srgb, var(--genre), var(--line) 34%);
  background: color-mix(in srgb, var(--genre-soft), #fff 45%);
}

.series-book-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-color: color-mix(in srgb, var(--genre), var(--line) 34%);
  background: color-mix(in srgb, var(--genre-soft), #fff 38%);
}

.series-volume {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: center;
}

.series-volume .series-stars {
  color: #d6a03c;
  font-size: .9rem;
  letter-spacing: -1px;
}

.series-heart {
  position: absolute;
  right: 10px;
  top: 8px;
}

.series-people,
.series-quote-board {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 34%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--genre-soft), #fff 38%);
  box-shadow: var(--small-shadow);
}

.character-orbit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 178px;
  padding: 12px 4px;
}

.character-bubble-wrap {
  position: relative;
  display: inline-grid;
}

.character-bubble {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  width: 116px;
  min-height: 132px;
  padding: 10px 8px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 50%);
  border-radius: 18px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), var(--active-genre-soft, #fff) 24%);
  text-align: center;
}

.character-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--rose)), #fff 20%);
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper);
  box-shadow: var(--small-shadow);
  font-size: 1rem;
  line-height: 1;
  z-index: 2;
}

.character-remove-btn:hover {
  color: #fff;
  background: var(--rose);
}

.character-bubble > span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 2px solid color-mix(in srgb, var(--active-genre, var(--line)), #fff 25%);
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 32% 23%, rgba(255,255,255,.55), transparent 25%),
    linear-gradient(135deg, var(--active-genre, var(--rose)), color-mix(in srgb, var(--active-genre, var(--rose)), #000 28%));
  box-shadow: 0 10px 18px rgba(45, 33, 28, .18);
  font-family: var(--font-book);
  font-size: 1.75rem;
  font-weight: 800;
}

.character-bubble strong {
  font-size: .9rem;
  line-height: 1.05;
  max-width: 100%;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.character-bubble small {
  color: var(--muted);
  font-size: .72rem;
}

.author-book-list {
  display: grid;
  gap: 10px;
}

.author-book-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 5%);
  text-align: left;
}

.author-book-item .mini-cover {
  width: 54px;
  height: 78px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 7px 4px 4px 7px;
  background: var(--cover) center/cover no-repeat;
}

.author-book-item span:last-child {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
}

.author-book-item strong {
  overflow: hidden;
  font-family: var(--font-book);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.author-book-item small,
.author-book-item em {
  color: var(--muted);
  font-size: .78rem;
  font-style: normal;
}

.author-book-item em {
  color: #d49a35;
  letter-spacing: -1px;
}

.series-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.series-quote-note {
  position: relative;
  padding: 16px 16px 14px 38px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 35%);
  border-radius: 8px 18px 8px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--paper), #fff 10%), color-mix(in srgb, var(--genre-soft), #fff 45%));
  box-shadow: 5px 7px 0 color-mix(in srgb, var(--genre), transparent 86%);
}

.series-quote-note::before {
  content: "“";
  position: absolute;
  left: 10px;
  top: -3px;
  color: var(--genre);
  font-family: Georgia, serif;
  font-size: 3rem;
}

.series-quote-note p {
  font-family: var(--font-soft-serif);
  line-height: 1.45;
}

.series-quote-note span {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: .78rem;
}

.book-quotes-card .series-quote-note {
  min-height: 132px;
  border-color: color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 45%);
  background:
    linear-gradient(90deg, rgba(255,255,255,.42) 0 26px, transparent 26px),
    repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--active-genre, var(--line)), transparent 76%) 32px),
    color-mix(in srgb, var(--paper), var(--active-genre-soft, #fff) 20%);
}

.book-quotes-card .series-quote-note p {
  font-family: var(--font-book);
  font-size: 1.05rem;
  line-height: 1.62;
}

.book-quotes-card .series-quote-note::before {
  color: var(--active-genre, var(--rose));
}

.book-quotes-card .series-quote-note span {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--active-genre, var(--line)), var(--line) 45%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper), #fff 8%);
  font-weight: 700;
}

.book-detail-quote-note {
  display: grid;
  gap: 10px;
  padding: 22px 18px 18px 46px;
  border-radius: 10px 24px 10px 24px;
}

.book-detail-quote-note .quote-speaker-edit {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(360px, 100%);
}

.book-detail-quote-note .quote-speaker-edit span {
  margin: 0;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.book-detail-quote-note .quote-speaker-edit input {
  min-height: 34px;
  border-style: solid;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper), #fff 12%);
}

.mini-cover.large {
  width: 72px;
  height: 108px;
  margin-right: 0;
  border: 1px solid var(--line);
  border-radius: 8px 4px 4px 8px;
  background: var(--cover) center/cover no-repeat;
  box-shadow: 6px 8px 14px rgba(73, 49, 31, .16);
}

.series-diary {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--genre), var(--line) 34%);
  background:
    linear-gradient(90deg, rgba(120, 78, 56, .1) 1px, transparent 1px),
    linear-gradient(180deg, color-mix(in srgb, var(--paper), #fff 8%), color-mix(in srgb, var(--genre-soft), #fff 45%));
  background-size: 28px 100%, auto;
}

.diary-page {
  min-height: 180px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 38%);
  border-radius: 16px;
  background:
    repeating-linear-gradient(180deg, transparent 0 30px, color-mix(in srgb, var(--line), transparent 58%) 31px),
    color-mix(in srgb, var(--paper), #fff 6%);
  font-family: var(--font-soft-serif);
  line-height: 1.78;
}

.diary-title {
  margin-bottom: 14px;
  color: color-mix(in srgb, var(--genre-dark), var(--ink) 16%);
  font-family: "Lucida Handwriting", "Lucida Calligraphy", "Segoe Script", cursive;
  font-size: 1.65rem;
  line-height: 1.22;
  outline: 0;
}

.diary-body {
  min-height: 120px;
  color: color-mix(in srgb, var(--genre-dark), var(--ink) 10%);
  font-family: "Lucida Handwriting", "Lucida Calligraphy", "Segoe Script", cursive;
  font-size: 1.02rem;
  line-height: 1.9;
  outline: 0;
  white-space: pre-wrap;
}

.series-wizard-step {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}

.compact-diary {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.diary-title-input,
.diary-body-input {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: "Lucida Handwriting", "Lucida Calligraphy", "Segoe Script", cursive;
}

.diary-title-input {
  margin-bottom: 12px;
  padding: 0;
  color: var(--ink);
  font-size: 1.35rem;
}

.diary-body-input {
  min-height: 120px;
  padding: 0;
  line-height: 1.8;
}

.series-stars {
  color: #d49a35;
  white-space: nowrap;
}

.checkbox-pill {
  gap: 8px;
}

.checkbox-pill input {
  width: auto;
  accent-color: var(--wine);
}

.badge-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
}

.badge-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 25%, #ffe4a4, var(--gold) 50%, var(--copper));
  font-size: 1.35rem;
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  justify-content: end;
  background: rgba(30, 20, 14, 0.34);
  backdrop-filter: blur(8px);
}

.drawer.open {
  display: flex;
}

.drawer-panel {
  position: relative;
  width: min(520px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  border-left: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.drawer-panel.wide {
  width: min(780px, 100%);
}

.drawer-title {
  margin: 6px 0 16px;
  font-family: var(--font-book);
  font-size: 1.75rem;
}

.genre-form {
  display: grid;
  gap: 12px;
}

.genre-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.genre-form input,
.genre-form textarea {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
}

.genre-form textarea {
  min-height: 130px;
  resize: vertical;
}

.genre-form input[type="color"] {
  height: 42px;
  padding: 0;
}

.close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper-deep);
  font-size: 1.3rem;
}

.wizard-steps {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.wizard-step {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper), var(--paper-deep) 25%);
}

.wizard-title {
  font-size: clamp(1.45rem, 2vw, 2rem);
}

.wizard-step h3 {
  font-family: var(--font-book);
  font-size: 1.12rem;
}

.wizard-progress {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 6%);
}

.wizard-progress strong {
  font-family: var(--font-book);
}

.wizard-stepper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.wizard-stepper button {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 7px 5px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 5%);
}

.wizard-stepper button span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  background: var(--muted);
  font-size: .78rem;
  font-weight: 800;
}

.wizard-stepper button small {
  overflow: hidden;
  max-width: 100%;
  color: var(--muted);
  font-size: .68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wizard-stepper button.active {
  border-color: var(--wine);
  background: color-mix(in srgb, var(--rose), var(--paper) 78%);
}

.wizard-stepper button.active span,
.wizard-stepper button.done span {
  background: linear-gradient(135deg, var(--wine), var(--rose));
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

.wizard-nav button:disabled {
  cursor: default;
  opacity: .45;
}

.wizard-search-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

.wizard-genre-block {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.wizard-genre-heading {
  color: var(--ink);
  font-size: .96rem;
}

.wizard-subgroup {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px dashed color-mix(in srgb, var(--line), var(--rose) 25%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper), #fff 4%);
}

.wizard-choice-row,
.wizard-extra-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}

.wizard-format-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.wizard-format-row button {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 88px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 5%);
}

.wizard-format-row button span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.8rem;
}

.wizard-format-row button.active {
  color: #fff;
  border-color: var(--wine);
  background: linear-gradient(135deg, var(--wine), var(--rose));
}

.wizard-subgenres {
  display: grid;
  gap: 10px;
}

.wizard-stars .stars {
  width: fit-content;
}

.wizard-extra-fields {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.wizard-extra-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper), #fff 5%);
}

.wizard-extra-card h4 {
  margin: 0;
  font-family: var(--font-book);
  font-size: 1.35rem;
}

.wizard-add-line {
  display: flex;
  justify-content: flex-start;
}

.wizard-mini-list {
  display: grid;
  gap: 8px;
}

.wizard-mini-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 8%);
}

.wizard-mini-item strong,
.wizard-mini-item span {
  min-width: 0;
}

.wizard-mini-item strong {
  font-size: .92rem;
}

.wizard-mini-item span {
  grid-column: 1;
  color: var(--muted);
  font-size: .8rem;
}

.soft-btn.tiny {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
}

.wizard-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.csv-import-box {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line), var(--rose) 20%);
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--paper), var(--rose) 8%), color-mix(in srgb, var(--paper), #fff 8%));
}

.csv-import-box h4 {
  margin: 0 0 4px;
  font-family: var(--font-book);
  font-size: 1.1rem;
}

.csv-import-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inline-import-actions {
  justify-content: flex-start;
  margin-top: 0;
}

.csv-import-preview {
  display: grid;
  gap: 10px;
}

.csv-import-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.csv-import-summary span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 10%);
}

.csv-import-summary strong {
  font-family: var(--font-book);
  font-size: 1.3rem;
}

.csv-import-summary small {
  color: var(--muted);
  font-size: .72rem;
}

.csv-import-details {
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 7%);
}

.csv-import-details summary {
  cursor: pointer;
  font-weight: 800;
}

.csv-import-details ul {
  display: grid;
  gap: 7px;
  max-height: 260px;
  margin: 10px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.csv-import-details li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--paper-deep), #fff 8%);
}

.csv-import-details li strong,
.csv-import-details li span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.reread-badge,
.reread-detail-badge {
  display: inline-grid;
  place-items: center;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--wine), #fff 30%);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--wine), var(--rose));
  font-size: .72rem;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(70, 38, 26, .16);
}

.book-card > .reread-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
}

.shelf-book > .reread-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  padding: 4px 7px;
  font-size: .62rem;
}

@media (max-width: 760px) {
  .csv-import-grid,
  .csv-import-summary {
    grid-template-columns: 1fr;
  }

  .csv-import-details li {
    grid-template-columns: 1fr;
  }
}

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

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 11px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 6%);
}

textarea {
  min-height: 110px;
  resize: vertical;
}

@media (max-width: 1080px) {
  .app {
    grid-template-columns: 1fr;
  }

  .rail {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .theme-toggle {
    margin-top: 0;
  }

  .grid-dashboard,
  .dashboard-top,
  .detail,
  .book-hero {
    grid-template-columns: 1fr;
  }

  .book-detail-grid,
  .book-score-grid,
  .chapter-list,
  .series-quote-grid {
    grid-template-columns: 1fr;
  }

  .annotation-card,
  .score-card,
  .book-diary,
  .book-characters-card,
  .book-quotes-card,
  .favorite-chapters-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .stage,
  .rail {
    padding: 14px;
  }

  .rail {
    gap: 12px;
    overflow: hidden;
  }

  .nav {
    display: flex;
    gap: 8px;
    max-width: 100%;
    margin-inline: -2px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav button {
    flex: 0 0 auto;
    grid-template-columns: 22px auto;
    min-height: 42px;
    min-width: 128px;
    padding: 8px 10px;
    border-radius: 999px;
  }

  .topline {
    align-items: stretch;
    flex-direction: column;
  }

  .topline-actions,
  .topline-actions button {
    width: 100%;
  }

  .mini-stats,
  .book-row,
  .library-grid.cards,
  .genre-grid,
  .author-grid-page,
  .detail-grid,
  .score-grid,
  .profile-grid,
  .stats-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .current-book,
  .book-card button {
    grid-template-columns: 96px 1fr;
  }

  .taxonomy-row,
  .book-genre-panel summary,
  .taxonomy-actions {
    grid-template-columns: 1fr;
  }

  .book-heart-action {
    width: 100%;
    min-width: 0;
  }
}

/* Third-pass visual system */
:root {
  --font-ui: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  --font-book: "Lucida Bright", "Lucida Fax", Georgia, serif;
  --cream: #fff7ea;
  --vellum: #f4e1c8;
  --mahogany: #6b392c;
  --ink-soft: #4d3b33;
}

.night {
  --bg: #120d0a;
  --bg-2: #221611;
  --paper: #32241c;
  --paper-deep: #4b3426;
  --ink: #fff2de;
  --muted: #dcc6b1;
  --line: #8a6751;
  --wine: #f0b6c1;
  --rose: #c98294;
  --gold: #f0c36a;
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
}

h1 {
  font-size: clamp(1.55rem, 2.1vw, 2.15rem);
}

.section-head h2,
.section-head h3,
.detail-title,
.script {
  font-family: var(--font-book);
  letter-spacing: -0.01em;
}

.panel {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--paper), #fff 4%), color-mix(in srgb, var(--paper), var(--paper-deep) 22%));
  border-color: color-mix(in srgb, var(--line), transparent 8%);
}

.night .panel,
.night .stat,
.night .book-card,
.night .field-card,
.night .genre-card,
.night .series-card,
.night .quote-card {
  color: var(--ink);
  background: linear-gradient(135deg, #33231b, #241813);
}

.night .nav button,
.night .theme-toggle,
.night .soft-btn,
.night .stamp-btn,
.night .pill,
.night .catalog-chip,
.night input,
.night textarea {
  color: var(--ink);
  background: #3b2a21;
}

.dashboard-board {
  display: grid;
  gap: 14px;
}

.dash-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.metric-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.26), transparent),
    var(--paper);
  box-shadow: var(--small-shadow);
}

.metric-card > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--rose), var(--paper) 65%);
}

.metric-card strong {
  display: block;
  font-family: var(--font-book);
  font-size: 1.55rem;
  line-height: 1;
}

.metric-card p {
  font-weight: 600;
}

.metric-card small {
  color: var(--muted);
}

.dash-main,
.dashboard-columns,
.stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 14px;
}

.diary-card {
  position: relative;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rose), transparent 82%) 0 8px, transparent 8px),
    linear-gradient(135deg, var(--paper), color-mix(in srgb, var(--paper-deep), var(--paper) 70%));
}

.reading-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 14px;
  align-items: start;
}

.compact-cover {
  min-height: 160px;
}

.reading-info {
  display: grid;
  gap: 8px;
}

.date-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.date-slip {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px 16px 8px 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), var(--gold) 12%);
}

.rank-card.refined {
  min-height: auto;
}

.rank-badge {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 32% 22%, #fff0bd, var(--gold) 42%, var(--mahogany));
  font-family: var(--font-book);
  font-size: 1.5rem;
  font-weight: 600;
}

.xp-toolkit {
  margin-top: 12px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 14px;
}

.xp-toolkit summary {
  cursor: pointer;
  font-weight: 800;
}

.xp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.xp-list span {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold), var(--paper) 68%);
  font-size: .82rem;
}

.book-habit {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 8px;
}

.habit-book {
  position: relative;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px 3px 3px 6px;
  background: linear-gradient(90deg, var(--paper-deep), var(--paper));
  box-shadow: 3px 4px 0 rgba(69, 42, 25, .08);
}

.habit-book span {
  position: absolute;
  inset: 6px 6px 6px auto;
  width: 9px;
  border-left: 1px solid var(--line);
}

.habit-book.open {
  background: linear-gradient(90deg, var(--sage), color-mix(in srgb, var(--gold), var(--paper) 40%));
}

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

.recent-covers-strip .month-card {
  align-content: start;
}

.recent-covers-strip {
  grid-template-columns: 1fr;
}

.month-card.with-covers {
  display: grid;
  grid-template-columns: minmax(120px, .32fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.month-card.with-covers header {
  display: grid;
  gap: 3px;
}

.month-card.with-covers > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 7px;
  margin-top: 0;
}

.month-card.with-covers button {
  border: 0;
  padding: 0;
  background: transparent;
}

.month-card.with-covers .mini-cover {
  width: 100%;
  max-width: 38px;
  height: 52px;
  border-radius: 5px;
}

.month-card {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.month-card strong,
.month-card span,
.month-card small {
  display: block;
}

.library-nook {
  background:
    linear-gradient(180deg, transparent 0 64%, color-mix(in srgb, var(--copper), var(--paper) 62%) 64% 70%, transparent 70%),
    var(--paper);
}

.genre-summary,
.donut-list {
  display: grid;
  gap: 10px;
}

.genre-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.genre-meter .progress {
  grid-column: 1 / -1;
}

.genre-banner {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px 5px 10px;
  color: #fff;
  border-radius: 3px 14px 14px 3px;
  background: linear-gradient(135deg, var(--genre), color-mix(in srgb, var(--genre), #000 18%));
  font-family: var(--font-soft-serif);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: inset 8px 0 0 rgba(255,255,255,.16);
}

.clickable-tag {
  cursor: pointer;
}

.clickable-tag:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

.author-initial {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--wine), var(--rose));
  font-family: var(--font-soft-serif);
  font-weight: 800;
}

.trope-card,
.catalog-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent),
    color-mix(in srgb, var(--paper), var(--paper-deep) 30%);
  font-size: .82rem;
}

.catalog-chip.active {
  color: #fff;
  border-color: var(--wine);
  background: linear-gradient(135deg, var(--wine), var(--rose));
}

.filter-cluster {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 20%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper), transparent 10%);
}

.filter-cluster summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-soft-ui);
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
}

.filter-cluster summary::-webkit-details-marker {
  display: none;
}

.filter-cluster summary::after {
  content: "⌄";
  color: var(--muted);
  font-size: .85rem;
}

.filter-cluster[open] summary::after {
  content: "⌃";
}

.filter-cluster.compact {
  width: auto;
  min-width: 0;
  max-width: none;
  padding: 9px 11px;
}

.filter-cluster.popover-like {
  min-width: 0;
  max-width: none;
}

.filter-cluster.drawer-like {
  min-width: 0;
  max-width: none;
}

.filter-popover {
  display: none;
}

.filter-cluster[open] .filter-popover {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: block;
  width: min(420px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper), #fff 4%);
  box-shadow: 0 18px 40px rgba(73, 49, 31, .14);
}

.filter-cluster.popover-like[open] .filter-popover,
.filter-cluster.drawer-like[open] .filter-popover {
  max-height: 230px;
  overflow: auto;
}

.filter-cluster.wide {
  grid-column: span 2;
  min-width: 0;
  max-width: none;
}

.filters-body {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.filters-panel.open .filters-body {
  display: grid;
}

.pills {
  gap: 7px;
}

.pill {
  min-width: 0;
  justify-content: center;
  text-align: center;
  font-family: var(--font-soft-ui);
  font-weight: 500;
}

.period-row {
  display: grid;
  gap: 8px;
}

.period-row .pills {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, auto));
  overflow: visible;
}

.period-row .pill {
  min-width: 42px;
  padding-inline: 9px;
}

.search-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper), #fff 8%);
}

.search-strip.wide {
  grid-column: 1 / -1;
}

.search-strip input {
  width: 100%;
  min-width: 180px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--font-soft-ui);
}

.topics-filter .filter-popover {
  width: min(360px, calc(100vw - 48px));
}

.topics-filter .pill,
.filter-popover .pill {
  min-height: 30px;
  padding: 5px 9px;
  font-size: .82rem;
}

.sort-direction {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--line), transparent 20%);
}

.range-group {
  display: grid;
  grid-column: span 3;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  max-width: none;
  gap: 10px;
}

.range-pair {
  display: grid;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 10%);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 6%);
}

.range-title {
  font-family: var(--font-soft-ui);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink);
}

.dual-range {
  position: relative;
  height: 24px;
  cursor: pointer;
  touch-action: none;
}

.range-track,
.range-fill {
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.range-track {
  left: 0;
  right: 0;
  background: color-mix(in srgb, var(--line), #fff 32%);
}

.range-fill {
  left: var(--low-p);
  right: calc(100% - var(--high-p));
  background: color-mix(in srgb, var(--rose), var(--gold) 35%);
}

.range-thumb {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 2px solid color-mix(in srgb, var(--line), var(--rose) 25%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(73, 49, 31, .16);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.seal-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  min-width: 124px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--font-soft-ui);
  font-weight: 500;
}

.shelf-wrap {
  position: relative;
  padding: 18px 12px 8px;
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent),
    color-mix(in srgb, var(--paper-deep), var(--paper) 50%);
}

.shelf-decor {
  position: absolute;
  right: 18px;
  top: 8px;
  color: var(--gold);
  font-size: 1.4rem;
}

.shelf-book {
  width: 112px;
  min-width: 112px;
  height: 172px;
}

.spine-label {
  display: none;
}

.spine-rating {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 8px;
  display: inline-flex;
  justify-content: center;
  min-height: 24px;
  padding: 5px 2px 4px;
  border: 1px solid rgba(255, 233, 178, .72);
  border-radius: 999px;
  color: #ffe7a3;
  background: linear-gradient(135deg, rgba(40, 24, 15, .78), rgba(123, 81, 37, .58));
  box-shadow: 0 7px 16px rgba(30, 17, 9, .28);
  overflow: hidden;
  font-family: Georgia, serif;
  font-size: .58rem;
  line-height: 1;
  letter-spacing: -1.15px;
  white-space: nowrap;
}

.shelf-hover {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 9px;
  display: grid;
  gap: 5px;
  min-height: 102px;
  padding: 12px 9px;
  border: 1px solid rgba(255, 238, 204, .54);
  border-radius: 16px;
  color: #fff8ea;
  background: linear-gradient(180deg, rgba(41, 25, 18, .92), rgba(76, 45, 34, .84));
  box-shadow: 0 12px 24px rgba(21, 12, 8, .34);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.shelf-hover strong,
.shelf-hover small,
.shelf-hover em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.shelf-hover strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-soft-serif);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.04;
}

.shelf-hover small,
.shelf-hover em {
  font-family: var(--font-soft-ui);
  font-size: .76rem;
  font-style: normal;
  line-height: 1.14;
  color: #f3dcc6;
}

.shelf-hover em {
  color: #ffe8b8;
}

.shelf-book:hover .spine-rating,
.shelf-book:focus-visible .spine-rating {
  opacity: 0;
}

.shelf-book:hover .shelf-hover,
.shelf-book:focus-visible .shelf-hover {
  opacity: 1;
  transform: translateY(0);
}

.heart-seal {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 34% 22%, #ffd4dc, var(--wine));
  box-shadow: 0 6px 14px rgba(80, 20, 39, .25);
  z-index: 2;
}

.shelf-book .heart-seal {
  position: absolute;
  right: -10px;
  top: -10px;
}

.card-heart {
  position: absolute;
  right: -8px;
  top: -10px;
  width: 46px;
  height: 46px;
  border-radius: 48% 52% 43% 57% / 52% 45% 55% 48%;
  border: 1px solid rgba(255, 228, 234, .5);
  box-shadow: 0 10px 22px rgba(80, 20, 39, .24), inset 0 0 0 3px rgba(255,255,255,.12);
}

.book-card {
  padding-top: 12px;
  overflow: visible;
}

.book-card button {
  grid-template-columns: 86px minmax(0, 1fr);
  padding-right: 20px;
}

.book-card-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.book-card-copy .meta,
.book-card-copy .series-ribbon {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.book-card .stars {
  margin-top: 8px;
}

.book-card .tag-row {
  margin-top: 8px;
}

.book-card .genre-banner {
  min-height: 26px;
  padding: 4px 9px 4px 8px;
  font-size: .72rem;
}

.series-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px 999px 999px 4px;
  color: #fff;
  background: linear-gradient(135deg, var(--mahogany), var(--copper));
  font-family: var(--font-soft-serif);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
}

.series-ribbon.small {
  margin-top: 2px;
  color: #fff;
}

.inline-number {
  width: 38px;
  min-height: 24px;
  padding: 2px 4px;
  border-radius: 7px;
  text-align: center;
}

.annotation-under-cover {
  margin-top: 16px;
}

.genre-picker {
  display: grid;
  gap: 12px;
}

.genre-pick {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 35%);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre), var(--paper) 82%), var(--paper));
}

.icon-scale {
  display: flex;
  gap: 5px;
}

.icon-scale button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: var(--paper);
}

.icon-scale button.on {
  color: #fff;
  background: linear-gradient(135deg, var(--rose), var(--wine));
}

.profile-photo-editor {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}

.large-avatar {
  width: 92px;
  height: 92px;
  font-size: 2rem;
}

.search-results {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.search-result {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.search-result small,
.series-meta-line {
  color: var(--muted);
}

.search-result-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.search-result-copy strong {
  display: block;
  font-size: .98rem;
  line-height: 1.08;
}

.search-result-copy small,
.search-result-copy em {
  display: block;
  font-style: normal;
  line-height: 1.15;
}

.search-result-copy em {
  color: color-mix(in srgb, var(--muted), var(--accent) 18%);
  font-size: .78rem;
  font-weight: 700;
}

.database-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.database-search-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px dashed var(--rose-line);
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--paper), var(--rose-soft) 42%);
  font-weight: 800;
  text-decoration: none;
}

.series-meta-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: .78rem;
}

.genre-detail-page {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--genre-soft), #fff 18%);
}

.genre-dashboard {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  padding: 9px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--genre-dark), color-mix(in srgb, var(--genre-dark), #000 12%));
}

.genre-metric {
  display: grid;
  gap: 4px;
  min-height: 68px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--genre-soft), #fff 12%);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre-dark), var(--genre-soft) 18%), color-mix(in srgb, var(--genre-dark), var(--genre) 18%));
}

.genre-metric span,
.genre-metric small {
  color: rgba(255,255,255,.72);
  font-size: .72rem;
}

.genre-metric strong {
  font-family: var(--font-book);
  font-size: clamp(.98rem, 1.35vw, 1.28rem);
  line-height: 1.08;
}

.genre-summary-metric {
  grid-column: span 2;
  background: linear-gradient(135deg, color-mix(in srgb, var(--genre-dark), var(--genre-soft) 22%), var(--genre-dark));
}

.genre-section,
.genre-filter-panel {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 38%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--genre-soft), #fff 36%);
}

.genre-filter-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.genre-subfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.genre-subfilters .catalog-chip {
  border-color: color-mix(in srgb, var(--genre), #000 8%);
  background: color-mix(in srgb, var(--genre-soft), #fff 34%);
}

.genre-controls summary {
  cursor: pointer;
  font-family: var(--font-book);
  font-size: 1rem;
  font-weight: 600;
  list-style: none;
}

.genre-controls summary::-webkit-details-marker {
  display: none;
}

.genre-controls summary::after {
  content: "⌄";
  float: right;
  color: var(--muted);
}

.genre-controls[open] summary::after {
  content: "⌃";
}

.genre-detail-page .catalog-chip.active,
.genre-detail-page .pill.active {
  border-color: color-mix(in srgb, var(--genre), #000 18%);
  background: linear-gradient(135deg, var(--genre), color-mix(in srgb, var(--genre), #000 18%));
}

.genre-detail-page .range-fill {
  background: color-mix(in srgb, var(--genre), var(--genre-dark) 28%);
}

.genre-filter-panel .filter-cluster {
  padding: 7px 9px;
  border-color: color-mix(in srgb, var(--genre), var(--line) 42%);
  background: color-mix(in srgb, var(--genre-soft), #fff 48%);
}

.genre-filter-panel .filter-cluster summary {
  font-size: .82rem;
}

.genre-filter-panel .filter-cluster[open] .filter-popover {
  width: min(330px, calc(100vw - 48px));
  padding: 9px;
  border-color: color-mix(in srgb, var(--genre), var(--line) 32%);
  background: color-mix(in srgb, var(--genre-soft), #fff 50%);
}

.genre-filter-panel .range-group {
  grid-column: span 3;
  gap: 8px;
}

.genre-filter-panel .range-pair {
  padding: 7px 9px;
  border-color: color-mix(in srgb, var(--genre), var(--line) 38%);
  background: color-mix(in srgb, var(--genre-soft), #fff 56%);
}

.genre-book-grid .book-card {
  border-color: color-mix(in srgb, var(--genre), var(--line) 42%);
  background: color-mix(in srgb, var(--genre), var(--paper) 92%);
}

.genre-book-grid .series-ribbon {
  background: linear-gradient(135deg, var(--genre), color-mix(in srgb, var(--genre), #000 22%));
}

.bar-chart {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 28px;
  gap: 10px;
  align-items: center;
}

.bar-row div {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line), transparent 45%);
}

.bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rose), var(--gold));
}

.stats-page {
  display: grid;
  gap: 16px;
}

.stats-control-panel {
  padding: 14px;
}

.stats-filter-grid {
  display: grid;
  gap: 10px;
}

.stats-time-filters,
.stats-month-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.stats-month-grid .catalog-chip {
  min-width: 46px;
  justify-content: center;
}

.stats-dark-dashboard {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0%, rgba(216,109,149,.42), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(201,177,244,.26), transparent 34%),
    linear-gradient(135deg, #2a1721, #3a2030 46%, #1d1519);
  box-shadow: 0 26px 54px rgba(52, 22, 32, .28);
}

.stats-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dark-stat {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 26px rgba(0,0,0,.18);
}

.dark-stat > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(255,255,255,.12);
}

.dark-stat small,
.dark-stat em {
  display: block;
  color: rgba(255,255,255,.68);
  font-style: normal;
}

.dark-stat strong {
  display: block;
  margin: 2px 0;
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 1.75rem;
}

.stats-chart-shell {
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
}

.stats-chart-shell h3,
.stats-chart-shell .compact-head span {
  color: #fff;
}

.mini-tabs {
  justify-content: flex-end;
}

.stats-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  min-height: 230px;
  margin-top: 14px;
}

.stats-bar {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 6px;
  min-width: 0;
  height: 210px;
  border: 0;
  color: rgba(255,255,255,.82);
  background: transparent;
  text-align: center;
}

.stats-bar span {
  position: relative;
  display: grid;
  place-items: start center;
  align-self: end;
  min-height: 8px;
  border-radius: 999px 999px 4px 4px;
  background: linear-gradient(180deg, #ffd75a, #d86d95 58%, #a2005b);
  box-shadow: 0 10px 22px rgba(216,109,149,.28);
}

.stats-bar span em {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  min-width: max-content;
  max-width: none;
  color: #fff;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
  overflow: visible;
  writing-mode: horizontal-tb;
  text-shadow: 0 1px 4px rgba(42, 20, 28, .36);
}

.stats-layout.rich {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-glass-card {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--line), transparent 15%);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.42)),
    var(--paper);
  box-shadow: 0 18px 34px rgba(60, 39, 28, .12);
}

.donut-chart {
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  margin: 14px auto;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--paper) 0 48%, transparent 49%),
    conic-gradient(var(--donut));
  box-shadow: inset 0 8px 16px rgba(255,255,255,.54), 0 18px 32px rgba(54, 33, 24, .16);
}

.donut-chart span,
.donut-chart small {
  grid-area: 1 / 1;
}

.donut-chart span {
  transform: translateY(-10px);
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 2rem;
  font-weight: 800;
}

.donut-chart small {
  transform: translateY(22px);
  color: var(--muted);
}

.genre-meter {
  width: 100%;
  border: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.format-pills,
.country-grid,
.metadata-audit-row,
.top-books-row,
.genre-stat-grid,
.topic-cloud {
  display: grid;
  gap: 10px;
}

.format-pills {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.format-stat-pill,
.country-chip,
.topic-stat-chip {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 8%);
  text-align: left;
}

.format-stat-pill strong,
.country-chip strong {
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 1.45rem;
}

.country-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.country-chip span {
  font-size: 1.8rem;
}

.compact-toggle {
  margin-top: 10px;
  min-height: 38px;
  justify-self: start;
  font-size: 0.9rem;
}

.metadata-audit-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metadata-audit-card {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rose), #fff 76%), color-mix(in srgb, var(--paper), #fff 8%));
  text-align: left;
  box-shadow: 0 10px 20px rgba(72, 44, 33, 0.08);
}

.metadata-audit-card strong {
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 1.9rem;
  line-height: 1;
}

.metadata-audit-card span {
  font-weight: 800;
}

.metadata-audit-card small {
  color: var(--muted);
}

.active-audit-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent), #fff 35%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--rose), #fff 68%);
  color: var(--ink);
  font-weight: 800;
}

.soft-btn.tiny {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.85rem;
}

.top-books-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.top-book-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.top-book-card > span {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--wine);
  font-weight: 800;
}

.top-book-card .mini-cover {
  width: 74px;
  height: 106px;
}

.manual-top-books .top-book-card {
  align-content: start;
}

.manual-top-books .top-book-card button {
  justify-self: start;
  border: 0;
  padding: 0;
  background: transparent;
}

.manual-top-books .top-book-card input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 999px;
}

.genre-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.genre-stat-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 38%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--genre), #fff 58%), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--genre-soft), #fff 20%), var(--paper));
}

.genre-stat-title {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 0;
  color: color-mix(in srgb, var(--genre-dark), #000 16%);
  background: transparent;
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 1.25rem;
}

.genre-stat-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.genre-stat-kpis span {
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--genre), color-mix(in srgb, var(--genre), #000 24%));
  font-weight: 800;
}

.genre-stat-kpis small {
  color: rgba(255,255,255,.78);
  font-size: .68rem;
}

.mini-stat-lines {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .86rem;
}

.top-mini-books {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.top-mini-books button {
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 40%);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 6%);
}

.topic-cloud {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.topic-stat-chip {
  border-radius: 8px 20px 20px 8px;
}

.dashboard-dark-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(216,109,149,.34), transparent 30%),
    linear-gradient(135deg, #2b1720, #412436 56%, #21171a);
  box-shadow: 0 24px 44px rgba(58, 26, 37, .24);
}

.dashboard-dark-strip .metric-card {
  border-color: rgba(255,255,255,.12);
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
}

.dashboard-dark-strip .metric-card small,
.dashboard-dark-strip .metric-card p {
  color: rgba(255,255,255,.68);
}

.habit-calendar-book {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(111, 71, 42, .08) 0 49%, rgba(255,255,255,.22) 50% 51%, rgba(111, 71, 42, .08) 52%),
    color-mix(in srgb, var(--paper-deep), var(--paper) 62%);
}

.habit-calendar-title {
  margin-bottom: 10px;
  color: var(--wine);
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
}

.habit-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .74rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.book-habit.real-books {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.habit-book-placeholder {
  min-height: 42px;
}

.book-habit.real-books .habit-book {
  position: relative;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--copper), var(--line) 45%);
  border-radius: 4px 13px 13px 4px;
  color: var(--muted);
  background:
    linear-gradient(90deg, rgba(91, 54, 32, .28) 0 12%, transparent 13%),
    linear-gradient(135deg, var(--paper), var(--paper-deep));
  font-weight: 800;
  box-shadow: 0 5px 10px rgba(64, 39, 24, .12);
}

.book-habit.real-books .habit-book.open {
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255,255,255,.2) 0 47%, rgba(255,255,255,.48) 48% 52%, rgba(255,255,255,.16) 53%),
    linear-gradient(135deg, var(--wine), var(--rose));
}

.empty-reading-shelf {
  display: grid;
  place-items: center;
  min-height: 172px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper), #fff 8%);
  text-align: center;
}

.empty-reading-shelf span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 74px;
  border-radius: 4px 14px 14px 4px;
  color: var(--wine);
  background: var(--paper-deep);
  font-size: 2rem;
}

.level-preview {
  display: grid;
  gap: 8px;
}

.level-preview span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper), #fff 8%);
}

.level-preview span.active {
  color: #fff;
  background: linear-gradient(135deg, var(--wine), var(--rose));
}

.readable-card .section-head h3,
.readable-card .section-head span,
.stats-section .section-head h3,
.stats-section .section-head .meta {
  color: var(--ink);
  background: transparent;
}

.donut-chart span {
  color: var(--wine);
  background: transparent;
}

.donut-chart small {
  color: var(--muted);
  background: transparent;
}

.top-book-card strong,
.top-book-card small,
.topic-stat-chip strong,
.topic-stat-chip span,
.genre-stat-card,
.genre-stat-card * {
  overflow-wrap: anywhere;
}

.top-book-card strong,
.top-book-card small {
  white-space: normal;
}

.genre-stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.genre-stat-card {
  min-width: 0;
}

.genre-stat-kpis {
  grid-template-columns: repeat(5, minmax(42px, 1fr));
}

.genre-stat-kpis span {
  min-width: 0;
  text-align: center;
}

.challenge-page {
  display: grid;
  gap: 14px;
}

.challenge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  align-items: center;
}

.challenge-progress {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--wine), color-mix(in srgb, var(--wine), #000 22%));
}

.challenge-progress strong {
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 2rem;
}

.challenge-progress .progress {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.14);
}

.challenge-progress .progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

.challenge-tabs {
  flex-wrap: wrap;
}

.bingo-grid.bingo-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.challenge-list-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bingo-tile.done {
  border-color: color-mix(in srgb, var(--sage), var(--line) 28%);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--sage), var(--paper) 30%), color-mix(in srgb, var(--gold), var(--paper) 55%));
}

.book-challenge-marks {
  margin-top: 14px;
  border-color: color-mix(in srgb, var(--gold), var(--line) 45%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold), var(--paper) 72%), var(--paper));
}

.challenge-mark {
  display: inline-grid;
  gap: 2px;
  max-width: 280px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--gold), var(--line) 38%);
  border-radius: 8px 20px 20px 8px;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper), #fff 8%);
}

.challenge-mark strong {
  color: var(--wine);
  font-size: .76rem;
  text-transform: uppercase;
}

.app-context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 18px 36px rgba(32, 19, 13, .22);
}

.app-context-menu button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.app-context-menu button:hover {
  background: color-mix(in srgb, var(--rose), var(--paper) 72%);
}

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

.bingo-tile {
  display: grid;
  gap: 9px;
  min-height: 126px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.bingo-tile.done {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sage), var(--paper) 55%), var(--paper));
}

.badge-card.locked {
  filter: grayscale(.85);
  opacity: .56;
}

.badge-card.locked .badge-icon {
  background: linear-gradient(135deg, #9c9188, #6e625a);
}

@media (max-width: 980px) {
  .dash-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dash-main,
  .dashboard-columns,
  .stats-layout {
    grid-template-columns: 1fr;
  }

  .stats-kpis,
  .stats-layout.rich,
  .metadata-audit-row,
  .genre-stat-grid,
  .top-books-row,
  .topic-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-bars {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-height: 180px;
  }

  .stats-bar {
    height: 165px;
  }

  .bingo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-list.redesigned,
  .chapter-archive-grid,
  .profile-hero,
  .profile-two-col {
    grid-template-columns: 1fr;
  }

  .profile-dashboard,
  .profile-shortcuts,
  .record-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-filter-panel.open .archive-filter-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .dash-metrics,
  .month-strip,
  .bingo-grid,
  .profile-dashboard,
  .profile-shortcuts,
  .record-grid {
    grid-template-columns: 1fr;
  }

  .reading-card,
  .profile-photo-editor {
    grid-template-columns: 1fr;
  }

  .stats-kpis,
  .stats-layout.rich,
  .genre-stat-grid,
  .top-books-row,
  .topic-cloud,
  .format-pills,
  .metadata-audit-row,
  .country-grid {
    grid-template-columns: 1fr;
  }

  .stats-bars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.metric-card div,
.dashboard-dark-strip .metric-card div {
  min-width: 0;
}

.metric-card strong,
.metric-card p,
.metric-card small {
  overflow-wrap: anywhere;
  line-height: 1.08;
}

.dashboard-dark-strip .metric-card strong {
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
}

.book-habit.real-books {
  gap: 10px;
}

.book-habit.real-books .habit-book {
  display: grid;
  place-items: center;
  gap: 1px;
  min-height: 64px;
  aspect-ratio: 3 / 4;
  border-radius: 5px 16px 16px 5px;
}

.book-habit.real-books .habit-book span {
  color: inherit;
  font-family: "Lucida Bright", Georgia, serif;
  font-size: 1.05rem;
  line-height: 1;
}

.book-habit.real-books .habit-book small {
  color: inherit;
  opacity: .72;
  font-size: .7rem;
  line-height: 1;
}

.empty-reading-shelf {
  width: 100%;
  cursor: pointer;
}

.empty-reading-shelf small {
  color: var(--muted);
  font-size: .95rem;
}

.genre-stat-kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.rich-genre-stat {
  gap: 16px;
}

.genre-stat-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.genre-stat-panels > div,
.genre-top-manual {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 45%);
  border-radius: 16px;
  background: rgba(255, 255, 255, .42);
}

.genre-stat-panels h4,
.genre-top-manual h4 {
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--genre-dark), #000 14%);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.mini-distribution {
  display: grid;
  gap: 7px;
  max-height: 340px;
  overflow: auto;
  padding-right: 3px;
}

.genre-stat-panels > div:nth-child(1) .mini-distribution,
.genre-stat-panels > div:nth-child(2) .mini-distribution {
  height: 304px;
  align-content: start;
}

.mini-distribution button {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid color-mix(in srgb, var(--genre), var(--line) 35%);
  border-radius: 999px;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.mini-distribution button i {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 0;
  background: color-mix(in srgb, var(--genre), transparent 68%);
}

.mini-distribution button span,
.mini-distribution button strong {
  position: relative;
  z-index: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.08;
}

.author-review-panel {
  margin: 12px 0;
}

.author-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}

.author-review-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #f3dce7 34%);
  color: var(--ink);
  text-align: left;
}

.author-review-card strong,
.author-review-card small,
.author-review-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.author-review-card small {
  color: var(--muted);
}

.criteria-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.criteria-kpis span {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--genre-soft), #fff 44%);
  font-size: .82rem;
}

.genre-mini-trend {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  gap: 4px;
  height: 112px;
  padding: 8px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper), #fff 10%);
}

.genre-mini-trend span {
  position: relative;
  display: grid;
  place-items: start center;
  min-height: 7px;
  border-radius: 999px 999px 2px 2px;
  background: linear-gradient(180deg, var(--genre), color-mix(in srgb, var(--genre), #000 18%));
}

.genre-mini-trend span em {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  min-width: max-content;
  max-width: none;
  color: #fff;
  background: color-mix(in srgb, var(--genre), #000 18%);
  border: 1px solid color-mix(in srgb, var(--genre), #fff 38%);
  border-radius: 999px;
  padding: 2px 5px;
  font-size: .56rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: visible;
  writing-mode: horizontal-tb;
  box-shadow: 0 4px 10px rgba(36, 24, 18, .12);
}

.genre-mini-trend span small {
  align-self: end;
  color: color-mix(in srgb, var(--ink), transparent 20%);
  font-size: .55rem;
  transform: translateY(16px);
}

.top-book-card.compact {
  min-width: 0;
  padding: 8px;
}

.top-book-card.compact .mini-cover {
  width: 52px;
  height: 74px;
}

.badge-row.compact-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.challenge-hero {
  background:
    radial-gradient(circle at 92% 18%, rgba(255, 215, 90, .22), transparent 28%),
    linear-gradient(135deg, #fff7eb, #f8e2ec);
}

.bingo-grid.bingo-5 {
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.38) 0 49.5%, rgba(178,123,96,.18) 50%, rgba(255,255,255,.38) 50.5%),
    var(--paper-deep);
}

.bingo-tile {
  min-height: 148px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.28)),
    var(--paper);
  box-shadow: 0 7px 0 rgba(96, 61, 39, .08);
}

.bingo-tile .stamp {
  width: fit-content;
  color: #fff;
  background: var(--wine);
}

.bingo-tile.done {
  color: #fff;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.36), transparent 28%),
    linear-gradient(135deg, #5c8f69, #366446);
}

.challenge-task-preview {
  margin: 8px 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--rose), var(--paper) 72%);
}

.book-year-page {
  display: grid;
  gap: 16px;
}

.book-year-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  background:
    radial-gradient(circle at 90% 16%, rgba(216,109,149,.22), transparent 28%),
    linear-gradient(135deg, #fff7eb, #f5e2ec);
}

.month-winner-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.month-winner-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.month-winner-card input {
  width: 100%;
  min-width: 0;
}

.bracket-columns {
  display: grid;
  grid-template-columns: 1.1fr .9fr .8fr;
  gap: 14px;
}

.bracket-round {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper), #fff 8%);
}

.bracket-match {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 14px;
}

.bracket-match button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px;
  color: var(--ink);
  background: var(--paper);
  text-align: left;
}

.bracket-match .mini-cover {
  width: 54px;
  height: 78px;
  border-radius: 8px;
}

.bracket-match button.winner {
  border-color: var(--wine);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rose), #fff 45%), var(--paper));
}

.year-winner-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--wine), #321820);
}

.mini-cover.large,
.empty-cover.big {
  width: 96px;
  height: 138px;
}

@media (max-width: 1100px) {
  .month-winner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bracket-columns,
  .genre-stat-panels {
    grid-template-columns: 1fr;
  }

  .badge-row.compact-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .author-grid-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.profile-records.panel .stat,
.profile-records.panel .stat .label,
.profile-records.panel .stat .meta,
.profile-records.panel .stat strong {
  color: var(--ink) !important;
}

.profile-records.panel .stat .label,
.profile-records.panel .stat .meta {
  opacity: .76;
}

.profile-two-col {
  grid-template-columns: 1.15fr 1.4fr;
}

.profile-two-col .shelf {
  grid-template-columns: repeat(3, minmax(86px, 1fr));
}

.book-habit.real-books .habit-book span,
.book-habit.real-books .habit-book small {
  position: static;
  inset: auto;
  width: auto;
  border: 0;
}

.book-habit.real-books .habit-book {
  height: auto;
  overflow: hidden;
  padding: 7px 5px 6px 13px;
}

.archive-filter-panel {
  padding: 8px 12px;
  border-radius: 16px;
}

.archive-filter-panel .section-head {
  min-height: 38px;
}

.archive-filter-panel .compact-head h3 {
  font-size: .92rem;
}

.archive-filter-panel .soft-btn {
  min-height: 34px;
  padding: 7px 14px;
}

.archive-filter-panel.open .archive-filter-body {
  margin-top: 6px;
}

.genre-stat-grid {
  grid-template-columns: 1fr !important;
}

.rich-genre-stat {
  max-width: 100%;
}

.genre-stat-kpis {
  grid-template-columns: repeat(6, minmax(90px, 1fr));
}

.genre-stat-kpis span small {
  overflow-wrap: normal;
}

.mini-distribution button {
  grid-template-columns: minmax(0, 1fr) 44px;
  border-radius: 18px;
}

.mini-distribution button span {
  overflow-wrap: anywhere;
}

.criteria-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.criteria-kpis span {
  min-height: 70px;
  align-content: center;
  text-align: center;
}

.mini-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.mini-panel-head h4 {
  margin: 0;
}

.genre-mini-trend {
  height: 148px;
  padding: 12px 8px 22px;
}

.genre-mini-trend span {
  position: relative;
  display: block;
}

.genre-mini-trend span em {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
}

.genre-mini-trend span small {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: .62rem;
}

.authors-page {
  display: grid;
  gap: 14px;
}

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

.author-overview-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.28)), var(--paper);
  box-shadow: 0 14px 30px rgba(67, 41, 29, .08);
}

.author-overview-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 0;
  padding: 0;
  text-align: left;
  color: var(--ink);
  background: transparent;
}

.author-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--paper-deep);
  font-size: 1.4rem;
}

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

.author-overview-kpis span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--wine), #5b2937);
  font-weight: 800;
}

.author-overview-kpis small {
  font: .72rem var(--font-ui);
  opacity: .88;
}

.author-book-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.author-book-mini-row button {
  border: 0;
  padding: 0;
  background: transparent;
}

.author-book-mini-row .mini-cover {
  width: 34px;
  height: 48px;
  border-radius: 6px;
}

/* Hlasitá, neignorovatelná hláška, když se ukládání nepovede. */
.save-error-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(140%);
  max-width: min(680px, calc(100vw - 32px));
  z-index: 9999;
  padding: 14px 20px;
  border-radius: 14px;
  background: #b0122b;
  color: #fff;
  font: 600 .92rem/1.4 var(--font-ui);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

.save-error-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Přihlašovací překryv synchronizace (sync.js). */
#denikLoginOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 24, 32, .55);
  backdrop-filter: blur(6px);
}
#denikLoginOverlay .denik-login-card {
  width: min(400px, calc(100vw - 40px));
  padding: 30px 28px;
  border-radius: 20px;
  background: var(--paper, #fbf3ea);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  text-align: center;
}
#denikLoginOverlay h2 { margin: 0 0 6px; font: 800 1.4rem var(--font-display, serif); color: var(--wine, #7a2d43); }
#denikLoginOverlay p { margin: 0 0 16px; font: .9rem var(--font-ui, sans-serif); opacity: .8; }
#denikLoginOverlay form { display: flex; flex-direction: column; gap: 12px; }
#denikLoginOverlay input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(122, 45, 67, .3);
  font: 1rem var(--font-ui, sans-serif);
  background: #fff;
}
#denikLoginOverlay button {
  padding: 12px 14px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  background: var(--wine, #7a2d43);
  color: #fff;
  font: 700 1rem var(--font-ui, sans-serif);
}
#denikLoginOverlay button:hover { filter: brightness(1.08); }
#denikLoginOverlay .denik-login-error { min-height: 1.2em; margin: 0; color: #b0122b; font-weight: 600; }

/* ================================================================
   MOBILNÍ RESPONZIVITA — přidáno na KONEC souboru záměrně.
   V CSS vyhrává pozdější pravidlo, takže tohle přebije dřívější
   desktopová pravidla, která mobilní zalomení rušila.
   Vše je uvnitř @media (max-width: 760px) → DESKTOP se NEMĚNÍ.
   ================================================================ */
@media (max-width: 760px) {
  /* ---- Série: seznam ---- */
  .series-grid { grid-template-columns: 1fr !important; }
  .series-hero { grid-template-columns: 1fr !important; }
  .series-card-top { grid-template-columns: 1fr !important; }
  .series-controls-body { grid-template-columns: 1fr !important; }
  .series-dashboard,
  .series-dashboard.compact { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Filtry a taby sérií: vodorovné rolování místo přetečení */
  .series-tab-strip { display: flex !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; }
  .series-tab-strip > * { flex: 0 0 auto; }
  .series-filter-pills, .pills { flex-wrap: wrap; }

  /* ---- Série: detail ---- */
  .series-detail-hero { grid-template-columns: 1fr !important; }
  .series-dashboard.detail { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .author-edit-line { grid-template-columns: 1fr !important; }
  .series-book-strip { display: flex !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 10px; }
  .series-book-strip > * { flex: 0 0 auto; }

  /* ---- Autoři ---- */
  .author-grid-page { grid-template-columns: 1fr !important; }

  /* ---- Statistiky / žánry ---- */
  .genre-stat-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .criteria-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .genre-meter { grid-template-columns: 1fr !important; }
  .dark-stat { grid-template-columns: 1fr !important; }
  .genre-mini-trend { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; grid-auto-rows: 1fr; }

  /* ---- Obecná pojistka proti vodorovnému přetečení ---- */
  .stage { min-width: 0; }
  #view { min-width: 0; }
  img, .cover, .mini-cover { max-width: 100%; }
}

/* ================================================================
   VÝKON — content-visibility přeskočí vykreslení a načtení obrázků
   prvků MIMO obrazovku, dokud k nim uživatel nedoscrolluje.
   Vzhled se NEMĚNÍ (ověřeno: layout i počet obálek na řádek stejný),
   jen se výrazně zrychlí načtení a reakce (na testu 689 → ~150 ms).
   Platí na desktopu i mobilu — je to čistě rychlostní optimalizace.
   ================================================================ */
.shelf-book { content-visibility: auto; contain-intrinsic-size: auto 150px; }
.book-card { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.author-overview-card { content-visibility: auto; contain-intrinsic-size: auto 320px; }
.series-card { content-visibility: auto; contain-intrinsic-size: auto 260px; }

/* ================================================================
   MOBIL — 2. dávka oprav (na základě reálných screenshotů z iPhonu).
   Vše v @media (max-width: 760px) → DESKTOP se NEMĚNÍ.
   ================================================================ */
@media (max-width: 760px) {
  /* Detail žánru: KPI dlaždice z 5 sloupců na 2, aby se text nekrátil */
  .genre-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .genre-metric { min-height: 0; }
  .genre-metric span,
  .genre-metric small,
  .genre-metric strong { white-space: normal; overflow-wrap: anywhere; }

  /* Statistiky – rich žánr: text v KPI se zalamuje (grid už 2 sloupce z 1. dávky) */
  .genre-stat-kpis span,
  .genre-stat-kpis small { white-space: normal; overflow-wrap: anywhere; }

  /* Kniha roku: hero (popis | roky) pod sebe */
  .book-year-hero { grid-template-columns: 1fr !important; }

  /* Měsíční vítězky: z 3 sloupců na 2 a názvy knih se zalamují celé */
  .month-winner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .month-winner-card,
  .month-winner-card * { white-space: normal !important; overflow-wrap: anywhere; text-overflow: clip; }

  /* Roční pavouk pod sebe */
  .bracket-columns { grid-template-columns: 1fr !important; }

  /* Čtenářská výzva / bingo: z 5 (i 4) sloupců na 2, text se zalamuje */
  .bingo-grid,
  .bingo-grid.bingo-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bingo-tile,
  .bingo-tile * { white-space: normal !important; overflow-wrap: anywhere; }

  /* Dashboard: dvousloupcové karty (Právě čtu / Poslední přečtené) pod sebe,
     ať mají rovné a stejné okraje */
  .dashboard-columns,
  .dash-main { grid-template-columns: 1fr !important; }
}

/* ================================================================
   VÝKON STATISTIK + sbalení méně častých položek (2. dávka)
   ================================================================ */
/* Přeskočit vykreslení karet žánrů mimo obrazovku (na testu 3076 → ~400 ms) */
.genre-stat-card { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Rozbalovátko méně častých subžánrů/témat (pod 5 %) */
.mini-distribution-more { grid-column: 1 / -1; flex-basis: 100%; width: 100%; }
.mini-distribution-more > summary {
  cursor: pointer;
  list-style: none;
  padding: 7px 10px;
  font: 600 .8rem var(--font-ui);
  color: var(--wine);
  opacity: .82;
}
.mini-distribution-more > summary::-webkit-details-marker { display: none; }
.mini-distribution-more[open] > summary { opacity: 1; }
.mini-distribution-more .mini-distribution.rest { margin-top: 6px; }

@media (max-width: 760px) {
  /* Výzvy: hero (popis | pokrok) pod sebe */
  .challenge-hero { grid-template-columns: 1fr !important; }
}

/* ================================================================
   MOBIL – polička pod KAŽDÝM řádkem knih v knihovně.
   Na mobilu se řádek knih zalomí do víc vizuálních řad; místo jedné
   poličky dole nakreslíme opakované „prkno" pod každou řadu.
   Řada = výška obálky 172px + mezera 16px = perioda 188px.
   Desktop má dál jednu poličku (.shelf::after) – tady se nemění.
   ================================================================ */
@media (max-width: 760px) {
  .shelf::after { display: none !important; }
  .shelf {
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 172px,
      color-mix(in srgb, var(--copper), #fff 22%) 173px,
      color-mix(in srgb, var(--copper), #000 10%) 183px,
      transparent 185px,
      transparent 188px
    );
    background-origin: content-box;
    background-repeat: repeat;
  }
}