/* Warm refinement layered over the original HuLu visual language. */
:root {
  --line-soft: rgba(174, 125, 87, .17);
  --shadow-card: 0 7px 22px rgba(132, 85, 52, .10), 0 1px 2px rgba(132, 85, 52, .04);
  --shadow-soft: 0 9px 26px rgba(163, 100, 56, .13);
  --shadow-warm: 0 13px 30px rgba(184, 106, 54, .18);
  --ux-ease: cubic-bezier(.2, .8, .25, 1);
}

/* Keep the familiar paper-and-peach palette, with less contrast at edges. */
.paper-bg { opacity: .13; }
.dots-bg { opacity: .52; }
.card, .card-cream, .set-group, .diary-item, .letter,
.alb-card, .hm-timeline, .mem-perks, .modal-card {
  border-color: rgba(168, 118, 80, .14) !important;
  box-shadow: var(--shadow-card) !important;
}
.set-group, .mem-perks { background: rgba(255, 253, 248, .91); }
.set-row { border: 0 !important; background: transparent !important; }
.set-row + .set-row { border-top: 1px solid rgba(167, 123, 88, .10) !important; }
.set-row .sic, .tool .ic3, .hm-tl-em {
  box-shadow: inset 0 1px rgba(255,255,255,.75), 0 3px 10px rgba(133,84,51,.10) !important;
  border-color: rgba(255,255,255,.7) !important;
}
.set-row .nm, .hm-feat-nm, .mem-perk-item b { font-weight: 700; }
.set-row .vl, .hm-feat-sub, .mem-perk-item p { color: #8f745e; }

/* Controls feel soft but never vague. */
.btn, .back-btn, .chip, .set-row, .hm-feat, .hm-timeline,
.navbar .tab, .pt-ic, .pw-cta, .mem-btn-buy, .mem-btn-restore,
.coin-card .btn-x, .orient-card, .alb-card, .fab {
  transition: transform .22s var(--ux-ease), box-shadow .22s var(--ux-ease),
              background-color .22s ease, opacity .22s ease, border-color .22s ease;
  touch-action: manipulation;
}
.btn:active, .pw-cta:active, .mem-btn-buy:active, .mem-btn-restore:active,
.coin-card .btn-x:active { transform: translateY(1px) scale(.975); }
.set-row:active, .hm-feat:active, .hm-timeline:active,
.orient-card:active, .alb-card:active { transform: scale(.985); }
.back-btn, .pt-back, .pw-close, .rd-close {
  min-width: 40px; min-height: 40px;
  border-color: rgba(176, 127, 90, .16) !important;
  box-shadow: 0 4px 12px rgba(128, 82, 50, .10) !important;
}
.chip { border-color: rgba(171, 123, 88, .16); box-shadow: 0 2px 7px rgba(128,82,50,.06); }
.chip.on { border-color: transparent; box-shadow: 0 4px 12px rgba(188,112,57,.18); }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .55; box-shadow: none !important; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible,
textarea:focus-visible, .tab:focus-visible {
  outline: 2px solid #af6b36;
  outline-offset: 3px;
}

/* Retain each feature's own color; remove the thick stamped-card effect. */
.hm-feat {
  border-color: rgba(143, 94, 61, .11) !important;
  box-shadow: 0 8px 20px rgba(141, 89, 53, .12), inset 0 1px rgba(255,255,255,.5) !important;
}
.hm-feat-em { filter: saturate(.86); transform-origin: center; }
.hm-feat:active .hm-feat-em { transform: rotate(-5deg) scale(1.08); }
.hm-hero, .coin-card {
  box-shadow: 0 10px 27px rgba(163, 97, 51, .16), inset 0 1px rgba(255,255,255,.48) !important;
}
.coin-card .btn-x { color: #624229; background: rgba(255,255,255,.72); }
.coin-card .btn-x.done { color: #755a42; background: rgba(255,255,255,.45); opacity: 1; }
.coin-card .lbl, .coin-card .num { color: #63442b; text-shadow: none; }
.coin-card .pro-badge { box-shadow: 0 2px 9px rgba(131,80,48,.10); }

/* Navigation should stay quiet until selected. */
.navbar { box-shadow: 0 -5px 22px rgba(128,82,50,.06); }
.navbar .tab .icw { border: 1px solid transparent; }
.navbar .tab.active .icw {
  box-shadow: 0 5px 15px rgba(176,100,52,.19), inset 0 1px rgba(255,255,255,.56) !important;
}
.navbar .tab.active span { font-weight: 800; }

/* A small tactile notice, rather than a dark system-looking pill. */
.toast {
  top: auto; bottom: calc(22px + var(--safe-bottom));
  width: max-content; max-width: min(88vw, 390px);
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px 11px 12px;
  border-radius: 16px;
  background: rgba(255, 251, 242, .96);
  color: #64442c;
  border: 1px solid rgba(178, 125, 82, .19);
  box-shadow: 0 11px 30px rgba(110, 65, 36, .16), 0 2px 5px rgba(110,65,36,.07);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  font-size: 13px; line-height: 1.45; font-weight: 700;
  text-align: left;
  animation: uxToastIn .32s var(--ux-ease) both;
}
.toast.with-nav { bottom: calc(88px + var(--safe-bottom)); }
.toast .ux-toast-mark {
  display: grid; place-items: center; flex: 0 0 23px;
  width: 23px; height: 23px; border-radius: 8px;
  background: #f4e4cd; color: #9a5c2e; font-size: 13px;
}
.toast.warn, .toast.error {
  color: #74472f; background: rgba(255, 246, 232, .97);
  border-color: rgba(194, 124, 73, .25);
  text-shadow: none;
}
.toast.warn .ux-toast-mark, .toast.error .ux-toast-mark { background: #f6dccc; color: #9a4a38; }
.toast.hide { animation: uxToastOut .22s ease-in forwards; }
@keyframes uxToastIn {
  from { opacity: 0; transform: translate(-50%, 10px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes uxToastOut {
  to { opacity: 0; transform: translate(-50%, 7px) scale(.98); }
}

/* The unlocked action is the point of the page, not a hard-edged panel. */
.mem-status-card {
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(168,100,49,.16), inset 0 1px rgba(255,255,255,.6);
}
.mem-status-locked, .mem-status-pro {
  min-height: 154px;
  display: flex; align-items: center; gap: 18px;
  padding: 17px !important;
  text-align: left;
  background: linear-gradient(125deg, #fff2db, #f8dcae) !important;
}
.mem-status-pro { background: linear-gradient(125deg, #fff0be, #f6cf7b) !important; }
.mem-art {
  width: 116px; height: 116px; flex: 0 0 116px;
  object-fit: cover; border-radius: 20px;
  box-shadow: 0 5px 16px rgba(151,88,44,.15);
}
.mem-status-copy { min-width: 0; flex: 1; }
.mem-title, .mem-title-pro { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.mem-price { color: #a75d3a; font-size: 25px; line-height: 1.2; }
.mem-price span { font-size: 12px; line-height: 1.5; }
.mem-activated { margin-top: 2px; border-radius: 10px; font-size: 12px; padding: 5px 8px; }
@media (max-width: 350px) {
  .mem-status-locked, .mem-status-pro { gap: 12px; }
  .mem-art { width: 96px; height: 96px; flex-basis: 96px; }
  .mem-title, .mem-title-pro { font-size: 17px; }
}
.mem-perks { border-radius: 20px; }
.mem-perk-item { border-color: rgba(158,117,87,.10); padding: 13px 0; }
.mem-perk-ic {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 12px;
  background: #fff2df; font-size: 19px;
}
.mem-btn-buy { border-radius: 17px; box-shadow: 0 8px 20px rgba(197,104,50,.23); }
.mem-btn-buy:disabled {
  opacity: 1; color: #75543b;
  background: #f7e5cf; border: 1px solid rgba(160,110,74,.18);
}
.mem-btn-restore { border-color: rgba(179,111,65,.26); background: rgba(255,251,243,.65); }

/* The free-user reminder must not cover the companion back control. */
.pet-lock-banner {
  top: calc(var(--safe-top) + 58px);
  border: 1px solid rgba(255,255,255,.63);
  box-shadow: 0 8px 20px rgba(153,91,46,.18), inset 0 1px rgba(255,255,255,.55);
}
.pet-lock-banner .plb-close { width: 28px; height: 28px; }

/* Layer transitions are short, with the movement tied to the action. */
.screen.active { animation: uxScreenIn .33s var(--ux-ease) both; }
.screen.leaving { animation: uxScreenOut .22s ease-in both; }
@keyframes uxScreenIn {
  from { opacity: .45; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes uxScreenOut {
  to { opacity: 0; transform: translateY(-5px) scale(.997); }
}
.pw-card, .rd-card { box-shadow: 0 -12px 36px rgba(88,54,34,.18); }
.pw-mask, .rd-mask { background: rgba(52,34,23,.42); }

.card-prev .msg-cn { white-space: pre-line; overflow-wrap: anywhere; }
.card-editor {
  position: absolute; inset: 0; z-index: 50;
  display: none; align-items: flex-end;
}
.card-editor.show { display: flex; }
.card-editor-mask {
  position: absolute; inset: 0;
  background: rgba(52,34,23,.40);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.card-editor-panel {
  position: relative; z-index: 1;
  width: 100%; padding: 24px 20px calc(22px + var(--safe-bottom));
  border-radius: 24px 24px 0 0;
  background: #fff8ec;
  box-shadow: 0 -10px 32px rgba(91,55,32,.16);
  animation: slideUpModal .3s var(--ux-ease) both;
}
.card-editor-title {
  font-family: 'Ma Shan Zheng', cursive;
  color: var(--ink); font-size: 21px; text-align: center;
  margin-bottom: 14px;
}
.card-editor textarea {
  display: block; width: 100%; min-height: 104px;
  padding: 13px 15px; resize: none;
  border: 1px solid rgba(171,117,78,.22);
  border-radius: 15px; outline: none;
  color: var(--ink); background: rgba(255,255,255,.76);
  font: 15px/1.6 'Nunito','PingFang SC',sans-serif;
}
.card-editor textarea:focus { border-color: #c9844b; box-shadow: 0 0 0 3px rgba(218,151,87,.16); }
.card-editor-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 14px; }
.card-editor-actions .btn { min-width: 0; padding: 13px 8px; }

.ux-input-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: flex-end; }
.ux-input-modal.show { display: flex; }
.ux-input-mask { position: absolute; inset: 0; background: rgba(52,34,23,.40); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.ux-input-panel {
  position: relative; width: 100%; padding: 23px 20px calc(22px + var(--safe-bottom));
  border-radius: 24px 24px 0 0; background: #fff8ec;
  box-shadow: 0 -10px 32px rgba(91,55,32,.16); animation: slideUpModal .3s var(--ux-ease) both;
}
.ux-input-title { color: var(--ink); font-size: 18px; font-weight: 800; text-align: center; margin-bottom: 16px; }
.ux-input-field {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  border: 1px solid rgba(171,117,78,.22); border-radius: 14px; outline: none;
  color: var(--ink); background: rgba(255,255,255,.82); font: 15px/1.5 'Nunito','PingFang SC',sans-serif;
}
.ux-input-field:focus { border-color: #c9844b; box-shadow: 0 0 0 3px rgba(218,151,87,.16); }
.ux-input-field.hidden { display: none; }
.ux-input-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 16px; }
.ux-input-actions .btn { min-width: 0; padding: 13px 8px; }

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