:root {
  --ink: #242031;
  --muted: #746f7e;
  --paper: #fbf8f2;
  --paper-2: #f3eee7;
  --cream: #fffaf1;
  --plum: #6f4b72;
  --plum-deep: #3c2a49;
  --rose: #c98d91;
  --sage: #718b78;
  --gold: #c7a661;
  --shadow: 0 20px 60px rgba(47, 35, 54, .14);
  --soft-shadow: 0 10px 30px rgba(47, 35, 54, .09);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(201,141,145,.18), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(113,139,120,.14), transparent 26%),
    linear-gradient(180deg, #fbf8f2 0%, #f6f0e9 100%);
  overflow-x: hidden;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid rgba(111,75,114,.22);
  outline-offset: 2px;
}

.ambient { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .35; pointer-events: none; z-index: -1; }
.ambient-one { width: 240px; height: 240px; background: #d8a4a7; top: 12%; left: -90px; }
.ambient-two { width: 300px; height: 300px; background: #9bb0a1; bottom: 5%; right: -130px; }

.glass { background: rgba(255,255,255,.72); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 12px 45px rgba(51,39,58,.08); }
.glass-soft { background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.74); box-shadow: 0 10px 35px rgba(51,39,58,.06); }

.app-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 130px; }
.topbar { position: sticky; top: 16px; z-index: 40; display: flex; align-items: center; justify-content: space-between; border-radius: 22px; padding: 10px 12px 10px 14px; margin-bottom: 24px; }
.brand { border: 0; background: transparent; display: flex; align-items: center; gap: 11px; cursor: pointer; padding: 0; text-align: left; }
.brand-mark { width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; background: var(--plum-deep); color: white; font-family: "Playfair Display", serif; font-weight: 700; letter-spacing: .03em; box-shadow: 0 8px 20px rgba(60,42,73,.18); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { font-family: "Playfair Display", serif; font-size: 17px; }
.brand-copy small { color: var(--muted); margin-top: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.reader-pill { border: 1px solid rgba(60,42,73,.08); background: #fff; min-height: 44px; border-radius: 16px; padding: 0 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; box-shadow: 0 6px 20px rgba(60,42,73,.06); }
.reader-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(201,141,145,.14); }
.chevron { opacity: .55; }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 16px; background: var(--plum-deep); color: white; font-size: 26px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 10px 26px rgba(60,42,73,.2); }
.icon-btn:hover { transform: translateY(-2px) rotate(4deg); box-shadow: 0 14px 30px rgba(60,42,73,.25); }

.view { display: none; animation: viewIn .45s ease both; }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hero { min-height: 530px; border-radius: 36px; padding: clamp(30px, 6vw, 72px); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; background:
  linear-gradient(135deg, rgba(255,255,255,.88), rgba(250,245,237,.75)),
  radial-gradient(circle at 85% 15%, rgba(201,141,145,.22), transparent 30%);
  box-shadow: var(--shadow); position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.88);
}
.hero::after { content: ""; position: absolute; width: 320px; height: 320px; border: 1px solid rgba(111,75,114,.08); border-radius: 50%; right: -100px; top: -120px; box-shadow: 0 0 0 45px rgba(111,75,114,.025), 0 0 0 90px rgba(111,75,114,.018); }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; color: var(--plum); margin: 0 0 12px; }
.hero h2, .page-heading h2, .sheet-header h2 { font-family: "Playfair Display", serif; }
.hero h2 { font-size: clamp(44px, 6vw, 78px); line-height: .98; margin: 0; letter-spacing: -.035em; font-weight: 700; }
.hero h2 span { color: var(--plum); font-style: italic; font-weight: 600; }
.hero-copy > p:not(.eyebrow) { max-width: 620px; font-size: 17px; line-height: 1.7; color: var(--muted); margin: 24px 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { border: 0; border-radius: 16px; padding: 14px 20px; font-weight: 700; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: linear-gradient(135deg, var(--plum-deep), #5e3d67); color: white; box-shadow: 0 14px 30px rgba(60,42,73,.22); }
.btn-primary:hover { box-shadow: 0 18px 36px rgba(60,42,73,.28); }
.btn-secondary { background: rgba(255,255,255,.75); border: 1px solid rgba(60,42,73,.08); box-shadow: 0 8px 18px rgba(60,42,73,.06); }
.btn-light { background: white; color: var(--plum-deep); }
.btn-large { padding: 16px 22px; min-width: 220px; }
.sparkle { display: inline-block; animation: sparkle 2.2s ease-in-out infinite; }
@keyframes sparkle { 0%,100% { transform: rotate(0) scale(1); opacity: .8; } 50% { transform: rotate(90deg) scale(1.25); opacity: 1; } }

.hero-visual { position: relative; min-height: 390px; display: grid; place-items: center; }
.book-stack { position: relative; width: 260px; height: 280px; transform: rotate(-5deg); }
.book { position: absolute; width: 210px; height: 68px; border-radius: 8px 14px 14px 8px; box-shadow: 0 18px 28px rgba(48,34,53,.13); display: flex; align-items: center; padding-left: 24px; font-family: "Playfair Display", serif; font-size: 22px; color: rgba(255,255,255,.9); overflow: hidden; }
.book::before { content: ""; width: 6px; height: 100%; background: rgba(255,255,255,.18); position: absolute; left: 12px; }
.book-a { background: linear-gradient(135deg, #7b597c, #4d3553); top: 36px; left: 22px; transform: rotate(7deg); animation: floatBook 5s ease-in-out infinite; }
.book-b { background: linear-gradient(135deg, #8da292, #637a69); top: 126px; left: 5px; transform: rotate(-3deg); animation: floatBook 5s .5s ease-in-out infinite; }
.book-c { background: linear-gradient(135deg, #d0a1a4, #b67f83); top: 210px; left: 38px; transform: rotate(4deg); animation: floatBook 5s 1s ease-in-out infinite; }
@keyframes floatBook { 0%,100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.floating-note { position: absolute; right: 6px; bottom: 20px; width: 190px; padding: 18px; background: #fff; border-radius: 18px; box-shadow: var(--soft-shadow); transform: rotate(5deg); color: var(--muted); font-family: "Playfair Display", serif; font-style: italic; line-height: 1.45; animation: noteFloat 6s ease-in-out infinite; }
@keyframes noteFloat { 0%,100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-10px); } }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 46px; }
.stat-card { border-radius: 22px; padding: 20px; display: flex; align-items: center; gap: 14px; }
.stat-icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--cream); border-radius: 16px; font-size: 22px; }
.stat-card div { display: grid; }
.stat-card strong { font-family: "Playfair Display", serif; font-size: 28px; }
.stat-card span:last-child { color: var(--muted); font-size: 13px; }

.section-block { margin: 54px 0; }
.section-heading, .page-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 22px; }
.section-heading h3 { font-family: "Playfair Display", serif; font-size: 30px; margin: 0; }
.text-link { background: transparent; border: 0; color: var(--plum); font-weight: 700; cursor: pointer; }
.horizontal-books { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x mandatory; }
.horizontal-books > * { scroll-snap-align: start; }

.book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.book-card { background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.88); border-radius: 24px; padding: 14px; box-shadow: var(--soft-shadow); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; min-width: 0; }
.book-card:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(51,39,58,.12); }
.book-cover { aspect-ratio: 2 / 3; border-radius: 17px; overflow: hidden; background: linear-gradient(145deg, #e7ded1, #cabfb2); position: relative; display: grid; place-items: center; color: rgba(60,42,73,.6); font-family: "Playfair Display", serif; text-align: center; padding: 14px; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,20,20,.10), transparent 12%); pointer-events: none; }
.book-card-body { padding: 13px 4px 4px; }
.book-card h4 { margin: 0; font-family: "Playfair Display", serif; font-size: 18px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.book-author { color: var(--muted); font-size: 13px; margin: 5px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 700; background: #f0ebe7; color: #6a605d; }
.status-badge.reading { background: rgba(113,139,120,.14); color: #51685a; }
.status-badge.finished { background: rgba(111,75,114,.12); color: var(--plum); }
.status-badge.want { background: rgba(201,141,145,.14); color: #9c6569; }
.rating-mini { font-size: 11px; color: #a78339; letter-spacing: .04em; }

.memory-banner { background: linear-gradient(135deg, #3c2a49, #5b3b61); color: white; border-radius: 30px; padding: 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; box-shadow: 0 24px 54px rgba(60,42,73,.2); position: relative; overflow: hidden; }
.memory-banner::after { content: "♡"; position: absolute; right: 18%; top: -50px; font-size: 170px; opacity: .035; transform: rotate(-14deg); }
.memory-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: rgba(255,255,255,.12); font-size: 28px; }
.memory-banner .eyebrow { color: #d9c7dc; }
.memory-banner h3 { font-family: "Playfair Display", serif; font-size: 28px; margin: 0 0 6px; }
.memory-banner p:not(.eyebrow) { margin: 0; color: rgba(255,255,255,.72); }

.page-heading { margin: 42px 0 26px; }
.page-heading h2 { margin: 0; font-size: clamp(42px, 6vw, 64px); }
.toolbar { border-radius: 22px; padding: 12px; margin-bottom: 22px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.search-wrap { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.8); border-radius: 15px; padding: 0 14px; }
.search-wrap input { border: 0; outline: 0; background: transparent; width: 100%; padding: 13px 0; }
.filter-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { border: 1px solid rgba(60,42,73,.08); background: rgba(255,255,255,.72); border-radius: 999px; padding: 9px 12px; cursor: pointer; font-size: 12px; font-weight: 700; }
.chip.active { background: var(--plum-deep); color: white; }

.memories-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.memory-card { background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.88); border-radius: 26px; padding: 22px; box-shadow: var(--soft-shadow); display: grid; grid-template-columns: 72px 1fr; gap: 16px; }
.memory-thumb { width: 72px; aspect-ratio: 2 / 3; border-radius: 13px; overflow: hidden; background: #ddd1c3; }
.memory-thumb img { width: 100%; height: 100%; object-fit: cover; }
.memory-card h4 { font-family: "Playfair Display", serif; font-size: 20px; margin: 0 0 3px; }
.memory-card blockquote { margin: 12px 0 0; padding-left: 14px; border-left: 2px solid rgba(111,75,114,.24); color: #625b67; line-height: 1.65; font-family: "Playfair Display", serif; font-style: italic; }
.memory-meta { font-size: 12px; color: var(--muted); }

.empty-state { grid-column: 1 / -1; border: 1px dashed rgba(60,42,73,.15); border-radius: 24px; padding: 40px 24px; text-align: center; color: var(--muted); background: rgba(255,255,255,.38); }
.empty-state .empty-icon { font-size: 38px; margin-bottom: 8px; }
.empty-state h4 { font-family: "Playfair Display", serif; color: var(--ink); font-size: 22px; margin: 0 0 8px; }

.bottom-nav { position: fixed; z-index: 45; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); border-radius: 22px; padding: 8px 10px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.nav-item { border: 0; background: transparent; color: #786f7d; display: grid; place-items: center; gap: 2px; padding: 6px; cursor: pointer; border-radius: 14px; }
.nav-item span { font-size: 20px; line-height: 1; }
.nav-item small { font-size: 10px; font-weight: 700; }
.nav-item.active { color: var(--plum-deep); background: rgba(111,75,114,.07); }
.nav-add { width: 48px; height: 48px; border-radius: 17px; border: 0; background: linear-gradient(135deg, #d4a2a5, #b7797e); color: white; font-size: 29px; display: grid; place-items: center; justify-self: center; cursor: pointer; box-shadow: 0 10px 25px rgba(183,121,126,.3); transition: transform .2s ease; }
.nav-add:hover { transform: translateY(-3px) rotate(4deg); }

.overlay { position: fixed; inset: 0; background: rgba(24,18,30,.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 70; }
.overlay.show { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 110%); width: min(700px, 100%); background: #fbf8f3; border-radius: 30px 30px 0 0; z-index: 80; padding: 20px clamp(20px, 5vw, 36px) 34px; box-shadow: 0 -25px 70px rgba(31,24,37,.22); transition: transform .35s cubic-bezier(.2,.9,.2,1); max-height: 86vh; overflow-y: auto; }
.sheet.show { transform: translate(-50%, 0); }
.sheet-tall { max-height: 92vh; }
.sheet-handle { width: 48px; height: 5px; border-radius: 99px; background: #d8d0c9; margin: 0 auto 14px; }
.sheet-close { position: absolute; right: 20px; top: 16px; width: 36px; height: 36px; border: 0; border-radius: 12px; background: rgba(60,42,73,.06); font-size: 22px; cursor: pointer; }
.sheet-header { padding-right: 46px; margin-bottom: 22px; }
.sheet-header.compact { margin-bottom: 14px; }
.sheet-header h2 { margin: 0 0 8px; font-size: 34px; }
.sheet-header p:not(.eyebrow) { margin: 0; color: var(--muted); }
.add-options { display: grid; gap: 12px; }
.option-card { width: 100%; border: 1px solid rgba(60,42,73,.08); background: white; border-radius: 20px; padding: 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; text-align: left; cursor: pointer; box-shadow: 0 8px 25px rgba(60,42,73,.05); transition: transform .2s ease, box-shadow .2s ease; }
.option-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(60,42,73,.1); }
.option-primary { background: linear-gradient(135deg, #44304f, #66466f); color: white; }
.option-icon { width: 48px; height: 48px; border-radius: 15px; background: rgba(111,75,114,.08); display: grid; place-items: center; font-size: 23px; }
.option-primary .option-icon { background: rgba(255,255,255,.12); }
.option-card span:nth-child(2) { display: grid; gap: 3px; }
.option-card small { opacity: .64; }
.option-arrow { font-size: 22px; }

.scanner-frame { min-height: 300px; border-radius: 24px; overflow: hidden; background: #15121b; position: relative; }
.scanner-placeholder { min-height: 300px; display: grid; place-items: center; color: rgba(255,255,255,.45); position: relative; }
.scanner-line { position: absolute; left: 12%; right: 12%; height: 2px; background: #dc9ea4; top: 35%; box-shadow: 0 0 16px rgba(220,158,164,.8); animation: scanLine 2.3s ease-in-out infinite; }
@keyframes scanLine { 0%,100% { top: 28%; opacity: .5; } 50% { top: 72%; opacity: 1; } }
#reader video { border-radius: 24px; }
.scanner-photo-label { cursor: pointer; text-align: center; }
.scan-status { text-align: center; margin: 12px 0; color: var(--muted); font-size: 13px; }
.scanner-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.book-form { display: grid; gap: 14px; }
.book-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; color: #5f5761; }
.book-form input, .book-form textarea, .book-form select { width: 100%; border: 1px solid #ded6cf; border-radius: 13px; background: white; padding: 12px 13px; color: var(--ink); outline: none; }
.book-form textarea { resize: vertical; }
.book-form input:focus, .book-form textarea:focus, .book-form select:focus { border-color: #bcaabd; box-shadow: 0 0 0 4px rgba(111,75,114,.07); }
.form-grid { display: grid; gap: 12px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.cover-editor { display: grid; grid-template-columns: 105px 1fr; gap: 14px; align-items: center; }
.cover-preview { aspect-ratio: 2/3; border-radius: 14px; overflow: hidden; background: linear-gradient(145deg, #8e668e, #4b354f); color: rgba(255,255,255,.78); display: grid; place-items: center; text-align: center; font-family: "Playfair Display", serif; font-size: 13px; letter-spacing: .08em; box-shadow: 0 10px 24px rgba(60,42,73,.16); }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-fields { display: grid; gap: 10px; }
.mini-btn { justify-self: start; border: 0; background: rgba(111,75,114,.09); color: var(--plum); font-weight: 700; padding: 8px 11px; border-radius: 10px; cursor: pointer; }
.form-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 6px 0 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; }
.form-divider::before, .form-divider::after { content: ""; height: 1px; background: #e1d9d2; }
.reader-tabs { display: flex; gap: 8px; }
.reader-tab { flex: 1; border: 1px solid #ded6cf; background: white; border-radius: 12px; padding: 10px; font-weight: 700; cursor: pointer; }
.reader-tab.active { background: var(--plum-deep); color: white; border-color: var(--plum-deep); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

.detail-hero { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: start; }
.detail-cover { aspect-ratio: 2/3; border-radius: 18px; overflow: hidden; background: #d7cbc0; box-shadow: var(--soft-shadow); }
.detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.detail-copy h2 { font-family: "Playfair Display", serif; font-size: 34px; line-height: 1.08; margin: 0 0 7px; }
.detail-author { color: var(--muted); margin: 0 0 16px; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.meta-pill { font-size: 11px; background: rgba(111,75,114,.07); border-radius: 999px; padding: 7px 9px; color: #62576a; }
.detail-records { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.record-card { border: 1px solid #e1d9d2; background: white; border-radius: 18px; padding: 16px; }
.record-card h4 { margin: 0 0 9px; font-family: "Playfair Display", serif; font-size: 19px; }
.record-card p { margin: 5px 0; color: var(--muted); font-size: 13px; }
.record-comment { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid #eee7e0; font-family: "Playfair Display", serif; font-style: italic; color: #5e5660 !important; line-height: 1.55; }
.detail-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.danger-btn { border: 0; background: rgba(170,59,59,.08); color: #a23f3f; border-radius: 14px; padding: 12px 15px; cursor: pointer; font-weight: 700; }

.popover { position: fixed; z-index: 90; top: 82px; right: max(16px, calc((100vw - min(1180px, calc(100% - 32px))) / 2)); width: 250px; padding: 8px; border-radius: 18px; opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; transition: .2s ease; }
.popover.show { opacity: 1; transform: none; pointer-events: auto; }
.popover button { width: 100%; border: 0; background: transparent; border-radius: 13px; padding: 10px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; text-align: left; cursor: pointer; }
.popover button:hover { background: rgba(111,75,114,.06); }
.avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--plum-deep); color: white; font-weight: 700; }
.popover button span:last-child { display: grid; }
.popover small { color: var(--muted); }

.settings-list { display: grid; gap: 9px; }
.settings-list button, .import-label { width: 100%; border: 1px solid #e2dad3; background: white; border-radius: 14px; padding: 14px; text-align: left; cursor: pointer; font-weight: 700; }
.settings-list .danger { color: #a04747; }

.intro-screen { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(circle at 20% 10%, rgba(201,141,145,.28), transparent 30%),
  radial-gradient(circle at 85% 80%, rgba(113,139,120,.22), transparent 32%),
  linear-gradient(135deg, #2a2032, #3c2a49 55%, #51364e); color: white; transition: opacity .7s ease, visibility .7s ease; overflow: hidden; }
.intro-screen.hidden { opacity: 0; visibility: hidden; }
.intro-card { width: min(610px, 100%); text-align: center; animation: introRise .9s cubic-bezier(.2,.85,.2,1) both; position: relative; z-index: 2; }
@keyframes introRise { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
.intro-mark { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); font-size: 24px; animation: introPulse 3s ease-in-out infinite; }
@keyframes introPulse { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(12deg); } }
.intro-card .eyebrow { color: #d5bccd; }
.intro-card h1 { font-family: "Playfair Display", serif; font-size: clamp(52px, 10vw, 86px); line-height: .98; margin: 0; letter-spacing: -.04em; }
.intro-card h1 em { color: #e4b4b8; font-weight: 600; }
.intro-copy { color: rgba(255,255,255,.7); line-height: 1.7; font-size: 16px; max-width: 520px; margin: 24px auto; }
.intro-signoff { margin: 18px 0 0; color: rgba(255,255,255,.48); font-family: "Playfair Display", serif; font-style: italic; }
.intro-stars { position: absolute; inset: 0; pointer-events: none; }
.intro-star { position: absolute; font-size: 9px; color: rgba(255,255,255,.55); animation: twinkle var(--dur) ease-in-out infinite; animation-delay: var(--delay); }
@keyframes twinkle { 0%,100% { opacity: .2; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.3) rotate(90deg); } }
.btn-arrow { transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }

.toast { position: fixed; z-index: 200; left: 50%; bottom: 96px; transform: translate(-50%, 18px); background: #2f2437; color: white; padding: 11px 15px; border-radius: 12px; box-shadow: 0 12px 28px rgba(30,22,35,.25); opacity: 0; pointer-events: none; transition: .25s ease; max-width: calc(100% - 32px); text-align: center; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { min-height: 330px; }
  .book-grid { grid-template-columns: repeat(3, 1fr); }
  .memory-banner { grid-template-columns: auto 1fr; }
  .memory-banner .btn { grid-column: 1 / -1; justify-self: start; }
  .memories-list { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
}

@media (max-width: 620px) {
  .app-shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
  .topbar { top: 8px; border-radius: 18px; }
  .brand-copy strong { font-size: 15px; }
  .brand-copy small { display: none; }
  .reader-pill { padding: 0 10px; }
  .hero { padding: 28px 22px; border-radius: 28px; gap: 18px; }
  .hero h2 { font-size: clamp(44px, 14vw, 64px); }
  .hero-copy > p:not(.eyebrow) { font-size: 15px; }
  .hero-visual { min-height: 280px; overflow: hidden; }
  .book-stack { transform: scale(.85) rotate(-5deg); }
  .floating-note { right: 4px; bottom: 4px; width: 158px; font-size: 13px; }
  .stats-grid { grid-template-columns: 1fr; margin-top: 12px; }
  .stat-card { padding: 15px; }
  .book-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .book-card { padding: 10px; border-radius: 19px; }
  .book-cover { border-radius: 14px; }
  .book-card h4 { font-size: 16px; }
  .section-block { margin: 42px 0; }
  .section-heading h3 { font-size: 26px; }
  .memory-banner { grid-template-columns: 1fr; padding: 24px; }
  .memory-icon { width: 50px; height: 50px; }
  .page-heading { align-items: start; }
  .page-heading h2 { font-size: 42px; }
  .bottom-nav { bottom: 8px; }
  .nav-item small { font-size: 9px; }
  .sheet { border-radius: 26px 26px 0 0; padding-left: 18px; padding-right: 18px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .cover-editor { grid-template-columns: 88px 1fr; }
  .detail-hero { grid-template-columns: 100px 1fr; }
  .detail-copy h2 { font-size: 26px; }
  .detail-records { grid-template-columns: 1fr; }
  .popover { right: 12px; top: 72px; }
}

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


/* --- Dreamy storybook theme overrides --- */
:root {
  --ink: #22333a;
  --muted: #64747a;
  --paper: #f7f5eb;
  --paper-2: #eef4ee;
  --cream: #fffdf5;
  --plum: #799c94;
  --plum-deep: #45656f;
  --rose: #d2a98e;
  --sage: #94b7a0;
  --gold: #e5c77e;
  --shadow: 0 24px 64px rgba(49, 78, 83, .14);
  --soft-shadow: 0 12px 34px rgba(49, 78, 83, .10);
  --radius: 28px;
}
body {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,247,212,.95) 0, rgba(255,247,212,.55) 18%, transparent 40%),
    radial-gradient(circle at 82% 10%, rgba(191,227,232,.78) 0, rgba(191,227,232,.25) 20%, transparent 42%),
    linear-gradient(180deg, #eaf7f3 0%, #f8f5ea 46%, #eef5f0 100%);
  overflow-x: hidden;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .18;
  background-image: radial-gradient(rgba(255,255,255,.8) 0.7px, transparent 0.8px);
  background-size: 18px 18px; mix-blend-mode: soft-light;
}
.cursor-glow {
  position: fixed; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,245,214,.72) 0%, rgba(162,214,214,.23) 42%, transparent 70%);
  pointer-events: none; z-index: 2; transform: translate(-50%, -50%); opacity: 0;
  transition: opacity .25s ease, transform .12s linear; filter: blur(8px);
}
.dreamscape { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.dream-cloud { position: absolute; border-radius: 999px; filter: blur(4px); opacity: .55; }
.dream-cloud-one { width: 320px; height: 92px; top: 10vh; left: -40px; background: rgba(255,255,255,.55); animation: cloudDrift 30s linear infinite; }
.dream-cloud-two { width: 250px; height: 70px; top: 18vh; right: -60px; background: rgba(255,255,255,.38); animation: cloudDrift 38s linear infinite reverse; }
.dream-hill { position: absolute; left: -10%; right: -10%; bottom: -6vh; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.dream-hill-back { height: 28vh; background: linear-gradient(180deg, rgba(141,184,164,.65), rgba(109,151,132,.82)); opacity: .65; }
.dream-hill-front { height: 20vh; background: linear-gradient(180deg, rgba(124,163,139,.75), rgba(91,131,114,.9)); }
@keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(120px); } }
.ambient { opacity: .42; filter: blur(10px); }
.app-shell, .intro-screen, .bottom-nav, .sheet, .popover, .toast { position: relative; z-index: 3; }
.glass { background: rgba(255, 255, 251, .64); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.78); box-shadow: 0 14px 40px rgba(71,101,103,.10); }
.glass-soft, .book-card, .memory-card, .stat-card, .toolbar, .memory-banner { background: rgba(255,255,250,.58); border: 1px solid rgba(255,255,255,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.topbar, .bottom-nav, .sheet, .popover { box-shadow: 0 14px 44px rgba(71,101,103,.14); }
.topbar::before, .hero::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(130deg, rgba(255,255,255,.3), rgba(255,255,255,0));
}
.brand-mark.brand-mark-illustrated { background: linear-gradient(180deg, #6f978d, #4f6d73); padding: 6px; }
.brand-mark.brand-mark-illustrated svg { width: 100%; height: 100%; display:block; }
.icon-btn, .reader-pill, .chip, .reader-tab, .mini-btn, .sheet-close, .nav-item, .nav-add { transition: transform .18s ease, box-shadow .18s ease, background .25s ease, color .25s ease; }
.icon-btn:hover, .reader-pill:hover, .chip:hover, .reader-tab:hover, .mini-btn:hover, .nav-item:hover, .nav-add:hover { transform: translateY(-2px); }
.book-card, .memory-card, .option-card, .stat-card, .hero-visual, .memory-banner, .toolbar, .sheet { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.book-card:hover, .memory-card:hover, .option-card:hover, .stat-card:hover { transform: translateY(-6px) rotate(.2deg); box-shadow: 0 16px 36px rgba(80,112,108,.14); }
.hero { position: relative; background: linear-gradient(135deg, rgba(255,255,255,.36), rgba(245,255,250,.20)); border: 1px solid rgba(255,255,255,.7); border-radius: 34px; padding: clamp(22px, 4vw, 34px); box-shadow: var(--shadow); overflow: hidden; }
.hero::after { content:''; position:absolute; width: 180px; height: 180px; right: -40px; top: -40px; border-radius:50%; background: radial-gradient(circle, rgba(255,240,201,.8) 0, rgba(255,240,201,0) 72%); }
.hero-visual { min-height: 400px; }
.book-stack { filter: drop-shadow(0 18px 30px rgba(77,105,103,.14)); }
.book { border-radius: 16px 16px 12px 12px !important; }
.book-a { background: linear-gradient(180deg, #6b9186, #4f6f6d) !important; }
.book-b { background: linear-gradient(180deg, #d4b084, #b98864) !important; }
.book-c { background: linear-gradient(180deg, #9bb7a6, #729186) !important; }
.floating-note { background: rgba(255,251,239,.76); color: #49656b; border: 1px solid rgba(255,255,255,.9); }
.intro-screen {
  background: radial-gradient(circle at 50% 18%, rgba(255,247,220,.92), rgba(255,247,220,.18) 30%, transparent 55%), linear-gradient(180deg, rgba(233,246,241,.98) 0%, rgba(247,243,230,.98) 100%);
}
.intro-card { position: relative; overflow: hidden; background: rgba(255,255,250,.62); border: 1px solid rgba(255,255,255,.86); box-shadow: 0 20px 70px rgba(72,98,95,.16); }
.intro-card::after { content:''; position:absolute; inset:auto -30px -30px auto; width:120px; height:120px; border-radius:50%; background: radial-gradient(circle, rgba(255,231,180,.8), transparent 70%); }
.intro-mark { background: linear-gradient(180deg, #6d938b, #4c6f73); box-shadow: 0 10px 22px rgba(74,107,106,.18); }
.eyebrow { letter-spacing: .13em; color: #6c8a86; }
.btn-primary { background: linear-gradient(135deg, #5e817f, #73948d); color: #fffef8; box-shadow: 0 12px 24px rgba(94,129,127,.22); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(94,129,127,.3); }
.btn-secondary, .btn-light { background: rgba(255,255,255,.72); border-color: rgba(116,148,141,.18); color: #36545d; }
.memory-banner { background: linear-gradient(135deg, rgba(250,246,235,.84), rgba(233,247,241,.76)); }
.reader-pill { background: rgba(255,255,255,.7); }
.reader-dot { background: linear-gradient(180deg, #9ab9a1, #6f9386) !important; }
.reader-tab.active, .chip.active, .nav-item.active { background: linear-gradient(135deg, rgba(126,162,152,.16), rgba(93,123,123,.12)); color: #35535d; }
.bottom-nav { background: rgba(255,255,252,.7); border: 1px solid rgba(255,255,255,.84); }
.nav-add { background: linear-gradient(135deg, #6b9388, #507173); color:white; box-shadow: 0 10px 20px rgba(80,113,115,.2); }
.sheet { background: linear-gradient(180deg, #fbfbf6 0%, #f3f7ef 100%); }
.popover { background: rgba(251,251,247,.8); }
.toolbar, .book-card, .memory-card, .stat-card, .memory-banner, .option-card, .cover-preview, .scanner-frame, .detail-hero, .record-card { border-color: rgba(255,255,255,.92) !important; }
.book-cover, .memory-thumb, .detail-cover, .cover-preview { background: linear-gradient(180deg, rgba(112,146,138,.12), rgba(255,252,239,.92)); }
.scan-status, .meta-pill, .status-badge, .toast { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.toast { background: rgba(55,85,91,.84); }
.sound-btn.is-on { background: linear-gradient(135deg, #f0d07c, #d9a96b); color: #324b53; }
.floating-charms { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.floating-charm {
  position: absolute; display: grid; place-items: center;
  width: var(--size, 28px); height: var(--size, 28px);
  border-radius: 999px; font-size: calc(var(--size, 28px) * .52);
  color: rgba(54,82,90,.7); background: rgba(255,255,255,.25);
  box-shadow: 0 8px 20px rgba(96,122,120,.06);
  animation: charmFloat var(--dur, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s); transform: translate3d(0,0,0);
}
@keyframes charmFloat {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,-14px,0) rotate(3deg); }
}
/* tiny parallax targets */
.parallax-soft { transition: transform .25s ease-out; will-change: transform; }
@media (max-width: 720px) {
  .cursor-glow { display:none; }
  .hero-visual { min-height: 310px; }
  .floating-charm { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-charm, .dream-cloud-one, .dream-cloud-two, .intro-star, .book, .ambient, .scanner-line { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* =========================================================
   DREAMY BIRTHDAY WORLD — presentation layer v2
   Calm hand-painted fantasy animation inspired atmosphere.
   ========================================================= */
:root {
  --sky-mist: #dceee8;
  --sky-blue: #c9e4e6;
  --meadow: #8faf98;
  --meadow-deep: #557a70;
  --moss: #718f79;
  --sunlight: #f2d28a;
  --peach: #d9ad90;
  --ink: #25373a;
  --muted: #6f7f7d;
  --cream: #fffdf2;
  --paper: #f8f6ea;
  --plum: #769a90;
  --plum-deep: #486d6d;
  --rose: #d6aa8b;
}

body {
  background:
    radial-gradient(circle at 14% 8%, rgba(255,245,205,.88), transparent 27%),
    radial-gradient(circle at 86% 13%, rgba(200,231,231,.72), transparent 31%),
    linear-gradient(180deg, #dfeee9 0%, #eff5ec 30%, #faf6e8 62%, #e8f0e7 100%);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle at 20% 35%, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.75) 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 70%, rgba(255,244,200,.72) 0 1px, transparent 1.5px);
  background-size: 31px 31px, 47px 47px, 61px 61px;
}

.dreamscape::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(255,249,228,.2));
}
.dream-cloud { box-shadow: inset 0 -16px 28px rgba(181,211,204,.15); }
.dream-hill-back { filter: blur(.2px); }
.dream-hill-front::before,
.dream-hill-front::after {
  content: '';
  position: absolute;
  bottom: 73%;
  width: 140px;
  height: 150px;
  border-radius: 60% 60% 42% 42%;
  background: radial-gradient(ellipse at center, rgba(71,112,91,.6) 0 52%, transparent 54%);
  opacity: .28;
}
.dream-hill-front::before { left: 9%; transform: rotate(-4deg); }
.dream-hill-front::after { right: 12%; transform: rotate(6deg) scale(.82); }

.topbar { border-color: rgba(255,255,255,.92); }
.brand-mark.brand-mark-illustrated {
  background: linear-gradient(155deg, #73998d, #456c6d);
  box-shadow: 0 8px 20px rgba(68,106,105,.18), inset 0 1px 0 rgba(255,255,255,.24);
}
.brand-mark.brand-mark-illustrated:hover svg { animation: tinyBookWiggle 1.1s ease; }
@keyframes tinyBookWiggle {
  0%,100% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(-4deg) translateY(-1px); }
  70% { transform: rotate(3deg) translateY(-2px); }
}

.hero {
  background:
    linear-gradient(135deg, rgba(255,255,250,.72), rgba(236,247,239,.38)),
    radial-gradient(circle at 84% 18%, rgba(246,220,157,.35), transparent 28%);
  border-color: rgba(255,255,255,.88);
}
.hero-copy h2 span { color: #668d82; }
.hero-visual::before {
  content:'✦';
  position:absolute;
  right: 14%;
  top: 7%;
  color: rgba(231,190,98,.62);
  font-size: 20px;
  animation: twinkle 3.2s ease-in-out infinite;
}
.hero-visual::after {
  content:'☾';
  position:absolute;
  left: 4%;
  top: 18%;
  color: rgba(85,118,111,.35);
  font-size: 30px;
  transform: rotate(-18deg);
}

/* Birthday entrance — a quiet illustrated world */
.intro-screen {
  color: #284044;
  isolation: isolate;
  background:
    radial-gradient(circle at 68% 18%, rgba(255,241,190,.82), transparent 22%),
    linear-gradient(180deg, #cae4e5 0%, #dfeee5 46%, #f7f1d9 100%);
  transition: opacity 1s ease, visibility 1s ease;
}
.intro-screen::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background: linear-gradient(180deg, rgba(255,255,255,.1), transparent 40%, rgba(85,126,103,.12));
}
.intro-screen.opening .intro-card {
  animation: introStepInside .95s cubic-bezier(.2,.75,.15,1) forwards;
}
@keyframes introStepInside {
  0% { opacity:1; transform: scale(1); filter: blur(0); }
  55% { opacity:.84; transform: scale(1.025); filter: blur(0); }
  100% { opacity:0; transform: scale(1.09); filter: blur(4px); }
}
.intro-card {
  width: min(650px, 100%);
  padding: clamp(26px, 5vw, 44px);
  border-radius: 38px;
  background: rgba(255,253,241,.62);
  box-shadow: 0 28px 90px rgba(65,98,91,.16);
  backdrop-filter: blur(17px);
  -webkit-backdrop-filter: blur(17px);
}
.intro-card .eyebrow { color:#64877f; }
.intro-card h1 { color:#284044; text-shadow: 0 2px 0 rgba(255,255,255,.48); }
.intro-card h1 em { color:#bd866f; }
.intro-copy { color: rgba(41,64,67,.72); }
.intro-signoff { color: rgba(52,80,79,.6); }
.intro-sound-note {
  margin: 12px 0 0;
  font-size: 10px;
  letter-spacing: .07em;
  color: rgba(54,82,80,.48);
}
.intro-mark-book {
  width: 72px;
  height: 72px;
  padding: 7px;
  background: linear-gradient(155deg, #789d91, #537778);
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 12px 30px rgba(71,106,103,.18);
}
.intro-mark-book svg { width:100%; height:100%; }
.intro-stars { z-index: 0; }
.intro-star { color: rgba(255,248,205,.94); text-shadow: 0 0 10px rgba(244,210,126,.45); }

.intro-landscape { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.intro-moon {
  position:absolute; width:108px; height:108px; border-radius:50%; right:13vw; top:8vh;
  background: radial-gradient(circle at 38% 38%, #fff8d3 0 28%, #f4d98d 62%, rgba(244,217,141,.25) 72%, transparent 74%);
  filter: drop-shadow(0 0 26px rgba(245,217,139,.35));
  animation: moonBreath 7s ease-in-out infinite;
}
@keyframes moonBreath { 50% { transform: scale(1.025); filter: drop-shadow(0 0 38px rgba(245,217,139,.48)); } }
.intro-tree {
  position:absolute; bottom:-24px; width:190px; height:250px; opacity:.23;
  background:
    radial-gradient(ellipse at 50% 26%, #365f52 0 33%, transparent 34%),
    radial-gradient(ellipse at 25% 45%, #426e5b 0 27%, transparent 28%),
    radial-gradient(ellipse at 72% 48%, #315a50 0 30%, transparent 31%),
    linear-gradient(90deg, transparent 45%, #5f735b 46% 54%, transparent 55%);
  filter: blur(.15px);
}
.tree-one { left:-30px; transform: scale(1.18); }
.tree-two { left:16vw; transform: scale(.68); opacity:.16; bottom:-64px; }
.tree-three { right:-36px; transform: scale(1.02); }
.intro-cottage { position:absolute; left:50%; bottom:6vh; width:118px; height:92px; transform:translateX(-50%); opacity:.24; }
.cottage-body { position:absolute; left:18px; right:12px; bottom:0; height:55px; border-radius:8px 8px 3px 3px; background:#52766a; }
.cottage-roof { position:absolute; left:6px; right:0; top:4px; height:50px; background:#9b765d; clip-path:polygon(50% 0, 100% 78%, 0 78%); }
.cottage-window { position:absolute; width:18px; height:22px; left:50px; bottom:17px; border-radius:5px; background:#f2d27e; box-shadow:0 0 20px rgba(242,210,126,.52); }
.cottage-chimney { position:absolute; width:10px; height:28px; right:24px; top:8px; background:#6e6657; transform:rotate(2deg); }
.intro-mist { position:absolute; z-index:0; pointer-events:none; width:70vw; height:24vh; border-radius:50%; filter:blur(28px); background:rgba(255,255,255,.34); animation: mistDrift 16s ease-in-out infinite alternate; }
.intro-mist-a { left:-20vw; bottom:18vh; }
.intro-mist-b { right:-22vw; bottom:7vh; animation-delay:-6s; }
@keyframes mistDrift { to { transform:translateX(7vw) translateY(-8px); opacity:.68; } }

/* two translucent storybook pages peel away when entering */
.intro-door { position:absolute; top:0; bottom:0; width:51%; z-index:5; pointer-events:none; opacity:0; }
.intro-door-left { left:0; transform-origin:left center; background:linear-gradient(90deg, rgba(226,240,232,.92), rgba(252,247,226,.72)); }
.intro-door-right { right:0; transform-origin:right center; background:linear-gradient(270deg, rgba(226,240,232,.92), rgba(252,247,226,.72)); }
.intro-screen.opening .intro-door { opacity:.55; animation-duration:1.05s; animation-timing-function:cubic-bezier(.25,.75,.2,1); animation-fill-mode:forwards; }
.intro-screen.opening .intro-door-left { animation-name:openPageLeft; }
.intro-screen.opening .intro-door-right { animation-name:openPageRight; }
@keyframes openPageLeft { from { transform:translateX(-100%); } 45% { transform:translateX(0); } to { transform:translateX(-104%); } }
@keyframes openPageRight { from { transform:translateX(100%); } 45% { transform:translateX(0); } to { transform:translateX(104%); } }

/* Floating magical motifs: intentionally tiny, decorative and generic. */
.floating-charm {
  color: rgba(54,82,90,.63);
  background: rgba(255,255,249,.22);
  border: 1px solid rgba(255,255,255,.34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.floating-charm:nth-child(3n) { color:rgba(178,126,91,.56); }
.floating-charm:nth-child(4n) { filter:blur(.05px); }

/* A small, fading wand-light tail on fine-pointer devices. */
.cursor-spark {
  position:fixed;
  z-index:6;
  height:2px;
  border-radius:999px;
  pointer-events:none;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,255,238,1), rgba(255,229,149,.9) 45%, rgba(240,208,128,0));
  box-shadow:0 0 5px 1px rgba(255,240,181,.85), 0 0 13px 2px rgba(240,208,128,.58);
  animation:cursorSpark .42s ease-out forwards;
}
@keyframes cursorSpark {
  from { opacity:.92; }
  to { opacity:0; }
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-spark { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-glow { transition:none; }
}

.sound-btn { font-size:18px; }
.sound-btn::after { content:''; display:block; width:4px; height:4px; margin:-2px auto 0; border-radius:50%; background:rgba(255,255,255,.6); opacity:.5; }
.sound-btn.is-on { animation:soundGlow 3s ease-in-out infinite; }
@keyframes soundGlow { 50% { box-shadow:0 10px 28px rgba(217,169,107,.34), 0 0 0 5px rgba(240,208,124,.08); } }

@media (max-width: 620px) {
  .intro-card { border-radius:30px; padding:28px 20px; }
  .intro-card h1 { font-size:clamp(48px, 15vw, 66px); }
  .intro-moon { width:76px; height:76px; right:7vw; top:7vh; }
  .intro-cottage { bottom:3vh; transform:translateX(-50%) scale(.76); }
  .intro-tree { opacity:.14; }
  .floating-charm { transform:scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-screen.opening .intro-door,
  .intro-screen.opening .intro-card,
  .intro-mist,
  .intro-moon,
  .sound-btn.is-on,
  .cursor-spark { animation:none !important; }
}

/* ================================
   DREAMY V4 — multi-view flow + moving storybook characters
   ================================ */

body[data-view="add"] .bottom-nav,
body[data-view="scan"] .bottom-nav,
body[data-view="bookForm"] .bottom-nav,
body[data-view="detail"] .bottom-nav,
body[data-view="settings"] .bottom-nav { opacity:.32; transform:translateY(8px) scale(.985); }

.flow-view {
  width:min(980px, calc(100% - 28px));
  margin:0 auto;
  min-height:calc(100vh - 125px);
  padding:34px 0 130px;
}
.flow-top {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
  margin:10px 0 24px;
}
.flow-top h2 {
  margin:0 0 7px;
  font-family:"Playfair Display", serif;
  font-size:clamp(32px, 6vw, 58px);
  line-height:1.02;
  color:#304e52;
}
.flow-top p:not(.eyebrow) { margin:0; max-width:650px; color:var(--muted); }
.back-button {
  width:48px; height:48px; border-radius:50%; border:1px solid rgba(74,101,97,.13);
  background:rgba(255,255,255,.74); backdrop-filter:blur(15px); color:#486663;
  font-size:23px; box-shadow:0 12px 26px rgba(67,91,90,.1); cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.back-button:hover { transform:translateX(-4px) scale(1.04); background:#fffdf6; box-shadow:0 18px 36px rgba(67,91,90,.15); }
.flow-card {
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.88);
  background:linear-gradient(160deg, rgba(255,255,250,.88), rgba(238,246,238,.84));
  box-shadow:0 24px 70px rgba(57,87,84,.12);
  border-radius:34px;
  padding:clamp(22px, 4vw, 44px);
  backdrop-filter:blur(22px);
}
.flow-card::before {
  content:""; position:absolute; inset:-60% -35% auto auto; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(246,220,148,.16), transparent 67%); pointer-events:none;
}
.magical-entry-card { min-height:520px; display:grid; grid-template-columns:minmax(250px,.8fr) 1.2fr; gap:36px; align-items:center; }
.add-page-illustration {
  min-height:330px; position:relative; display:grid; place-items:center;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,241,189,.55), transparent 20%),
    linear-gradient(180deg, rgba(171,202,193,.2), rgba(100,139,125,.09));
}
.portal-book { font-size:92px; filter:drop-shadow(0 16px 22px rgba(53,74,70,.18)); animation:bookBreathe 4.6s ease-in-out infinite; }
.portal-spark { position:absolute; color:#e6bf69; text-shadow:0 0 14px #fff3b2; animation:portalSpark 3s ease-in-out infinite; }
.portal-spark.p1{left:24%;top:24%}.portal-spark.p2{right:22%;top:34%;animation-delay:-1s}.portal-spark.p3{left:42%;bottom:17%;animation-delay:-1.8s}
.flow-card .add-options { gap:16px; }
.flow-card .option-card { min-height:112px; border-radius:25px; padding:22px; background:rgba(255,255,255,.78); }
.flow-card .option-icon { width:55px; height:55px; border-radius:19px; display:grid; place-items:center; background:rgba(112,146,138,.12); font-size:26px; }
.flow-card .option-card strong { font-size:17px; color:#36575a; }

.scanner-page { max-width:760px; margin:0 auto; }
.scanner-page .scanner-frame { min-height:430px; border-radius:30px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 50px rgba(24,39,39,.16); }
.scanner-page .scanner-actions { margin-top:18px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.form-page-card { max-width:900px; margin:0 auto; }
.form-page-card .book-form { gap:18px; }
.form-page-card .cover-editor { padding:18px; border-radius:24px; background:rgba(255,255,255,.48); }
.detail-page-card { max-width:900px; margin:0 auto; }
.settings-page-card { max-width:680px; margin:0 auto; }
.settings-page-card .settings-list { display:grid; gap:12px; }

/* Make each view feel like a page entering, not a hidden section of one page. */
.view.active { animation:pageDoorIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pageDoorIn { from { opacity:0; transform:translateY(18px) scale(.992); filter:blur(4px);} to { opacity:1; transform:none; filter:none;} }
@keyframes bookBreathe { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(2deg)} }
@keyframes portalSpark { 0%,100%{transform:scale(.6) rotate(0);opacity:.25} 50%{transform:scale(1.25) rotate(90deg);opacity:1} }

/* Tiny storybook magical characters: original silhouettes, not direct character copies. */
.storybook-actors { position:fixed; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.magic-actor { position:absolute; opacity:.82; filter:drop-shadow(0 8px 10px rgba(55,72,71,.14)); }
.magic-actor svg { width:100%; height:auto; overflow:visible; }

.owl-flight { width:78px; top:17%; left:-100px; animation:owlAcross 24s linear infinite; }
.owl-flight .owl-wing-left { transform-origin:31px 31px; animation:wingLeft .58s ease-in-out infinite alternate; }
.owl-flight .owl-wing-right { transform-origin:59px 31px; animation:wingRight .58s ease-in-out infinite alternate; }
@keyframes owlAcross {
  0%{transform:translate3d(-130px,12vh,0) scale(.8) rotate(-5deg)}
  22%{transform:translate3d(27vw,-2vh,0) scale(.94) rotate(3deg)}
  48%{transform:translate3d(58vw,8vh,0) scale(.8) rotate(-3deg)}
  72%{transform:translate3d(82vw,-5vh,0) scale(.94) rotate(4deg)}
  100%{transform:translate3d(calc(100vw + 160px),5vh,0) scale(.75) rotate(-4deg)}
}
@keyframes wingLeft { from{transform:rotate(8deg)} to{transform:rotate(-30deg)} }
@keyframes wingRight { from{transform:rotate(-8deg)} to{transform:rotate(30deg)} }

.broom-rider { width:115px; right:-160px; top:31%; opacity:.7; animation:broomSweep 31s ease-in-out infinite; }
@keyframes broomSweep {
  0%,8%{transform:translate3d(0,0,0) rotate(-4deg);opacity:0}
  12%{opacity:.72}
  45%{transform:translate3d(-52vw,-9vh,0) rotate(7deg);opacity:.72}
  76%{transform:translate3d(-92vw,5vh,0) rotate(-6deg);opacity:.66}
  92%,100%{transform:translate3d(calc(-100vw - 220px),-4vh,0) rotate(3deg);opacity:0}
}

.wizard-trio { width:150px; left:-190px; bottom:74px; opacity:.7; animation:trioWalk 42s linear infinite; }
.wizard-trio .walker { transform-origin:center bottom; animation:walkerBob .72s ease-in-out infinite alternate; }
.wizard-trio .w2 { animation-delay:-.24s; }
.wizard-trio .w3 { animation-delay:-.48s; }
@keyframes trioWalk {
  0%,5%{transform:translateX(-190px);opacity:0}
  8%{opacity:.7}
  48%{transform:translateX(50vw);opacity:.72}
  92%{opacity:.7}
  100%{transform:translateX(calc(100vw + 220px));opacity:0}
}
@keyframes walkerBob { from{transform:translateY(0) rotate(-.8deg)} to{transform:translateY(-5px) rotate(.8deg)} }

.tiny-train { left:-160px; top:62%; font-size:31px; opacity:.34; animation:trainAcross 47s linear infinite; }
.train-smoke { position:absolute; left:23px; top:-20px; font-size:15px; animation:smokePuff 2.1s ease-out infinite; }
.train-smoke.two { animation-delay:-1.05s; }
@keyframes trainAcross { from{transform:translateX(-180px)} to{transform:translateX(calc(100vw + 220px))} }
@keyframes smokePuff { 0%{transform:translate(0,0) scale(.5);opacity:0} 25%{opacity:.6} 100%{transform:translate(26px,-35px) scale(1.3);opacity:0} }

.flutter-book { right:8%; bottom:18%; font-size:27px; opacity:.46; animation:flutterBook 8s ease-in-out infinite; }
@keyframes flutterBook { 0%,100%{transform:translate(0,0) rotate(-7deg) scale(.95)} 35%{transform:translate(-18px,-22px) rotate(5deg) scale(1.05)} 70%{transform:translate(8px,-10px) rotate(-2deg) scale(.98)} }

/* Floating charms now have independent wandering motion. */
.floating-charm { animation:charmWander var(--dur) ease-in-out var(--delay) infinite alternate !important; }
@keyframes charmWander { 0%{transform:translate3d(-4px,8px,0) rotate(-8deg);opacity:.18} 50%{opacity:.48} 100%{transform:translate3d(12px,-18px,0) rotate(9deg);opacity:.3} }

/* Gentle reactions to interaction. */
.btn:hover .sparkle, .nav-add:hover span { animation:twinkleTurn .8s ease; }
@keyframes twinkleTurn { 0%{transform:scale(1) rotate(0)} 45%{transform:scale(1.5) rotate(110deg)} 100%{transform:scale(1) rotate(180deg)} }
.book-card:hover .book-cover { transform:translateY(-5px) rotate(-1.2deg) scale(1.015); }
.book-cover { transition:transform .35s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 760px) {
  .flow-view { width:min(100% - 18px, 980px); padding-top:22px; }
  .flow-top { grid-template-columns:auto 1fr; gap:12px; }
  .flow-top h2 { font-size:34px; }
  .flow-card { padding:20px 16px 28px; border-radius:28px; }
  .magical-entry-card { grid-template-columns:1fr; min-height:auto; gap:20px; }
  .add-page-illustration { min-height:180px; }
  .portal-book { font-size:68px; }
  .scanner-page .scanner-frame { min-height:330px; }
  .wizard-trio { bottom:88px; width:112px; opacity:.46; }
  .broom-rider { width:90px; opacity:.46; }
  .owl-flight { width:62px; opacity:.58; }
  .tiny-train { opacity:.2; }
}

@media (prefers-reduced-motion: reduce) {
  .magic-actor, .floating-charm, .portal-book, .portal-spark { animation-duration:1ms !important; animation-iteration-count:1 !important; }
}

/* --- Dreamy V5 navigation + couple dashboard refinements --- */
.couple-reading-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.reader-reading-panel {
  border-radius:24px;
  padding:16px;
  min-height:240px;
  position:relative;
  overflow:hidden;
}
.reader-reading-panel::after {
  content:'';
  position:absolute;
  width:120px;height:120px;border-radius:50%;
  right:-44px;top:-48px;
  background:radial-gradient(circle,rgba(237,210,133,.25),transparent 68%);
  pointer-events:none;
}
.reader-panel-head {display:flex;align-items:center;gap:10px;margin-bottom:12px;position:relative;z-index:1;}
.reader-panel-head strong {display:block;font-family:"Playfair Display",serif;font-size:21px;}
.reader-panel-head small {display:block;color:var(--muted);font-size:11px;margin-top:2px;text-transform:uppercase;letter-spacing:.08em;}
.reader-avatar-y {background:linear-gradient(135deg,#52777d,#759c91);}
.reader-avatar-n {background:linear-gradient(135deg,#9d7a74,#c7a18d);}
.reader-current-list {min-height:164px;align-items:stretch;}
.reader-current-list .book-card {min-width:154px;max-width:170px;}
.reader-empty {display:grid;place-items:center;text-align:center;align-content:center;gap:6px;min-height:165px;padding:18px;color:var(--muted);}
.reader-empty span {font-size:31px;filter:saturate(.7);}
.reader-empty strong {color:var(--ink);font-family:"Playfair Display",serif;font-size:18px;}
.reader-empty small {max-width:210px;line-height:1.45;}

.settings-top-btn {background:linear-gradient(135deg,#8a9d8e,#657b76);font-size:20px;}
.music-settings-card {display:grid;gap:11px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(240,247,240,.95),rgba(255,250,232,.9));border:1px solid rgba(102,138,126,.16);}
.music-settings-copy {display:grid;gap:4px;}
.music-settings-copy strong {font-family:"Playfair Display",serif;font-size:18px;}
.music-settings-copy small {color:var(--muted);line-height:1.45;}
.music-url-label {display:grid;gap:6px;font-size:11px;font-weight:700;color:#496268;text-transform:uppercase;letter-spacing:.06em;}
.music-url-label input {width:100%;border:1px solid rgba(69,101,111,.14);border-radius:12px;padding:11px 12px;background:rgba(255,255,255,.85);color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500;}
.music-settings-actions {display:flex;gap:8px;}
.music-settings-actions button {border:0;border-radius:12px;padding:10px 12px;background:#fff;box-shadow:0 7px 18px rgba(52,80,78,.08);cursor:pointer;font-weight:700;color:#496268;}
.music-settings-actions button:first-child {background:linear-gradient(135deg,#6c958a,#527577);color:#fff;}
.volume-row {display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;color:var(--muted);font-size:12px;font-weight:700;}
.volume-row input {accent-color:#6d958b;}
.youtube-audio-host {display:none;}
.youtube-audio-host.show {position:fixed;right:16px;bottom:86px;z-index:110;display:block;width:244px;padding:12px;border:1px solid rgba(255,255,255,.85);border-radius:19px;background:rgba(255,254,247,.96);box-shadow:0 17px 42px rgba(32,64,65,.24);}
.music-player-head {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;font-weight:700;font-size:13px;color:#3e6260;}
.music-player-head button {width:26px;height:26px;border:0;border-radius:8px;background:#e8f0e9;color:#3d5b58;font-size:20px;line-height:1;cursor:pointer;}
.youtube-audio-host iframe {display:block;width:220px;height:200px;border:0;border-radius:10px;}
html[data-theme="night"] .youtube-audio-host.show {background:#243d47;border-color:rgba(193,222,208,.25);}
html[data-theme="night"] .music-player-head {color:#e6f1e9;}
@media(max-width:620px) {.youtube-audio-host.show {right:10px;bottom:82px;}}

/* Ensure modal sheets behave like the original app, not page sections. */
.overlay {z-index:79;}
.sheet {z-index:80;}
.popover {z-index:90;}

/* The birthday panels open from the centre like two storybook doors. */
.intro-door {opacity:.92;}
.intro-door-left {
  background:
    linear-gradient(90deg,rgba(211,231,220,.98),rgba(248,241,213,.93)),
    repeating-linear-gradient(90deg,transparent 0 34px,rgba(80,111,103,.035) 34px 35px);
  box-shadow:inset -18px 0 32px rgba(51,80,75,.08);
}
.intro-door-right {
  background:
    linear-gradient(270deg,rgba(211,231,220,.98),rgba(248,241,213,.93)),
    repeating-linear-gradient(90deg,transparent 0 34px,rgba(80,111,103,.035) 34px 35px);
  box-shadow:inset 18px 0 32px rgba(51,80,75,.08);
}
.intro-screen.opening .intro-card {animation:giftIntoWorld 1.05s ease forwards;}
@keyframes giftIntoWorld {
  0%{opacity:1;transform:scale(1)}
  45%{opacity:.85;transform:scale(.97)}
  100%{opacity:0;transform:scale(1.06)}
}

/* Make the magical figures slightly more alive while remaining background details. */
.owl-flight {animation-duration:20s;}
.broom-rider {animation-duration:27s;}
.wizard-trio {animation-duration:36s;}
.tiny-train {animation-duration:41s;}
.flutter-book {animation-duration:13s;}
.wizard-trio .w1 circle:first-child,.wizard-trio .w2 circle:first-child,.wizard-trio .w3 circle:first-child {animation:tinyHeadTurn 3.8s ease-in-out infinite alternate;transform-origin:center;}
@keyframes tinyHeadTurn {from{transform:translateX(-1px) rotate(-2deg)}to{transform:translateX(1px) rotate(2deg)}}

@media (max-width:760px){
  .couple-reading-grid{grid-template-columns:1fr;}
  .topbar-actions{gap:5px;}
  .icon-btn{width:40px;height:40px;border-radius:14px;}
  .reader-pill{min-height:40px;padding:0 10px;}
}
@media (max-width:480px){
  .brand-copy strong{font-size:14px;}
  .reader-pill{padding:0 8px;}
  .reader-pill .reader-dot,.reader-pill .chevron{display:none;}
  .topbar-actions .icon-btn{width:37px;height:37px;font-size:18px;}
  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* V5 birthday-door correction: visible front cover, then two panels move outward. */
.intro-door {opacity:1; z-index:1; transform:translateX(0);}
.intro-card {z-index:7;}
.intro-landscape,.intro-mist,.intro-stars {z-index:0;}
.intro-screen.opening .intro-door-left {animation:doorOpenLeft 1.12s cubic-bezier(.55,.02,.18,1) forwards;}
.intro-screen.opening .intro-door-right {animation:doorOpenRight 1.12s cubic-bezier(.55,.02,.18,1) forwards;}
@keyframes doorOpenLeft {from{transform:translateX(0)}to{transform:translateX(-102%)}}
@keyframes doorOpenRight {from{transform:translateX(0)}to{transform:translateX(102%)}}
/* Four-button bottom dock in V5: Home, Library, Add, Memories. */
.bottom-nav {grid-template-columns:1fr 1fr auto 1fr; max-width:540px;}
.nav-add {margin:0 8px;}

/* Critical V5 positioning restore: dreamy overrides must not turn overlays into page content. */
.app-shell {position:relative;z-index:3;}
.intro-screen {position:fixed;inset:0;z-index:150;}
.bottom-nav {position:fixed;z-index:45;left:50%;bottom:16px;transform:translateX(-50%);}
.sheet {position:fixed;z-index:80;}
.popover {position:fixed;z-index:90;}
.toast {position:fixed;z-index:200;}
@media (max-width:620px){.bottom-nav{bottom:8px;}}