:root {
  --ink: #26382f;
  --muted: #839186;
  --paper: #fffdf8;
  --canvas: #f7f3ec;
  --line: #ebe7dc;
  --coral: #e37b67;
  --coral-dark: #bd5e4f;
  --coral-wash: #fff0e9;
  --sage: #75a88b;
  --sage-dark: #4e8269;
  --sage-wash: #eaf3eb;
  --gold: #ddb45c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #eee9e0; color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
button, input, select, textarea { font: inherit; }
button { color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: .14rem solid #e37b67a8; outline-offset: .14rem; }
.app-shell { position: relative; display: flex; flex-direction: column; width: min(100%, 30rem); height: 100dvh; min-height: 37rem; margin: auto; overflow: hidden; background: var(--canvas); }
.topbar { display: flex; flex: 0 0 auto; align-items: center; gap: .65rem; padding: .8rem 1.05rem .65rem; background: #fffdf9eF; backdrop-filter: blur(16px); }
.brand { display: flex; flex: 1; align-items: center; gap: .58rem; color: var(--ink); text-decoration: none; }
.brand-icon { display: grid; flex: none; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .85rem .85rem .85rem .25rem; color: white; background: linear-gradient(145deg, #f49a7d, var(--coral)); box-shadow: 0 .35rem .8rem #d7705a2d; font-size: 1rem; }
.brand>span:last-child { display: grid; gap: .13rem; }
.brand strong { font-size: .96rem; font-weight: 760; letter-spacing: .01rem; }
.brand small { color: #928f82; font-size: .58rem; letter-spacing: .04rem; }
.icon-button, .profile-button { position: relative; display: grid; flex: none; place-items: center; width: 2.15rem; height: 2.15rem; color: #7f8c81; font-size: 1.05rem; }
.notification-button>b { position: absolute; top: .2rem; right: .25rem; width: .43rem; height: .43rem; border: 1px solid white; border-radius: 50%; background: var(--coral); }
.notification-button>b[hidden] { display: none; }
.profile-button { width: 1.9rem; height: 1.9rem; border-radius: 50%; color: var(--coral-dark); background: var(--coral-wash); font-size: .72rem; font-weight: 750; }
#appBody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .15rem 1rem 1.2rem; scrollbar-width: none; }
#appBody::-webkit-scrollbar { display: none; }
.screen[hidden] { display: none !important; }
.screen { display: none; animation: page-in .24s ease-out; }
.screen.active { display: block; }
@keyframes page-in { from { opacity: .65; transform: translateY(.22rem); } to { opacity: 1; transform: none; } }
.hero-card { position: relative; isolation: isolate; height: 14.8rem; overflow: hidden; border-radius: 1.1rem 1.1rem 1.1rem .35rem; color: white; background: #526454; box-shadow: 0 .65rem 1.2rem #8157481c; }
.hero-card>img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; animation: pet-photo-drift 26s ease-in-out infinite alternate; }
.hero-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #1e342de8 0%, #263b326e 55%, #29382c0c 95%), linear-gradient(0deg, #1828206b, transparent 45%); }
.hero-location { position: absolute; top: .75rem; left: .75rem; display: flex; align-items: center; gap: .32rem; max-width: calc(100% - 1.5rem); padding: .34rem .5rem; border: 1px solid #ffffff46; border-radius: 2rem; color: #fffdf4; background: #1e382f68; backdrop-filter: blur(8px); font-size: .52rem; white-space: nowrap; }
.hero-location>span { margin-left: .18rem; color: #d7e6d4; }
.hero-message { position: absolute; bottom: 1rem; left: .9rem; }
.hero-message>span { color: #fae4ae; font-size: .46rem; letter-spacing: .13rem; }
.hero-message h2 { margin: .42rem 0 .36rem; font-size: 1.44rem; font-weight: 740; line-height: 1.35; letter-spacing: -.035rem; }
.hero-message p { margin: 0; color: #e5ece2; font-size: .57rem; }
.hero-action { position: absolute; right: .75rem; bottom: .78rem; padding: .43rem .55rem; border: 1px solid #ffffff55; border-radius: .56rem; color: white; background: #ffffff20; backdrop-filter: blur(7px); font-size: .51rem; }
.hero-motion-toggle { position: absolute; top: .78rem; right: .75rem; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border: 1px solid #ffffff55; border-radius: 50%; color: white; background: #24382c55; }
.hero-card.motion-paused>img { animation-play-state: paused; }
@keyframes pet-photo-drift { from { transform: scale(1.01) translateX(.1rem); } to { transform: scale(1.08) translateX(-.18rem); } }
.section-block { margin-top: 1.35rem; scroll-margin-top: .65rem; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: .4rem; margin-bottom: .62rem; }
.eyebrow { color: #9ca092; font-size: .45rem; font-weight: 750; letter-spacing: .13rem; }
.section-heading h2, .page-intro h1 { margin: .2rem 0 0; color: var(--ink); font-size: .91rem; font-weight: 740; }
.text-link { padding: .24rem 0; color: var(--coral-dark); font-size: .55rem; white-space: nowrap; }
.pet-scroll { display: grid; grid-auto-columns: minmax(12.8rem, 1fr); grid-auto-flow: column; gap: .58rem; overflow: auto hidden; padding: .02rem .02rem .25rem; scrollbar-width: none; }
.pet-scroll::-webkit-scrollbar { display: none; }
.pet-card { display: flex; align-items: center; gap: .55rem; min-width: 0; padding: .64rem; border: 1px solid #ede7db; border-radius: .88rem .88rem .88rem .3rem; background: var(--paper); box-shadow: 0 .2rem .65rem #56442c0a; text-align: left; }
.pet-avatar { display: grid; flex: none; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: #fff0df; font-size: 1.35rem; }
.pet-card:nth-child(2) .pet-avatar { background: #e9f1e9; }
.pet-summary { flex: 1; min-width: 0; }
.pet-summary strong { display: block; color: #354338; font-size: .67rem; font-weight: 730; }
.pet-summary small { display: block; margin-top: .19rem; color: #999487; font-size: .49rem; white-space: nowrap; }
.pet-card>i:last-child { color: #b3aa97; font-size: .56rem; }
.appointment-card { display: flex; align-items: center; gap: .62rem; padding: .78rem; border: 1px solid #f0e2d7; border-radius: .9rem; background: linear-gradient(112deg, #fff5ed, #fffefa 75%); }
.appointment-date { display: grid; flex: none; place-items: center; width: 3rem; height: 3.15rem; border-radius: .75rem; color: white; background: linear-gradient(145deg, #ee9a80, #db705f); }
.appointment-date small { font-size: .44rem; opacity: .9; }
.appointment-date strong { font-size: 1rem; line-height: 1; }
.appointment-copy { flex: 1; min-width: 0; }
.appointment-copy strong { display: block; color: #4b423a; font-size: .64rem; }
.appointment-copy small { display: block; margin-top: .22rem; color: #9b8c7e; font-size: .48rem; }
.appointment-status { display: inline-flex; align-items: center; gap: .2rem; color: #4e9875; font-size: .48rem; white-space: nowrap; }
.appointment-card.empty { justify-content: space-between; border-color: #e6ece2; background: linear-gradient(110deg, #edf5eb, #fff); }
.appointment-card.empty .appointment-date { color: var(--sage-dark); background: #dcebdd; }
.appointment-card.empty .appointment-date i { font-size: 1.1rem; }
.appointment-card.empty .appointment-copy strong { color: #486c54; }
.appointment-card.empty .appointment-copy small { color: #839683; }
.reminder-stack, .reminder-list, .appointment-list, .profile-list { display: grid; gap: .48rem; }
.reminder-card { display: flex; align-items: center; gap: .55rem; padding: .62rem .67rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--paper); text-align: left; }
.reminder-icon { display: grid; flex: none; place-items: center; width: 2rem; height: 2rem; border-radius: .68rem; color: #d67862; background: #fff0e9; font-size: .88rem; }
.reminder-card[data-kind='water'] .reminder-icon, .reminder-card[data-kind='walk'] .reminder-icon { color: #639779; background: #ebf4eb; }
.reminder-card[data-kind='medicine'] .reminder-icon { color: #b580ba; background: #f7eef7; }
.reminder-text { flex: 1; min-width: 0; }
.reminder-text strong { display: block; color: #485347; font-size: .59rem; font-weight: 680; }
.reminder-text small { display: block; margin-top: .2rem; color: #a19b8c; font-size: .47rem; }
.reminder-time { color: #a1876b; font-size: .48rem; white-space: nowrap; }
.reminder-done { display: grid; flex: none; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid #e9ddcf; border-radius: 50%; color: transparent; background: white; font-size: .65rem; }
.reminder-card.completed { border-color: #e5eee4; background: #f6faf5; }
.reminder-card.completed .reminder-icon { color: #6ca385; background: #e8f3e9; }
.reminder-card.completed .reminder-text strong { color: #92a197; text-decoration: line-through; }
.reminder-card.completed .reminder-done { border-color: #70ae8c; color: white; background: #70ae8c; }
.service-section { padding: .82rem; border: 1px solid #eee5d9; border-radius: .95rem; background: #fffaf1; }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; }
.service-grid button { display: grid; justify-items: center; gap: .28rem; min-height: 4.1rem; padding: .48rem .18rem; border: 1px solid #f0e8dc; border-radius: .72rem; background: #fffefa; text-align: center; }
.service-grid button>i { color: var(--coral); font-size: 1rem; }
.service-grid strong { color: #565448; font-size: .51rem; font-weight: 680; white-space: nowrap; }
.service-grid small { color: #a39c8f; font-size: .42rem; }
.local-note { display: flex; align-items: flex-start; gap: .34rem; padding: .78rem .1rem .28rem; color: #989a8b; font-size: .49rem; line-height: 1.55; }
.local-note i { margin-top: .02rem; color: #7aa184; }
.page-intro { padding: .9rem 0 .78rem; }
.page-intro h1 { margin: .27rem 0 .27rem; font-size: 1.2rem; }
.page-intro p { margin: 0; color: var(--muted); font-size: .63rem; line-height: 1.6; }
.profile-pet-card { position: relative; display: grid; grid-template-columns: 3.3rem 1fr auto; gap: .15rem .65rem; padding: .85rem; border: 1px solid #e9e8da; border-radius: 1rem 1rem 1rem .3rem; background: #fffefa; text-align: left; }
.profile-pet-card .pet-avatar { grid-row: span 2; width: 3.2rem; height: 3.2rem; font-size: 1.6rem; }
.profile-pet-card h2 { align-self: end; margin: 0; font-size: .82rem; }
.profile-pet-card p { align-self: start; margin: .14rem 0 0; color: #939587; font-size: .52rem; }
.profile-pet-card>i { grid-column: 3; grid-row: 1; color: #b2aa98; }
.pet-health-tags { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .55rem; }
.pet-health-tags span { padding: .2rem .36rem; border-radius: 2rem; color: #60866b; background: #edf4e9; font-size: .46rem; }
.pet-health-tags span.vaccine { color: #a27a43; background: #fcf2df; }
.pet-detail-copy { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .62rem; padding-top: .6rem; border-top: 1px solid #efeee5; }
.pet-detail-copy span { color: #9a998a; font-size: .48rem; }.pet-detail-copy strong { display: block; margin-top: .15rem; color: #5c6658; font-size: .53rem; font-weight: 650; }
.outline-action { display: flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; min-height: 2.5rem; margin-top: .65rem; border: 1px dashed #dfb8a5; border-radius: .72rem; color: var(--coral-dark); background: #fffaf5; font-size: .61rem; }
.care-tip { display: flex; align-items: flex-start; gap: .48rem; margin-top: .85rem; padding: .72rem; border-radius: .75rem; color: #6e8b71; background: #edf4e9; }
.care-tip>i { margin-top: .07rem; color: #c59b4d; }.care-tip strong { display: block; font-size: .58rem; }.care-tip small { display: block; margin-top: .2rem; color: #889882; font-size: .49rem; line-height: 1.55; }
.booking-banner { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .78rem; border: 1px solid #f0e1d5; border-radius: .85rem; background: linear-gradient(110deg, #fff0e6, #fffaf2); text-align: left; }
.booking-banner>span:first-child { display: grid; flex: none; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .66rem; color: white; background: var(--coral); font-size: .94rem; }
.booking-banner>span:nth-child(2) { display: grid; flex: 1; gap: .18rem; }.booking-banner strong { color: #55493f; font-size: .64rem; }.booking-banner small { color: #9a8c7e; font-size: .49rem; }.booking-banner>i { color: #ba8471; font-size: .67rem; }
.appointment-filter, .reminder-filter { display: flex; gap: .35rem; margin: .8rem 0 .62rem; overflow-x: auto; scrollbar-width: none; }.appointment-filter button, .reminder-filter button { flex: none; padding: .37rem .57rem; border: 1px solid #ebe8de; border-radius: 2rem; color: #889188; background: #fffefa; font-size: .52rem; }.appointment-filter button.selected, .reminder-filter button.selected { border-color: #e6b09e; color: var(--coral-dark); background: #fff0e9; }
.appointment-record { display: grid; grid-template-columns: 3.1rem 1fr auto; align-items: center; gap: .1rem .55rem; padding: .68rem; border: 1px solid var(--line); border-radius: .78rem; background: #fffefa; }.appointment-record .appointment-date { grid-row: span 2; width: 2.8rem; height: 2.9rem; }.appointment-record h3 { align-self: end; margin: 0; font-size: .61rem; }.appointment-record p { align-self: start; margin: .18rem 0 0; color: #999386; font-size: .49rem; }.appointment-record>button { grid-column: 3; grid-row: 1 / 3; padding: .32rem .43rem; border-radius: .48rem; color: #b15f50; background: #fff0e9; font-size: .48rem; }.appointment-record.is-done { opacity: .75; }.appointment-record.is-done>button { color: #628d72; background: #edf4e9; }
.wellness-summary { display: flex; align-items: center; justify-content: space-between; padding: .75rem; border: 1px solid #dfeadd; border-radius: .8rem; background: linear-gradient(110deg, #eef5ea, #fffefa); }.wellness-summary strong { display: block; color: #55785e; font-size: .82rem; }.wellness-summary small { display: block; margin-top: .22rem; color: #8c9a87; font-size: .49rem; }.wellness-progress { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: conic-gradient(#78ac87 var(--progress), #e5ecde var(--progress)); }.wellness-progress>span { display: grid; place-items: center; width: 2.12rem; height: 2.12rem; border-radius: 50%; color: #65836a; background: #fffefa; font-size: .58rem; font-weight: 700; }
.reminder-list { gap: .45rem; }.reminder-list .reminder-card { min-height: 3.5rem; }.reminder-list .reminder-text strong { font-size: .62rem; }.reminder-list .reminder-text small { font-size: .5rem; }
.owner-card { display: flex; align-items: center; gap: .55rem; padding: .9rem .25rem .82rem; }.owner-avatar { display: grid; place-items: center; width: 2.85rem; height: 2.85rem; border-radius: 50%; color: white; background: linear-gradient(145deg, #ef9b81, #d86f60); font-size: 1rem; font-weight: 750; }.owner-card>div { display: grid; flex: 1; gap: .18rem; }.owner-card strong { font-size: .76rem; }.owner-card small { color: #929184; font-size: .52rem; }.member-tag { padding: .28rem .4rem; border-radius: 2rem; color: #a27b40; background: #fbf1da; font-size: .48rem; }
.family-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: .7rem .25rem; border: 1px solid var(--line); border-radius: .78rem; background: #fffefa; }.family-stats article { display: grid; justify-items: center; gap: .15rem; border-right: 1px solid var(--line); }.family-stats article:last-child { border: 0; }.family-stats strong { color: #57735c; font-size: .9rem; }.family-stats small { color: #98978a; font-size: .47rem; }
.profile-menu { margin-top: .72rem; padding: 0 .72rem; border: 1px solid var(--line); border-radius: .8rem; background: #fffefa; }.profile-menu button { display: flex; align-items: center; gap: .52rem; width: 100%; padding: .69rem 0; border-bottom: 1px solid #f0eee6; text-align: left; }.profile-menu button:last-child { border: 0; }.profile-menu button>i:first-child { color: var(--coral); font-size: .88rem; }.profile-menu button>span { display: grid; flex: 1; gap: .17rem; font-size: .57rem; }.profile-menu button>span small { color: #939386; font-size: .49rem; }.profile-menu button>i:last-child { color: #acaa9f; font-size: .53rem; }
.reset-button { width: 100%; margin-top: .75rem; padding: .58rem; border: 1px solid var(--line); border-radius: .67rem; color: #8c9287; background: #fffefa; font-size: .56rem; }.profile-note { margin: .58rem .15rem; color: #999a8e; font-size: .47rem; line-height: 1.6; text-align: center; }
.empty-state { padding: 1.3rem .8rem; color: #9a9b8f; text-align: center; font-size: .56rem; }.empty-state i { display: block; margin-bottom: .35rem; color: #82a387; font-size: 1.3rem; }
.bottom-nav { z-index: 3; display: grid; flex: 0 0 auto; grid-template-columns: repeat(5, 1fr); padding: .47rem .25rem calc(.5rem + env(safe-area-inset-bottom)); border-top: 1px solid #eae7dd; background: #fffdf9ef; backdrop-filter: blur(16px); }.bottom-nav button { position: relative; display: grid; justify-items: center; align-content: center; gap: .15rem; min-height: 2.35rem; padding: 0; color: #a0a497; font-size: .5rem; }.bottom-nav button>i { font-size: 1.04rem; }.bottom-nav button.active { color: var(--coral-dark); }.bottom-nav button>b { position: absolute; top: -.02rem; left: calc(50% + .33rem); display: grid; min-width: .76rem; height: .76rem; place-items: center; padding: 0 .14rem; border-radius: 1rem; color: white; background: var(--coral); font-size: .42rem; }.bottom-nav button>b[hidden] { display: none; }
.app-dialog { width: min(calc(100% - 1.5rem), 25rem); max-height: 88dvh; overflow-y: auto; padding: 1rem; border: 0; border-radius: 1rem 1rem 1rem .3rem; color: var(--ink); background: #fffefa; box-shadow: 0 1rem 3rem #463b2f44; }.app-dialog::backdrop { background: #202e298c; backdrop-filter: blur(4px); }.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .7rem; }.dialog-header h2 { margin: .2rem 0 0; font-size: .94rem; font-weight: 740; }.close-dialog { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; color: #868c81; background: #f0f1e9; font-size: .63rem; }.dialog-content { color: #778379; font-size: .63rem; line-height: 1.8; white-space: pre-line; }.dialog-actions { display: flex; flex-wrap: wrap; gap: .42rem; }.dialog-actions:empty { display: none; }.dialog-actions button { flex: 1; min-width: 7rem; margin-top: .72rem; padding: .56rem .4rem; border-radius: .56rem; color: var(--coral-dark); background: #fff0e9; font-size: .58rem; }
.care-form label { display: block; margin: .62rem 0 .26rem; color: #637367; font-size: .59rem; }.care-form input, .care-form select, .care-form textarea { display: block; width: 100%; min-height: 2.45rem; padding: .48rem .55rem; border: 1px solid #e6e9df; border-radius: .55rem; color: var(--ink); background: white; font-size: .69rem; }.care-form textarea { min-height: 4rem; resize: vertical; }.form-hint { display: block; margin-top: .23rem; color: #9a9a8e; font-size: .48rem; line-height: 1.5; }
.submit-button { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 2.55rem; margin-top: .85rem; border-radius: .6rem; color: white; background: linear-gradient(100deg, #e78c73, var(--coral)); font-size: .64rem; font-weight: 700; }
.toast-stack { position: fixed; z-index: 9; bottom: calc(4.6rem + env(safe-area-inset-bottom)); left: 50%; display: grid; gap: .35rem; width: max-content; max-width: calc(100% - 2rem); transform: translateX(-50%); pointer-events: none; }.toast-message { padding: .5rem .76rem; border-radius: .62rem; color: white; background: #36453bee; box-shadow: 0 .35rem .8rem #26332929; text-align: center; font-size: .57rem; animation: page-in .18s ease-out; }
@media (min-width: 600px) { body { display: grid; min-height: 100dvh; place-items: center; padding: 1.1rem; }.app-shell { width: 26rem; height: min(56rem, calc(100dvh - 2.2rem)); border: .58rem solid #25302a; border-radius: 2.1rem; box-shadow: 0 1.6rem 3.5rem #47463b33; }#appBody { padding-right: .9rem; padding-left: .9rem; }.bottom-nav { border-radius: 0 0 1.45rem 1.45rem; } }
@media (max-width: 350px) { .topbar { padding-right: .75rem; padding-left: .75rem; }#appBody { padding-right: .75rem; padding-left: .75rem; }.hero-card { height: 13.4rem; }.service-section { padding: .68rem; }.service-grid { gap: .26rem; }.service-grid strong { font-size: .46rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
/* Pet-care: keep the floating service header and give the scene image the full screen width. */
.topbar{margin:.45rem .7rem 0;padding:.53rem .7rem;border:1px solid #efe9df;border-radius:1rem;background:#fffdf9ed;box-shadow:0 .35rem 1rem #7056420d}.hero-card{width:calc(100% + 2rem);height:16rem;margin:.55rem 0 0 -1rem;border-radius:0}.hero-message{left:1rem;bottom:1.15rem}.hero-card .hero-top{top:.62rem}.hero-card .hero-bottom{bottom:.55rem}

/* Usable navigation sizing and viewport-contained mockup preview. */
.phone-shell,.app-shell{min-height:0!important}
.bottom-nav,.app-nav{box-sizing:border-box;min-height:4.2rem;padding-block:.42rem max(.48rem,env(safe-area-inset-bottom))}
.bottom-nav button,.bottom-nav a,.app-nav button,.app-nav a{box-sizing:border-box;min-width:2.75rem;min-height:2.85rem;padding:.22rem .12rem;gap:.24rem;font-size:.68rem;line-height:1.15;touch-action:manipulation}
.bottom-nav button>i,.bottom-nav a>i,.app-nav button>i,.app-nav a>i{font-size:1.3rem;line-height:1}
.bottom-nav button.scan,.bottom-nav button.nav-center{min-width:2.9rem;min-height:2.9rem}
.bottom-nav button.scan>i,.bottom-nav button.nav-center>i{font-size:1.35rem}.bottom-nav button.scan>span,.bottom-nav button.nav-center>span{font-size:.58rem}
@media (min-width:600px){.hero-card{width:calc(100% + 1.8rem);height:18rem;margin-left:-.9rem;border-radius:0}}
@media (max-width:350px){.hero-card{height:14.5rem}}