*{box-sizing:border-box}body{margin:0;background:#eef9ff;color:#163547;font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}.card{max-width:620px;margin:0 auto;min-height:100vh;padding:22px 18px 36px}header,.row,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:28px;margin:0;color:#0b78a3}header p{margin:5px 0 0;color:#568096}.badge{padding:6px 10px;border-radius:999px;background:#dff5ff;font-size:13px;white-space:nowrap}.badge.online{background:#d8f3ff;color:#0b78a3}.badge.offline{background:#e7f2f7}.status-card{background:#fff;border:1px solid #ccecff;border-radius:20px;padding:17px;margin-top:16px;box-shadow:0 7px 24px rgba(21,151,199,.09)}.section-heading>span{font-size:14px;color:#5d8497}.section-heading strong{color:#0b78a3}.primary-detail{font-size:18px;font-weight:700;line-height:1.5;margin:12px 0 7px}.countdown,.context-lines,.detail,.safety{color:#55788a;line-height:1.55}.countdown{padding:9px 11px;background:#e8f8ff;border-radius:12px}.context-lines{font-size:13px;display:grid;gap:4px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:13px}.metrics div,.diagnostic-metrics div{display:flex;flex-direction:column;text-align:center;padding:10px 3px;border-radius:13px;background:#eaf8ff}.metrics strong,.diagnostic-metrics strong{font-size:22px;color:#0b78a3}.metrics span,.diagnostic-metrics span{font-size:12px;color:#5d8497}.controls{display:grid;gap:10px;margin-top:16px}.primary-controls button{width:100%;background:#1597c7;box-shadow:0 6px 18px rgba(21,151,199,.24)}button{border:0;border-radius:14px;padding:13px 16px;font-size:16px;background:#0b78a3;color:#fff}button.secondary{background:#dff5ff;color:#0b668c}button:disabled{opacity:.45}button[hidden]{display:none}.safety{text-align:center;font-size:12px;margin:18px 10px 0}#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#163547;color:#fff;padding:10px 14px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:100}#toast.show,#toast.error{opacity:1}#toast.error{background:#8b2525}

.install-tip{background:#fff8df;border:1px solid #ecdba0;border-radius:14px;padding:12px 14px;margin-top:16px;color:#5b5134;line-height:1.5;font-size:14px}.install-tip[hidden]{display:none}

.notification-fallback{margin-top:18px;background:#fff;border-radius:16px;padding:14px 16px;color:#555}.notification-fallback summary{cursor:pointer;font-weight:650;color:#333}.notification-fallback p{font-size:13px;line-height:1.5}.fallback-actions{display:grid;gap:10px;margin-top:10px}.fallback-link{display:block;text-align:center;padding:12px 14px;border-radius:14px;background:#f0f0ed;color:#222;text-decoration:none}.fallback-link[hidden]{display:none}

.pet-card{background:#fff;border:1px solid #ccecff;border-radius:20px;padding:14px 16px;margin-top:18px;text-align:center;box-shadow:0 5px 22px rgba(21,151,199,.08);overflow:hidden}
.pet-stage{position:relative;height:min(190px,52vw);display:grid;place-items:center;overflow:hidden;isolation:isolate}
.pet-safe-viewport{grid-area:1/1;margin:0 auto;width:min(190px,52vw);height:min(190px,52vw);max-width:100%;display:grid;place-items:center;overflow:hidden}
.pet-render.pet-visual{width:100%;height:100%;max-width:100%;position:relative;z-index:1;--pet-motion-cycle-ms:3000ms;--pet-motion-x:0px;--pet-motion-y:2px;--pet-motion-scale-factor:1.004;--pet-motion-rotate:.2deg;animation:pet-whole-motion var(--pet-motion-cycle-ms) ease-in-out infinite;will-change:transform}
.pet-visual>img{width:100%;height:100%;display:block;object-fit:contain;cursor:pointer;user-select:none;-webkit-user-drag:none}
.pet-visual[data-pet-state="running"],.pet-visual[data-pet-state="submitting"]{animation-timing-function:cubic-bezier(.45,.05,.55,.95)}
.pet-visual[data-pet-state="completed"]{animation-iteration-count:3}
@keyframes pet-whole-motion{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,calc(0px - var(--pet-motion-y)),0) scale(var(--pet-motion-scale-factor))}}
@media (prefers-reduced-motion:reduce){.pet-visual{animation-duration:6s;animation-timing-function:ease-in-out}}
.pet-bubble{position:absolute;right:8px;top:8px;max-width:58%;background:#fff8df;border:1px solid #ecdba0;border-radius:14px;padding:8px 11px;font-size:13px;box-shadow:0 4px 12px rgba(0,0,0,.07);z-index:2}
.pet-bubble[hidden]{display:none}
.pet-caption{margin:3px 0 10px;font-weight:650}
.pet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pet-counts{font-size:12px;color:#888;margin:10px 0 0}
@keyframes pet-bob{0%{transform:translate3d(0,2px,0) scale(1)}50%{transform:translate3d(2px,-5px,0) scale(1.012)}100%{transform:translate3d(0,1px,0) scale(1)}}
@keyframes pet-breathe{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-3px,0) scale(1.012)}}
@keyframes pet-observe{0%,100%{transform:translate3d(0,0,0) rotate(0)}45%{transform:translate3d(1px,-2px,0) rotate(1.2deg)}70%{transform:translate3d(-1px,-1px,0) rotate(-.8deg)}}
@keyframes pet-celebrate{from{transform:rotate(-2deg) scale(1)}to{transform:rotate(2deg) scale(1.03)}}

.pet-stage.pet-micro-tilt-left .pet-visual{animation:pet-micro-tilt-left 2.6s ease-in-out 1}
.pet-stage.pet-micro-tilt-right .pet-visual{animation:pet-micro-tilt-right 2.6s ease-in-out 1}
.pet-stage.pet-micro-look .pet-visual{animation:pet-micro-look 3s ease-in-out 1}
.pet-stage.pet-micro-wiggle .pet-visual{animation:pet-micro-wiggle 2.8s ease-in-out 1}
.pet-stage.pet-micro-bounce .pet-visual{animation:pet-micro-bounce 2.6s ease-in-out 1}
.pet-stage.pet-micro-happy .pet-visual{animation:pet-micro-happy 2.8s ease-in-out 1}
@keyframes pet-micro-tilt-left{0%,100%{transform:translateY(0) rotate(0) scale(1)}30%{transform:translateY(-1px) rotate(-1.5deg) scale(1.002)}65%{transform:translateY(0) rotate(.8deg) scale(1.001)}}
@keyframes pet-micro-tilt-right{0%,100%{transform:translateY(0) rotate(0) scale(1)}30%{transform:translateY(-1px) rotate(1.5deg) scale(1.002)}65%{transform:translateY(0) rotate(-.8deg) scale(1.001)}}
@keyframes pet-micro-look{0%,100%{transform:translate3d(0,0,0)}28%{transform:translate3d(-2px,-1px,0)}62%{transform:translate3d(2px,-1px,0)}82%{transform:translate3d(-1px,0,0)}}
@keyframes pet-micro-wiggle{0%,100%{transform:rotate(0) scale(1)}28%{transform:rotate(-1.2deg) scale(1.003)}62%{transform:rotate(1.2deg) scale(1.004)}}
@keyframes pet-micro-bounce{0%,100%{transform:translateY(0) scale(1)}32%{transform:translateY(-4px) scale(1.006)}68%{transform:translateY(-1px) scale(1.002)}}
@keyframes pet-micro-happy{0%,100%{transform:translateY(0) rotate(0) scale(1)}30%{transform:translateY(-3px) rotate(-1.5deg) scale(1.008)}62%{transform:translateY(-1px) rotate(1.2deg) scale(1.004)}}

.pet-stage.pet-micro-sniff .pet-visual{animation:pet-micro-sniff 2.8s ease-in-out 1}
.pet-stage.pet-micro-sleepy .pet-visual{animation:pet-micro-sleepy 3.4s ease-in-out 1}
.pet-stage.pet-micro-proud .pet-visual{animation:pet-micro-proud 3s ease-in-out 1}
@keyframes pet-micro-sniff{0%,100%{transform:translate3d(0,0,0) scale(1)}30%{transform:translate3d(-1px,-1px,0) scale(1.002)}65%{transform:translate3d(1px,0,0) scale(1.004)}}
@keyframes pet-micro-sleepy{0%,100%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(2px) scale(.998);opacity:.98}}
@keyframes pet-micro-proud{0%,100%{transform:translateY(0) scale(1)}42%{transform:translateY(-2px) scale(1.006)}70%{transform:translateY(-1px) scale(1.003)}}

.pairing-panel{position:fixed;inset:0;z-index:50;background:#f5f5f3;display:grid;place-items:center;padding:20px}.pairing-panel[hidden]{display:none}.pairing-dialog{width:min(440px,100%);background:#fff;border-radius:24px;padding:26px;box-shadow:0 14px 50px rgba(0,0,0,.1);text-align:center}.pairing-dialog .eyebrow{margin:0 0 8px;color:#777;font-size:13px}.pairing-dialog h2{margin:0 0 10px}.pairing-device,.pairing-detail{color:#666;line-height:1.55}.pairing-code{font-size:38px;font-weight:800;letter-spacing:.08em;margin:20px 0;color:#1677ff}.pairing-dialog button{width:100%;margin-top:10px}

.notification-settings{margin-top:18px;background:#fff;border:1px solid #ccecff;border-radius:16px;padding:14px 16px;color:#55788a}.notification-settings>summary{cursor:pointer;font-weight:650;color:#285c75}

@media(max-width:390px){.card{padding-left:13px;padding-right:13px}.metrics,.diagnostic-metrics{grid-template-columns:repeat(2,1fr)}.pet-stage{height:min(178px,50vw)}.pet-safe-viewport{width:min(178px,50vw);height:min(178px,50vw)}}