/* HuLu's warm scrapbook language: lighter surfaces, clearer hierarchy, quieter motion. */
:root { --hulu-ink: #563f30; --hulu-muted: #927d6d; --hulu-line: rgba(134, 96, 65, .15); }
html, body, #app { background: #fff8ed !important; }

@media (min-width: 640px) {
  body { background: #e8eee7 !important; }
  #app {
    left: 50%; right: auto; width: min(100%, 560px);
    transform: translateX(-50%);
    box-shadow: 0 0 0 1px rgba(90, 63, 43, .08), 0 20px 70px rgba(63, 48, 37, .15);
  }
}

/* Shared page furniture */
.screen-header { padding-top: 18px; padding-bottom: 15px; }
.scr-title { color: var(--hulu-ink); font-size: 23px; }
.back-btn, .pt-back { border-radius: 13px; }
.btn-primary { background: #d98655; box-shadow: 0 5px 13px rgba(155, 82, 46, .20); text-shadow: none; }
.btn-cream { background: #fff8ea; box-shadow: 0 2px 9px rgba(109, 74, 47, .07); }
.chip.on { background: #d98856; box-shadow: 0 3px 9px rgba(155, 82, 46, .15); text-shadow: none; }
.card, .card-cream, .diary-item, .letter, .alb-card, .set-group, .mem-perks {
  border-color: var(--hulu-line) !important;
  box-shadow: 0 3px 12px rgba(102, 70, 47, .07) !important;
}
.set-row { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.set-row .sic { box-shadow: none !important; }
.set-row .nm { color: var(--hulu-ink); }
.set-row .vl { color: var(--hulu-muted); }
.navbar { background: rgba(255, 248, 237, .96) !important; border-top-color: var(--hulu-line) !important; box-shadow: 0 -4px 18px rgba(91, 62, 41, .06); }
.navbar .tab.active .icw { background: #f6d9b7 !important; border-color: rgba(143, 91, 51, .14); box-shadow: 0 3px 9px rgba(147, 91, 51, .12) !important; transform: translateY(-2px); }
.navbar .tab.active span { color: #a45c35; }

/* Keep illustrated memory notes; all other home styling comes from style.css. */
#s-home .hm-mem-item.story-note {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px; color: #5d4636; background: #f3e4d8;
  border: 1px solid rgba(128, 83, 57, .12); box-shadow: 0 3px 11px rgba(102, 70, 47, .08);
}
#s-home .hm-mem-item.story-note:nth-of-type(3n) { background: #e3ebdd; }
#s-home .hm-mem-item.story-note:nth-of-type(3n + 1) { background: #f2e1db; }
#s-home .story-note-kicker { width: max-content; max-width: 100%; padding-bottom: 4px; border-bottom: 1px solid rgba(108, 77, 58, .25); font-size: 10px; font-weight: 800; color: #8f6c55; }
#s-home .story-note-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 600 15px/1.42 'Nunito','PingFang SC',sans-serif; }
#s-home .story-note-more { font-size: 10px; font-weight: 700; color: #98745e; }
/* Lists and drawers respond to their content, not to ornamental glass. */
.diary-item, .letter, .alb-card { background: #fffdf8 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mem-perks, .set-group { background: #fffdf8 !important; }
.mem-status-card { box-shadow: 0 4px 16px rgba(134, 82, 44, .11); }
.mem-btn-buy { background: #dc8b55; box-shadow: 0 5px 13px rgba(155, 82, 46, .20); }
.toast { border-radius: 13px; }

/* Navigation and feedback: continuous handoff, without a blank frame. */
.screen.active { animation: huluEnter .28s cubic-bezier(.2,.8,.25,1) both; }
.screen.leaving { z-index: 2; animation: huluLeave .24s ease-in both; pointer-events: none; }
@keyframes huluEnter { from { opacity: .82; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes huluLeave { to { opacity: 0; transform: translateY(-4px); } }
.hm-feat, .hm-timeline, .hm-mem-item, .stat, .set-row, .btn, .navbar .tab, .chip {
  transition: transform .2s cubic-bezier(.2,.8,.25,1), background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.stat:active, .navbar .tab:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .screen.active, .screen.leaving { animation: none !important; }
}