:root{--cream:#fff9ee;--demo-ink:#503c31;--rose:#d7787f;--sage:#71937c;--honey:#e6b95e}
.brand-heading{position:absolute;z-index:8;top:calc(18px + env(safe-area-inset-top));left:20px;right:20px;pointer-events:none;text-shadow:0 2px 14px #33201575}
.brand-heading h1{margin:0;font-size:22px;line-height:1.1;font-weight:850;letter-spacing:-.8px;color:#fff9ee}
.brand-heading h1 b{font-weight:650;font-size:17px;letter-spacing:1px;margin-left:5px}
.brand-heading p{margin:6px 0 0;font-size:10px;letter-spacing:2px;color:#fff5e5}
.top-controls{top:calc(77px + env(safe-area-inset-top));left:16px;right:16px;gap:7px}
.top-controls .pet-profile{height:51px;min-width:145px;max-width:205px}
.pet-avatar{width:39px;height:39px;font-size:25px}.pet-profile-copy strong{font-size:16px}
.header-actions{display:flex;gap:7px;pointer-events:auto}.settings-btn,.music-toggle{width:37px;height:37px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.settings-btn .svg-icon,.music-toggle svg{width:20px;height:20px}.music-toggle{background:#fff6e9e8;color:#775747;border:1px solid #fff7e5b3;box-shadow:0 3px 10px #3d25162b}
.music-toggle[aria-pressed=true]{color:#57856c}.music-toggle .music-slash{display:none}.music-toggle[aria-pressed=false] .music-slash{display:block}
.pet-menu,.settings-panel{top:calc(136px + env(safe-area-inset-top))}
.bond-card{position:absolute;top:calc(142px + env(safe-area-inset-top));left:16px;width:calc(100% - 112px);max-width:254px;z-index:7;color:var(--demo-ink);background:#fff9edee;border:1px solid #fff9f0;border-radius:17px;padding:10px 13px;box-shadow:0 5px 18px #492b1620;backdrop-filter:blur(12px)}
.bond-caption{display:flex;justify-content:space-between;gap:5px;align-items:center;font-size:10px}.bond-caption strong{font-size:12px;color:#8f534f}.bond-caption span{color:#8a7867;font-size:9px}
.bond-track{height:6px;background:#eadfd3;border-radius:9px;overflow:hidden;margin-top:9px}.bond-fill{height:100%;background:linear-gradient(90deg,#e5a28e,#cc7683);border-radius:9px;transition:width 1.5s cubic-bezier(.25,.8,.25,1)}
.pet-vitals{position:absolute;top:calc(216px + env(safe-area-inset-top));left:17px;width:calc(100% - 113px);max-width:254px;z-index:7;display:flex;gap:6px;pointer-events:none}
.vital{display:flex;flex:1;flex-direction:column;align-items:center;gap:3px;padding:7px 1px;border:1px solid #fff9ec85;background:#fff8eade;border-radius:13px;color:var(--demo-ink);box-shadow:0 3px 12px #46261712}
.vital div{display:flex;align-items:center;gap:4px;font-weight:750;font-size:12px}.vital svg{width:16px;height:16px;fill:none;stroke:var(--sage);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.vital small{font-size:9px;color:#8b7567}
.day-night{top:calc(151px + env(safe-area-inset-top));right:17px;width:51px;padding:4px;border-radius:25px}.time-option{width:41px;height:46px;gap:1px}.time-option .svg-icon{width:20px;height:20px}.time-option span{font-size:9px}
.feature-rail{position:absolute;z-index:7;right:15px;top:calc(285px + env(safe-area-inset-top));display:flex;flex-direction:column;gap:12px}
.feature-button{position:relative;background:#fff9eeed;border:1px solid #fff8e6;border-radius:17px;width:58px;height:65px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#765743;box-shadow:0 4px 15px #3f251529;backdrop-filter:blur(10px);transition:transform .18s,background .18s}
.feature-button:hover{transform:translateY(-2px);background:#fffdf7}.feature-button svg{width:25px;height:25px;stroke-width:1.65}.feature-button span{font-size:10px;font-weight:700}.feature-button[data-open=wish]{color:#668b68}.feature-button[data-open=friends]{color:#b97977}
.notification-dot{position:absolute;width:8px;height:8px;background:#e26768;border:2px solid #fff9ef;border-radius:50%;right:10px;top:8px}
.demo-feedback{position:absolute;top:61%;left:50%;transform:translateX(-50%);z-index:12;color:#fff7ed;pointer-events:none;font-size:11px;text-shadow:0 2px 8px #552e29;font-weight:650;animation:demoFeedback 1.8s ease forwards;white-space:nowrap}
.bond-heart{position:absolute;z-index:13;pointer-events:none;font-size:24px;color:#f293a0;text-shadow:0 1px 8px #fff3dfcc;animation:bondHeart 1.5s ease-out forwards}
@keyframes bondHeart{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--drift),-115px) rotate(12deg) scale(1.2)}}
@keyframes demoFeedback{0%{opacity:0;translate:0 4px}20%,65%{opacity:1}100%{opacity:0;translate:0 -12px}}
.demo-dialog{width:min(430px,calc(100vw - 24px));max-height:min(88dvh,850px);padding:0;border:1px solid #fff7e8;border-radius:27px;background:var(--cream);color:var(--demo-ink);box-shadow:0 30px 100px #24190b80;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.demo-dialog::backdrop{background:#281d17a1;backdrop-filter:blur(5px)}
.dialog-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:12px;padding:21px 22px 16px;background:#fff9eef5;backdrop-filter:blur(12px);border-bottom:1px solid #ebdfcb}
.dialog-head div{flex:1}.dialog-eyebrow{font-size:9px;letter-spacing:2px;color:#a98765;font-weight:700}.dialog-head h2{font-size:22px;letter-spacing:-.6px;margin:5px 0 0}.dialog-head button{width:34px;height:34px;background:#f0e5d7;border-radius:50%;font-size:23px;color:#7f6757}
.dialog-body{padding:18px 20px 22px}.dialog-intro{font-size:12px;color:#8c7764;line-height:1.8;margin:0 0 16px}.demo-caption{font-size:10px;line-height:1.6;color:#9e8b77;margin:16px 0 0}
.store-map{position:relative;border-radius:17px;overflow:hidden;border:1px solid #e1cb73;background:#e6d16b}.store-map img{display:block;width:100%;height:auto}
.nearest-hotspot{position:absolute;left:75%;top:37.4%;width:20%;height:6.6%;border:2.5px solid #d85b48;border-radius:17px;background:#fff8db0a;box-shadow:0 0 0 4px #fffaf0a6;cursor:pointer}
.nearest-hotspot::after{content:'最近门店';position:absolute;right:-3px;top:-21px;background:#d65d48;color:white;font-size:9px;border-radius:8px;padding:3px 7px;white-space:nowrap;box-shadow:0 2px 6px #70340f33}
.store-card{margin-top:15px;padding:15px;border:1px solid #e4d5b5;background:white;border-radius:17px}.store-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.store-card h3{font-size:15px;margin:0}.store-badge{font-size:9px;background:#eef4e9;color:#66804e;padding:5px 7px;border-radius:7px;white-space:nowrap}.store-card p{font-size:11px;color:#8d7967;margin:9px 0 0;line-height:1.7}.store-friend{display:flex;gap:7px;align-items:center;margin-top:12px;font-size:11px;color:#749071}.tiny-face{font-size:18px}
.primary-demo-button{width:100%;padding:13px 16px;border:1px solid #647e5e;border-radius:13px;background:#78916d;color:white;font-weight:700;font-size:12px;box-shadow:0 3px 0 #57714f2b;transition:filter .2s}.primary-demo-button:hover{filter:brightness(1.05)}.primary-demo-button:disabled{background:#d1c8b9;color:#fffaf0;border-color:#d1c8b9;cursor:default;box-shadow:none}
.friend-summary{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#96816a;margin-bottom:15px}.friend-summary strong{font-size:20px;color:#6b805e;margin-right:5px}.friend-row{position:relative;border:1px solid #e9dfcf;border-radius:18px;padding:14px 12px;margin-bottom:11px;background:white}.friend-row.pinned{background:#f5f7ee;border-color:#dce4cd}.friend-main{display:flex;gap:10px;align-items:center}.friend-avatar{width:43px;height:43px;flex-shrink:0;border-radius:50%;background:#f4dbc1;overflow:hidden}.friend-avatar svg{width:100%;height:100%}.friend-copy{min-width:0;flex:1}.friend-name{font-size:14px;font-weight:750;display:flex;align-items:center;gap:7px}.pin-label{font-size:8px;font-weight:500;background:#ece6d9;color:#978064;border-radius:5px;padding:3px 5px}.friend-pet{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:10px;color:#8e7a66}.friend-pet img{width:24px;height:24px;border-radius:50%;background:#f3e6d2;object-fit:cover}.chat-button{position:relative;width:39px;height:39px;display:grid;place-items:center;background:#f7f0e5;color:#b28c71;border-radius:13px;flex-shrink:0}.chat-button svg{width:21px;height:21px}.chat-button .notification-dot{right:5px;top:3px}
.friend-location{display:flex;align-items:center;gap:5px;text-align:left;margin:12px 0 0 53px;background:#e6eedc;color:#668050;border-radius:7px;padding:6px 8px;max-width:calc(100% - 53px);font-size:10px;font-weight:600}.friend-location svg{width:13px;height:13px;flex-shrink:0}.friend-location.offline{background:#f6f1e8;color:#a18f7c;cursor:default}
.chat-back{background:none;color:#8d795f;padding:0;margin-bottom:15px;font-size:12px}.chat-bubble{max-width:89%;margin:12px 0;background:#f0e9dc;padding:13px 15px;border-radius:16px 16px 16px 3px;line-height:1.8;font-size:13px}.chat-bubble.sent{background:#dce9d5;margin-left:auto;border-radius:16px 16px 3px 16px}.chat-time{text-align:center;color:#ab9a87;font-size:10px;margin:17px 0}.chat-compose{display:flex;gap:8px;margin-top:20px}.chat-compose input{font:inherit;min-width:0;flex:1;border:1px solid #e3d7c5;background:white;border-radius:12px;padding:11px;color:#614c3a;font-size:12px}.chat-compose button{background:#7b9470;border-radius:12px;color:white;padding:0 14px;font-size:12px}
.wish-hero{position:relative;background:#eef2e3;border-radius:18px;margin-bottom:18px;padding:14px 16px 9px;overflow:hidden;display:flex;align-items:center;gap:6px}.wish-hero svg{width:118px;height:125px;flex-shrink:0}.wish-hero h3{font-size:18px;line-height:1.6;font-weight:750;margin:0 0 6px;color:#637455}.wish-hero p{font-size:10px;line-height:1.8;color:#8b9679;margin:0}
.wish-option{display:flex;align-items:center;gap:12px;border:1px solid #e9dfce;border-radius:16px;padding:15px 12px;margin-bottom:10px;background:white;cursor:pointer}.wish-option:has(input:checked){background:#f0f4e7;border-color:#9bb17a;box-shadow:0 0 0 1px #9bb17a33}.wish-option input{width:17px;height:17px;accent-color:#7e986b;margin-left:auto;flex-shrink:0}.wish-option .wish-icon{width:37px;height:37px;display:grid;place-items:center;background:#f5ecd9;border-radius:12px;font-size:22px}.wish-option strong{font-size:12px;display:block}.wish-option small{font-size:10px;color:#a18b71;display:block;margin-top:5px}.wish-submit{margin-top:8px}.wish-receipt{text-align:center;padding:12px 0 7px}.wish-receipt .success-ring{width:66px;height:66px;display:grid;place-items:center;border-radius:50%;background:#edf3e5;color:#729166;font-size:31px;margin:0 auto 18px}.wish-receipt h3{font-size:20px}.wish-receipt p{font-size:12px;line-height:1.9;color:#938169}.wish-receipt .chosen-wish{margin:18px 0;padding:18px;background:white;border:1px solid #e5dbc8;border-radius:15px;font-size:14px;font-weight:700}.text-demo-button{background:none;color:#889275;text-decoration:underline;text-underline-offset:4px;margin-top:16px;font-size:11px}
.demo-dialog :focus-visible{outline:2px solid #8aa478;outline-offset:3px}.demo-dialog svg.icon,.feature-button svg,.music-toggle svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dialog-body>*:last-child{margin-bottom:0}
@media(max-width:355px){.brand-heading h1{font-size:20px}.brand-heading h1 b{font-size:15px}.bond-card{width:calc(100% - 98px);padding:10px}.pet-vitals{width:calc(100% - 98px)}.bond-caption span{font-size:8px}.feature-button{width:50px;height:58px}.feature-rail{right:12px}.header-actions{gap:5px}.pet-profile-copy small{font-size:9px}.dialog-body{padding:16px}.dialog-head{padding:18px}.friend-location{font-size:9px}}
@media(max-height:700px){.brand-heading{top:12px}.brand-heading h1{font-size:20px}.brand-heading p{margin-top:4px}.top-controls{top:63px}.bond-card{top:126px}.pet-vitals{top:195px}.day-night{top:132px}.feature-rail{top:255px;gap:9px}.feature-button{height:55px;width:51px;gap:3px}.feature-button svg{width:22px;height:22px}.app:has(#secondary-row:not(.hidden)) .feature-rail{visibility:hidden}.pet-menu,.settings-panel{top:120px}.demo-dialog{max-height:94dvh}}
@media(prefers-reduced-motion:reduce){.bond-fill{transition:none}.bond-heart,.demo-feedback{animation:none}.bond-heart{display:none}.feature-button{transition:none}}