:root {
  --forest-950: #101b16;
  --forest-900: #17251d;
  --forest-850: #1c2d23;
  --forest-800: #24392c;
  --forest-700: #365642;
  --moss: #75866b;
  --sage: #a9b39d;
  --cream: #eee8dc;
  --parchment: #e6decf;
  --paper: #f6f1e7;
  --paper-deep: #d9ceba;
  --ink: #1f2b23;
  --ink-soft: #667064;
  --gold: #b28a4a;
  --terracotta: #9d604d;
  --serif: "Newsreader", Georgia, serif;
  --display: "Italiana", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --shadow: 0 30px 90px rgba(5, 12, 8, .42);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--sans);
  background:
    radial-gradient(90% 55% at 8% 2%, rgba(97, 125, 93, .18), transparent 56%),
    radial-gradient(75% 60% at 100% 15%, rgba(58, 94, 72, .16), transparent 65%),
    linear-gradient(140deg, var(--forest-900), #101d16 72%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
button, input, textarea, select { font: inherit; }
h1, h2, h3, p { margin-block: 0; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #d6c39e; outline-offset: 3px; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.forest-haze {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.forest-haze::before, .forest-haze::after {
  content: "";
  position: absolute;
  width: 44vw;
  height: 110vh;
  top: -8vh;
  opacity: .11;
  filter: blur(1px);
  background: repeating-linear-gradient(92deg, transparent 0 5.5vw, #8ba081 5.8vw 6vw, transparent 6.3vw 9vw);
  transform: rotate(-7deg);
}
.forest-haze::before { left: -12vw; }
.forest-haze::after { right: -13vw; transform: scaleX(-1) rotate(-7deg); }

.app-shell { width: min(1440px, 100%); margin: 0 auto; min-height: 100vh; padding: 0 52px 110px; }
.topbar {
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(225, 222, 205, .13);
}
.brand { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(230, 224, 207, .22); border-radius: 50%; }
.brand-mark svg { width: 29px; height: 29px; fill: var(--sage); stroke: none; }
.brand-name { display: block; font-family: var(--display); font-size: 25px; letter-spacing: .02em; line-height: 1; }
.brand-sub { display: block; margin-top: 5px; color: var(--sage); font-size: 9px; text-transform: uppercase; letter-spacing: .2em; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.round-btn, .add-btn {
  border: 1px solid rgba(225, 222, 205, .23);
  background: rgba(240, 235, 220, .05);
  cursor: pointer;
  transition: .25s ease;
}
.round-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.round-btn svg { width: 18px; }
.round-btn:hover { background: rgba(240, 235, 220, .12); transform: translateY(-2px); }
.add-btn { height: 42px; border-radius: 999px; padding: 0 18px; display: flex; gap: 8px; align-items: center; font-size: 12px; letter-spacing: .04em; }
.add-btn span { font-size: 18px; font-weight: 300; line-height: 0; }
.add-btn:hover { background: var(--cream); color: var(--forest-900); }

.search-wrap {
  width: min(620px, 100%);
  margin: 24px auto 0;
  position: relative;
  animation: reveal .25s ease both;
}
.search-wrap svg { position: absolute; top: 13px; left: 15px; width: 18px; color: var(--ink-soft); }
.search-wrap input { width: 100%; border: 0; border-radius: 999px; padding: 13px 82px 13px 44px; background: rgba(246,241,231,.96); color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.search-clear { position: absolute; top: 7px; right: 9px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--ink-soft); background: rgba(41,59,45,.09); cursor: pointer; font-size: 18px; line-height: 1; }
.search-clear:hover { color: var(--ink); background: rgba(41,59,45,.16); }
.search-status { position: absolute; top: 100%; right: 18px; margin-top: 7px; color: #8f9d8f; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.search-open .hero-copy { margin-top: 50px; }
@keyframes reveal { from { opacity: 0; transform: translateY(-7px); } }

.hero-copy { text-align: center; max-width: 680px; margin: 74px auto 64px; }
.eyebrow { margin: 0 0 14px; color: var(--sage); font-size: 10px; font-weight: 600; letter-spacing: .27em; text-transform: uppercase; }
.hero-copy h1, .page-heading h1 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.015em; }
.hero-copy h1 { font-size: clamp(46px, 6vw, 74px); line-height: .98; }
.hero-copy h1 em { color: #a8b39e; font-family: var(--serif); font-weight: 400; }
.hero-intro { width: min(530px, 100%); margin: 25px auto 0; color: #aeb8aa; font-family: var(--serif); font-size: 17px; line-height: 1.65; }
.hero-tip { display: inline-flex; gap: 8px; align-items: center; margin-top: 25px; color: #7e8e7f; font-size: 10px; text-transform: uppercase; letter-spacing: .16em; }
.hero-tip span { font-size: 15px; }

.shelves { display: flex; flex-direction: column; gap: 62px; }
.shelf-section { position: relative; }
.shelf-head { display: flex; align-items: flex-end; gap: 13px; margin-bottom: 24px; padding: 0 5px; }
.sh-index { color: #708071; font-family: var(--serif); font-style: italic; font-size: 12px; margin-bottom: 5px; }
.sh-name { font-family: var(--display); font-size: 28px; letter-spacing: .015em; }
.sh-sub { color: #839184; font-family: var(--serif); font-style: italic; font-size: 14px; margin-bottom: 4px; }
.sh-rule { height: 1px; flex: 1; margin: 0 12px 8px; background: rgba(220, 219, 200, .13); }
.sh-count { color: #819082; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
.shelf-body { position: relative; }
.shelf-row {
  --overlap: 86px;
  min-height: 258px;
  display: flex;
  align-items: flex-end;
  gap: 0;
  padding: 16px 46px 0 32px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #5f4b32 transparent;
  perspective: 1200px;
  scroll-padding-inline: 32px;
}
.shelf-row::before, .shelf-row::after { content: ""; flex: 0 0 1px; }
.shelf-row .book + .book { margin-left: calc(-1 * var(--overlap)); }
.shelf-row .book { z-index: calc(var(--book-index) + 1); }
.shelf-row.has-active .book { filter: brightness(.74) saturate(.8); }
.shelf-row.has-active .book.is-active { z-index: 50; transform: translateY(-22px) rotate(0deg) scale(1.035); filter: brightness(1.08) saturate(1); box-shadow: 14px 28px 38px rgba(1,7,4,.68), -2px 1px 4px rgba(255,255,255,.14); }
.shelf-row.has-active .book.is-active + .book { transform: translateX(52px) rotate(var(--lean)); }
.shelf-row.has-active .book:has(+ .book.is-active) { transform: translateX(-30px) rotate(var(--lean)); }
.shelf-board {
  height: 27px;
  position: relative;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 20%),
    repeating-linear-gradient(93deg, transparent 0 72px, rgba(35,19,9,.16) 73px, transparent 75px),
    linear-gradient(180deg, #8b6843 0, #67492d 36%, #49301e 100%);
  box-shadow: 0 15px 23px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.2), inset 0 -5px 8px rgba(30,18,10,.38);
}
.shelf-board::after { content: ""; position: absolute; inset: auto 2% -10px; height: 10px; background: #291b12; filter: blur(5px); opacity: .65; }
.shelf-empty { margin: 0; min-height: 150px; display: grid; place-items: center; border-bottom: 20px solid #5a3d27; color: #79877a; font-family: var(--serif); font-style: italic; }

.book {
  --lean: 0deg;
  position: relative;
  flex: 0 0 auto;
  width: 142px;
  height: 218px;
  border: 0;
  padding: 0;
  border-radius: 2px 6px 5px 2px;
  color: var(--cream);
  background: #293329;
  cursor: pointer;
  transform: rotate(var(--lean));
  transform-origin: 50% 100%;
  box-shadow: 7px 9px 17px rgba(1,7,4,.52), -2px 1px 4px rgba(255,255,255,.08);
  transition: transform .38s cubic-bezier(.2,.75,.2,1), filter .3s, margin .38s cubic-bezier(.2,.75,.2,1), box-shadow .38s;
  overflow: visible;
}
.book:nth-child(5n + 2) { --lean: -1.2deg; height: 225px; }
.book:nth-child(5n + 4) { --lean: .8deg; height: 211px; }
.book:nth-child(6n + 1) { width: 137px; }
.book:hover, .book:focus-visible {
  z-index: 5;
  transform: translateY(-20px) rotate(0deg) scale(1.025);
  filter: brightness(1.07);
  box-shadow: 12px 25px 35px rgba(1,7,4,.65), -2px 1px 4px rgba(255,255,255,.12);
}
.book img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.book::before { content: ""; position: absolute; z-index: 2; inset: 0 auto 0 0; width: 10px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,255,255,.1) 48%, transparent); pointer-events: none; }
.book::after { content: ""; position: absolute; z-index: 2; inset: 4px -4px 4px auto; width: 5px; background: repeating-linear-gradient(180deg, #d9d2c3 0 1px, #9f9789 1px 2px); border-radius: 0 2px 2px 0; opacity: .72; pointer-events: none; }
.cover-placeholder { height: 100%; padding: 21px 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(145deg, #4e654e, #25392c 68%, #17251d); border: 1px solid rgba(216,209,188,.22); border-radius: inherit; }
.cover-placeholder::before { content: "❦"; font-family: var(--serif); font-size: 27px; color: #b6c0aa; margin-bottom: 16px; }
.ph-title { font-family: var(--display); font-size: 16px; line-height: 1.2; }
.ph-author { margin-top: 10px; color: #b7c0b0; font-family: var(--serif); font-size: 11px; font-style: italic; }
.rate-dot { position: absolute; right: 7px; top: 7px; z-index: 3; padding: 4px 6px; border-radius: 999px; color: #f1d594; background: rgba(13,24,17,.84); font: 600 9px var(--sans); letter-spacing: .04em; box-shadow: 0 2px 8px rgba(0,0,0,.3); }

.empty-state { max-width: 560px; margin: 90px auto; padding: 58px; text-align: center; border: 1px solid rgba(223,220,201,.14); background: rgba(245,241,228,.035); box-shadow: var(--shadow); }
.search-empty { max-width: 480px; margin: 38px auto 0; padding: 30px 24px; text-align: center; color: #a9b4a8; border: 1px solid rgba(223,220,201,.12); background: rgba(245,241,228,.025); }
.search-empty p { margin: 0 0 16px; font: italic 16px/1.5 var(--serif); }
.search-empty .btn { color: var(--cream); border-color: rgba(238,232,220,.35); }
.empty-leaf { display: block; color: var(--sage); font: 44px var(--serif); }
.empty-state h2 { margin: 6px 0 12px; font: 34px var(--display); }
.empty-state p { color: #9eaa9d; font: 16px/1.6 var(--serif); }

.bottom-nav {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(223,220,201,.18);
  border-radius: 18px;
  background: rgba(19,32,24,.86);
  backdrop-filter: blur(18px);
  box-shadow: 0 15px 50px rgba(0,0,0,.38);
}
.nav-btn { width: 84px; height: 53px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: 12px; background: transparent; color: #7f8e80; font-size: 9px; letter-spacing: .08em; cursor: pointer; transition: .2s; }
.nav-btn svg { width: 19px; height: 19px; }
.nav-btn:hover { color: var(--cream); }
.nav-btn.is-active { color: #dfe3d7; background: rgba(230,231,214,.08); }

.inner-view { width: min(1000px, 100%); margin: 68px auto 0; }
.page-heading { margin-bottom: 38px; }
.page-heading h1 { font-size: clamp(43px, 5vw, 66px); }
.page-heading > p:last-child { color: var(--sage); font: 17px/1.6 var(--serif); }
.card { margin-bottom: 20px; padding: 27px; border: 1px solid #c9bda9; border-radius: 5px; color: var(--ink); background: linear-gradient(145deg, var(--paper), #e9e1d3); box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.card h3 { margin: 0 0 20px; color: var(--forest-700); font: 24px var(--display); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 1px; background: #cfc5b2; }
.tile { padding: 25px 15px; text-align: center; background: var(--paper); }
.num { color: var(--forest-700); font: 36px var(--display); }
.cap { margin-top: 6px; color: var(--ink-soft); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.bar-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.bl { width: 140px; font: 16px var(--serif); }
.bar-track { height: 8px; flex: 1; border-radius: 10px; background: rgba(40,65,48,.13); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#506c53,#8fa080); }
.bv { width: 26px; color: var(--ink-soft); font-size: 11px; text-align: right; }
.muted { color: var(--ink-soft); }
.journal-entry { margin: 0 0 18px; padding: 4px 0 16px 20px; border-left: 1px solid #97a08b; border-bottom: 1px solid rgba(45,61,49,.12); }
.je-kind { color: #788271; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.je-text { margin: 7px 0; font: italic 18px/1.55 var(--serif); }
.je-book { color: var(--forest-700); font: 14px var(--serif); }
.profile-name { width: min(100%, 440px); border: 0; border-bottom: 1px solid #928873; padding: 8px 0; color: var(--ink); background: transparent; font: 22px var(--serif); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.profile-grid .card { margin: 0; }
.session-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
#profile-body > .card { margin-bottom: 28px; }

.overlay { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 24px; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(5,12,8,.76); backdrop-filter: blur(10px); }
.add-panel, .confirm-panel { position: relative; z-index: 2; width: min(600px, 100%); max-height: 94vh; overflow: auto; padding: 39px 42px; color: var(--ink); background: linear-gradient(145deg, #f5f0e6, #e6ddce); border: 1px solid #c8b9a4; box-shadow: var(--shadow); animation: panelIn .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.panel-close, .detail-close { position: absolute; z-index: 6; border: 0; border-radius: 50%; cursor: pointer; }
.panel-close { width: 34px; height: 34px; right: 18px; top: 18px; color: var(--ink-soft); background: rgba(42,60,45,.08); font-size: 21px; }
.panel-title { margin: 0; font: 38px/1.1 var(--display); }
.panel-intro { margin: 13px 0 25px; color: var(--ink-soft); font: 15px/1.55 var(--serif); }
.add-form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { color: #5a675c; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.field input[type="text"], .field input[type="email"], .field input[type="password"] { width: 100%; border: 0; border-bottom: 1px solid #9f988a; padding: 11px 1px; color: var(--ink); background: transparent; font: 18px var(--serif); }
.field input::placeholder { color: #aaa294; }
.status-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill, .chip { border: 1px solid #a4a998; border-radius: 999px; color: #536257; background: transparent; cursor: pointer; transition: .2s; }
.pill { padding: 7px 13px; font-size: 11px; }
.pill:hover, .pill.is-on, .chip.is-on { color: var(--paper); border-color: var(--forest-700); background: var(--forest-700); }
.optional-upload { padding-top: 2px; color: var(--ink-soft); font-size: 12px; }
.optional-upload summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.optional-upload .field { margin-top: 13px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.btn { min-height: 41px; border: 1px solid transparent; border-radius: 999px; padding: 9px 19px; cursor: pointer; font-size: 11px; letter-spacing: .05em; transition: .2s; }
.btn-primary { color: var(--cream); background: var(--forest-700); }
.btn-primary:hover { background: var(--forest-800); transform: translateY(-1px); }
.btn-ghost { color: var(--forest-700); border-color: #9da493; background: transparent; }
.btn-ghost:hover { background: rgba(53,86,66,.08); }
.btn-danger { color: #fff4eb; background: #864c3c; }
.btn-danger:hover { background: #6d382c; }
.btn:disabled { opacity: .65; cursor: wait; }
.add-status { min-height: 17px; margin: -4px 0; color: var(--forest-700); font: italic 13px var(--serif); }
.add-status.error { color: #8c4034; }
.loader { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.confirm-panel { width: min(470px, 100%); }
.confirm-panel h2 { margin: 0; font: 34px var(--display); }
.confirm-panel > p:not(.eyebrow) { color: var(--ink-soft); font: 15px/1.6 var(--serif); }

.detail-overlay { z-index: 90; }
.detail-close { position: fixed; right: 24px; top: 24px; width: 43px; height: 43px; color: var(--cream); border: 1px solid rgba(255,255,255,.2); background: rgba(17,29,22,.55); font-size: 26px; }
.book-detail { position: relative; z-index: 2; width: min(1050px, 94vw); height: min(760px, 88vh); display: grid; grid-template-columns: minmax(280px, .78fr) minmax(430px, 1.22fr); color: var(--ink); background: #eee7da; box-shadow: 0 35px 100px rgba(0,0,0,.65); animation: bookOpen .6s cubic-bezier(.2,.75,.2,1) both; overflow: hidden; perspective: 1800px; }
@keyframes bookOpen { from { opacity: 0; transform: perspective(1200px) rotateY(-14deg) scale(.96); } }
.detail-cover-column { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 45px; background: radial-gradient(circle at 50% 30%, #405845, #1a2b21 70%); overflow: hidden; }
.detail-cover-column::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: url("pattern.svg"); background-size: 440px; }
.detail-book-object { position: relative; width: min(280px, 100%); max-height: 78%; display: grid; place-items: center; perspective: 900px; }
.detail-book-object::after { content: ""; position: absolute; z-index: -1; width: 78%; height: 20px; bottom: -13px; background: #07100b; filter: blur(12px); opacity: .7; }
.detail-cover { display: block; max-width: 100%; max-height: 520px; object-fit: contain; border-radius: 2px 7px 7px 2px; box-shadow: 14px 20px 35px rgba(0,0,0,.55); transform: rotateY(-3deg); }
.cover-fallback { width: 250px; aspect-ratio: .66; display: flex; align-items: center; justify-content: center; padding: 30px; text-align: center; color: var(--cream); background: linear-gradient(145deg,#4e654e,#1c3024); font: 29px/1.2 var(--display); border: 1px solid rgba(255,255,255,.2); box-shadow: 14px 20px 35px rgba(0,0,0,.55); }
.cover-side-toggle { position: relative; z-index: 2; margin-top: 26px; border: 1px solid rgba(231,231,213,.3); border-radius: 999px; padding: 7px 13px; color: #d8dfd2; background: rgba(15,28,20,.4); cursor: pointer; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; transition: .2s; }
.cover-side-toggle:hover { background: rgba(231,231,213,.12); }
.detail-gesture { position: absolute; bottom: 20px; color: #94a394; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.detail-gesture span { font-size: 17px; vertical-align: middle; }
.detail-page { position: relative; height: 100%; overflow-y: auto; padding: 52px 58px 54px 65px; background: radial-gradient(120% 100% at 75% 30%, #faf6ed, #eae1d2); box-shadow: inset 16px 0 25px -20px rgba(52,34,20,.55); }
.detail-page::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dp-head { position: relative; }
.dp-overline { color: #788270; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.dp-title { margin: 8px 0 0; font: 42px/1.04 var(--display); }
.dp-author { margin-top: 10px; color: var(--ink-soft); font: italic 17px var(--serif); }
.star-line { display: flex; align-items: center; gap: 10px; margin-top: 17px; }
.stars { display: inline-flex; color: var(--gold); font-size: 22px; letter-spacing: 2px; }
.st { cursor: pointer; transition: transform .15s; }
.st:hover { transform: scale(1.2); }
.rate-num { color: var(--ink-soft); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.dp-label { margin: 28px 0 10px; padding-bottom: 7px; color: var(--forest-700); border-bottom: 1px solid rgba(50,76,57,.18); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.dp-description { margin: 0; color: #3d483f; font: 16px/1.62 var(--serif); white-space: pre-wrap; }
.tag-row, .chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { display: inline-flex; gap: 5px; align-items: center; padding: 5px 10px; border-radius: 999px; color: var(--forest-700); background: rgba(64,91,69,.1); font-size: 10px; }
.tag button { border: 0; padding: 0; color: inherit; background: none; cursor: pointer; }
.tag-add { border: 1px dashed #9ca292; border-radius: 999px; padding: 5px 10px; color: var(--ink-soft); background: none; cursor: pointer; font-size: 10px; }
.chip { padding: 6px 10px; font-size: 10px; }
.dp-meta { display: flex; flex-wrap: wrap; gap: 17px 30px; }
.mi { display: flex; flex-direction: column; gap: 4px; }
.k { color: #7d8579; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.ink-input, .ink-date, .ink-select { border: 0; border-bottom: 1px dotted #9c9789; padding: 3px 0; color: var(--ink); background: transparent; font: 14px var(--serif); }
.written { width: 100%; min-height: 120px; resize: vertical; border: 0; padding: 2px 0; color: var(--ink); background: transparent; font: italic 17px/1.65 var(--serif); }
.written::placeholder { color: #a19c91; }
.note-count { display: block; text-align: right; color: #95978f; font-size: 8px; letter-spacing: .08em; }
.quote { position: relative; margin: 8px 0; padding: 4px 23px 4px 14px; border-left: 1px solid #75866f; font: italic 16px/1.5 var(--serif); }
.q-del { position: absolute; right: 0; top: 0; border: 0; color: #945c4e; background: none; cursor: pointer; }
.quote-add { display: flex; gap: 8px; align-items: end; margin-top: 10px; }
.quote-add .ink-input { flex: 1; }
.extra-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 8px; align-items: center; margin: 7px 0; font: 14px var(--serif); }
.dots { color: #667c66; letter-spacing: 4px; cursor: pointer; }
.er-num { color: var(--ink-soft); font-size: 10px; }
.rec-toggle { margin-top: 22px; border: 1px solid #93a08f; border-radius: 999px; padding: 8px 13px; color: var(--forest-700); background: transparent; cursor: pointer; font-size: 10px; }
.rec-toggle.is-on { color: var(--paper); background: var(--forest-700); }
.dp-actions { display: flex; justify-content: flex-end; margin-top: 28px; }

.hover-preview {
  position: fixed;
  z-index: 60;
  width: 590px;
  height: 360px;
  display: grid;
  grid-template-columns: 190px 1fr;
  color: var(--ink);
  filter: drop-shadow(0 28px 38px rgba(0,0,0,.5));
  pointer-events: none;
  transform-origin: 20% 100%;
  animation: previewOpen .35s cubic-bezier(.18,.8,.22,1) both;
  perspective: 1300px;
}
.hover-preview .preview-page { opacity: 1; transform: none; }
@keyframes previewOpen { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.preview-cover { position: relative; z-index: 2; padding: 16px; display: grid; place-items: center; background: #1e3326; border-radius: 5px 0 0 5px; box-shadow: inset -12px 0 20px -16px #000; }
.preview-cover img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 7px 10px 18px rgba(0,0,0,.45); }
.preview-spine { position: absolute; z-index: 4; left: 187px; top: 0; bottom: 0; width: 8px; background: linear-gradient(90deg, rgba(39,24,13,.52), rgba(255,255,255,.18), rgba(35,20,10,.35)); }
.preview-page { padding: 31px 35px 24px; overflow: hidden; border-radius: 0 6px 6px 0; background: radial-gradient(circle at 70% 30%, #faf6ed, #e8decb); box-shadow: inset 14px 0 22px -18px rgba(34,20,10,.6); }
.preview-kicker { margin: 0 0 7px; color: #768170; font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.preview-page h3 { margin: 0; font: 28px/1.05 var(--display); }
.preview-author { margin: 6px 0 9px; color: var(--ink-soft); font: italic 13px var(--serif); }
.preview-stars { color: var(--gold); font-size: 15px; letter-spacing: 1px; }
.preview-desc { display: -webkit-box; margin: 13px 0 0; overflow: hidden; color: #495249; font: 13px/1.5 var(--serif); -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.preview-note-wrap { margin-top: 13px; padding: 9px 12px; background: rgba(84,103,79,.09); border-left: 2px solid #82927c; }
.preview-note-wrap span { color: #758071; font-size: 7px; letter-spacing: .16em; text-transform: uppercase; }
.preview-note-wrap p { display: -webkit-box; margin: 3px 0 0; overflow: hidden; font: italic 12px/1.4 var(--serif); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.preview-action { position: absolute; right: 31px; bottom: 13px; margin: 0; color: #667668; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 11px 17px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; color: var(--cream); background: rgba(18,31,23,.94); box-shadow: 0 10px 40px rgba(0,0,0,.35); font-size: 11px; animation: toastIn .25s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } }

@media (hover: none), (max-width: 850px) { .hover-preview, .hero-tip { display: none !important; } }
@media (max-width: 900px) {
  .app-shell { padding-inline: 24px; }
  .book-detail { grid-template-columns: 38% 62%; }
  .detail-cover-column { padding: 25px; }
  .detail-page { padding: 44px 35px; }
  .profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app-shell { padding: 0 15px 95px; }
  .topbar { height: 75px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-mark svg { width: 24px; }
  .brand-name { font-size: 21px; }
  .brand-sub { display: none; }
  .add-btn { width: 42px; padding: 0; justify-content: center; font-size: 0; }
  .add-btn span { font-size: 20px; }
  .search-wrap { margin-top: 16px; }
  .search-status { right: 14px; }
  .search-open .hero-copy { margin-top: 36px; }
  .hero-copy { margin: 48px auto 40px; }
  .hero-copy h1 { font-size: 48px; }
  .hero-intro { font-size: 15px; }
  .shelves { gap: 40px; }
  .shelf-head { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; grid-template-areas: "name sub count" "rule rule rule"; align-items: baseline; column-gap: 8px; row-gap: 7px; margin-bottom: 10px; padding-inline: 4px; }
  .sh-index { display: none; }
  .sh-name { grid-area: name; font-size: 23px; white-space: nowrap; }
  .sh-sub { grid-area: sub; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .sh-rule { grid-area: rule; width: 100%; margin: 0; }
  .sh-count { grid-area: count; margin: 0; white-space: nowrap; }
  .shelf-row { --overlap: 72px; min-height: 200px; gap: 0; padding: 10px 30px 0 8px; scroll-padding-inline: 8px; scroll-snap-type: x proximity; }
  @media (hover: hover) {
    .shelf-row.has-active .book.is-active { transform: translateY(-20px) rotate(0deg) scale(1.025); }
    .shelf-row.has-active .book.is-active + .book { transform: translateX(42px) rotate(var(--lean)); }
    .shelf-row.has-active .book:has(+ .book.is-active) { transform: translateX(-24px) rotate(var(--lean)); }
  }
  .book, .book:nth-child(n) { width: 110px; height: 174px; scroll-snap-align: start; }
  .book:hover:not(.is-active) { transform: rotate(var(--lean)); }
  .shelf-board { height: 22px; }
  .bottom-nav { bottom: 12px; width: calc(100% - 24px); justify-content: space-around; }
  .nav-btn { width: auto; flex: 1; }
  .inner-view { margin-top: 43px; }
  .page-heading h1 { font-size: 44px; }
  .add-panel, .confirm-panel { padding: 34px 23px 26px; }
  .panel-title { font-size: 33px; }
  .form-actions { flex-wrap: wrap-reverse; }
  .form-actions .btn { flex: 1; }
  .detail-overlay { padding: 0; place-items: stretch; }
  .detail-close { top: 11px; right: 11px; color: var(--ink); border-color: rgba(30,45,34,.16); background: rgba(246,241,231,.85); }
  .book-detail { width: 100%; height: 100%; display: block; overflow-y: auto; }
  .detail-cover-column { min-height: 62vh; padding: 58px 56px; }
  .detail-cover { max-height: 49vh; }
  .detail-page { height: auto; min-height: 100vh; overflow: visible; padding: 45px 28px 60px; }
  .dp-title { font-size: 36px; }
  .detail-gesture { display: block; }
  .empty-state { padding: 42px 23px; }
  .bar-row { gap: 8px; }
  .bl { width: 105px; }
}

/* A narrow desktop preview/window still uses the laptop presentation. */
@media (max-width: 640px) and (hover: hover) and (pointer: fine) {
  .app-shell { padding: 0 18px 104px; }
  .topbar { height: 84px; }
  .brand { min-width: 0; gap: 9px; }
  .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; }
  .brand-mark svg { width: 23px; }
  .brand-name { font-size: 20px; }
  .brand-sub { display: block; font-size: 7px; letter-spacing: .12em; }
  .topbar-actions { gap: 7px; }
  .add-btn { width: 42px; padding: 0; justify-content: center; font-size: 0; }
  .add-btn span { font-size: 20px; }
  .hero-copy { margin: 54px auto 48px; }
  .hero-copy h1 { font-size: clamp(42px, 12vw, 60px); }
  .hero-intro { font-size: 16px; }
  .hero-tip { display: inline-flex !important; }
  .shelves { gap: 54px; }
  .shelf-head {
    display: flex;
    grid-template: none;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 18px;
    padding-inline: 4px;
  }
  .sh-index { display: inline; }
  .sh-name { font-size: 27px; white-space: nowrap; }
  .sh-sub { min-width: 0; flex: 0 1 auto; font-size: 13px; }
  .sh-rule { display: block; width: auto; flex: 1; margin: 0 5px 8px; }
  .sh-count { margin: 0 0 4px; white-space: nowrap; }
  .shelf-row { --overlap: 80px; min-height: 242px; padding: 15px 40px 0 20px; scroll-padding-inline: 20px; }
  .book, .book:nth-child(n) { width: 132px; height: 204px; }
  .book:nth-child(5n + 2) { height: 211px; }
  .book:nth-child(5n + 4) { height: 198px; }
  .bottom-nav { width: auto; bottom: 16px; }
  .nav-btn { width: 72px; flex: 0 0 auto; }
}

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