:root {
    --ink: #202b2a;
    --muted: #697572;
    --paper: #f1f0eb;
    --paper-2: #fbfaf6;
    --teal: #245f58;
    --teal-dark: #173f3b;
    --mint: #c4d7d1;
    --orange: #b76d46;
    --yellow: #c4a35f;
    --rose: #a97871;
    --line: rgba(32, 43, 42, .14);
    --shadow: 0 24px 65px rgba(24, 38, 37, .12);
    --radius: 19px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
    overflow-x: hidden;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
}
button, input, textarea { font: inherit; }
button { color: inherit; }

#ambient { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#ambient i { position: absolute; border-radius: 50%; filter: blur(10px); opacity: .3; }
#ambient i:nth-child(1) { width: 460px; height: 460px; background: #b9d0c9; top: -160px; right: -100px; }
#ambient i:nth-child(2) { width: 300px; height: 300px; background: #d9c1ad; bottom: -120px; left: 17%; }
#ambient i:nth-child(3) { width: 160px; height: 160px; border: 28px solid rgba(31,118,108,.08); top: 40%; left: -90px; }

.loading-screen, .auth-screen { min-height: 100vh; display: grid; place-items: center; position: relative; z-index: 1; }
.loading-screen { align-content: center; gap: 12px; color: var(--muted); }
.brand-mark { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--teal); box-shadow: 0 12px 30px rgba(31,118,108,.2); font-size: 24px; }
.brand-mark.small { width: 46px; height: 46px; border-radius: 12px; }

.auth-screen { grid-template-columns: minmax(320px, 1.05fr) minmax(360px, .95fr); padding: 48px max(5vw, 40px); gap: 8vw; }
.auth-story { max-width: 610px; }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; color: var(--teal); font-size: 13px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--orange); }
.auth-story h1 { margin: 24px 0 18px; font-family: Georgia, "STSong", serif; font-size: clamp(48px, 6vw, 86px); line-height: .98; letter-spacing: -.05em; font-weight: 500; }
.auth-story h1 em { color: var(--teal); font-style: normal; }
.auth-story > p { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.auth-companion-stage { height: 218px; max-width: 570px; display: flex; align-items: center; gap: 23px; margin-top: 24px; padding: 13px 24px 13px 7px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: #edf3ef; background: linear-gradient(120deg, #1e2a29, #244a45); box-shadow: 0 22px 48px rgba(25,39,37,.18); }
.auth-companion-stage img { width: 205px; height: 255px; align-self: flex-end; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 18px 18px rgba(0,0,0,.25)); }
.auth-companion-stage div { min-width: 0; }
.auth-companion-stage span, .auth-companion-stage b, .auth-companion-stage small { display: block; }
.auth-companion-stage span { color: #9fc4b8; font: 700 9px/1.4 Consolas, monospace; letter-spacing: .16em; }
.auth-companion-stage b { margin-top: 12px; font: 500 19px/1.45 Georgia, "STSong", serif; }
.auth-companion-stage small { margin-top: 10px; color: rgba(237,243,239,.58); font-size: 10px; letter-spacing: .04em; }
.promise-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 34px; }
.promise { padding: 18px 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.45); }
.promise b { display: block; margin-bottom: 5px; font-family: Georgia, serif; font-size: 23px; color: var(--teal-dark); }
.promise span { font-size: 12px; color: var(--muted); }

.auth-card { width: min(460px, 100%); justify-self: end; padding: 38px; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; background: rgba(251,250,246,.88); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.auth-card h2 { margin: 0 0 8px; font-family: Georgia, "STSong", serif; font-weight: 500; font-size: 34px; }
.auth-card .lead { margin: 0 0 28px; color: var(--muted); font-size: 14px; }
.tabs { display: flex; padding: 4px; border-radius: 14px; background: #ecebe3; margin-bottom: 24px; }
.tabs button { flex: 1; border: 0; padding: 10px; border-radius: 11px; background: transparent; cursor: pointer; font-weight: 700; color: var(--muted); }
.tabs button.active { color: var(--ink); background: var(--paper-2); box-shadow: 0 4px 12px rgba(20,40,38,.08); }
.form-field { margin-bottom: 17px; }
.form-field label { display: block; margin: 0 0 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.input { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; color: var(--ink); background: rgba(255,255,255,.75); outline: none; transition: .18s; }
.input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(31,118,108,.1); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 0 18px; border: 0; border-radius: 13px; background: var(--teal); color: #fff; font-weight: 800; cursor: pointer; box-shadow: 0 7px 18px rgba(31,118,108,.17); transition: transform .16s, filter .16s; }
.button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.button:disabled { opacity: .5; cursor: wait; transform: none; }
.button.block { width: 100%; }
.button.secondary { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.button.warm { background: var(--orange); }
.button.danger { background: #b45555; }
.button.small { min-height: 34px; padding: 0 12px; font-size: 12px; border-radius: 10px; }
.legal-note { margin-top: 20px; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
.consent-check { display:flex; align-items:flex-start; gap:8px; margin:10px 0; color:var(--muted); font-size:9px; line-height:1.55; cursor:pointer; }
.consent-check input { margin-top:2px; accent-color:var(--teal); }

.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; position: relative; z-index: 1; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 25px 20px; background: rgba(16,46,42,.97); color: #eef8f3; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 7px 22px; border-bottom: 1px solid rgba(255,255,255,.11); }
.brand .brand-mark { width: 40px; height: 40px; border-radius: 14px; background: #e6f0e9; color: var(--teal-dark); box-shadow: none; font-size: 18px; }
.brand b { display: block; font-family: Georgia, "STSong", serif; font-size: 20px; font-weight: 500; }
.brand span { display: block; color: rgba(238,248,243,.52); font-size: 10px; letter-spacing: .1em; }
.side-section-title { margin: 25px 8px 10px; color: rgba(238,248,243,.42); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.pet-list { display: grid; gap: 7px; max-height: 220px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
.pet-switch { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 14px; color: rgba(255,255,255,.68); background: transparent; cursor: pointer; text-align: left; }
.pet-switch.active, .pet-switch:hover { background: rgba(255,255,255,.1); color: #fff; }
.pet-avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #466660; color: #fff; font-size: 11px; font-weight: 900; }
.pet-switch strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.pet-switch small { color: rgba(255,255,255,.42); font-size: 10px; }
.new-pet { width: 100%; margin-top: 7px; padding: 10px; border: 1px dashed rgba(255,255,255,.2); border-radius: 13px; color: rgba(255,255,255,.65); background: transparent; cursor: pointer; }
.pet-limit { margin-top: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; color: rgba(255,255,255,.38); font-size: 10px; text-align: center; }
.nav { display: grid; gap: 4px; }
.nav button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 12px; padding: 10px 12px; color: rgba(255,255,255,.62); background: transparent; cursor: pointer; text-align: left; font-size: 13px; }
.nav button::before { content: attr(data-icon); width: 20px; text-align: center; font-size: 15px; }
.nav button.active, .nav button:hover { color: #fff; background: rgba(255,255,255,.08); }
.mobile-more, .mobile-nav-sheet { display: none; }
.mobile-nav-sheet[hidden] { display: none !important; }
.user-chip { margin-top: auto; padding: 15px 10px 0; border-top: 1px solid rgba(255,255,255,.11); display: flex; align-items: center; gap: 10px; }
.user-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); font-weight: 800; }
.user-chip div { min-width: 0; flex: 1; }
.user-chip b, .user-chip small { display: block; overflow: hidden; text-overflow: ellipsis; }
.user-chip b { font-size: 12px; }
.user-chip small { color: rgba(255,255,255,.42); font-size: 9px; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 10px; color: inherit; background: rgba(255,255,255,.08); cursor: pointer; }

.workspace { padding: 28px clamp(24px, 4vw, 58px) 60px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.topbar h1 { margin: 0; font-family: Georgia, "STSong", serif; font-size: clamp(30px, 3vw, 43px); font-weight: 500; letter-spacing: -.03em; }
.topbar p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); font-size: 11px; font-weight: 800; }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #61a77c; box-shadow: 0 0 0 4px rgba(97,167,124,.13); }
.status-pill.warn::before { background: var(--orange); }

.grid { display: grid; gap: 18px; }
.dashboard-grid { grid-template-columns: minmax(310px, 1.15fr) minmax(300px, .85fr); }
.card { border: 1px solid rgba(255,255,255,.75); border-radius: var(--radius); background: rgba(255,253,247,.78); box-shadow: 0 13px 38px rgba(39,61,57,.08); overflow: hidden; }
.card-body { padding: 25px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.card-head h2, .card-head h3 { margin: 0; font-family: Georgia, "STSong", serif; font-weight: 500; }
.card-head h2 { font-size: 26px; }
.card-head h3 { font-size: 21px; }
.card-head p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }

.pet-hero { min-height: 550px; display: grid; grid-template-rows: 1fr auto; position: relative; isolation: isolate; background: radial-gradient(circle at 50% 42%, #35423f, #111716 68%); }
.pet-hero::before { content: ""; position: absolute; width: 260px; height: 260px; border: 35px solid rgba(255,255,255,.2); border-radius: 50%; right: -100px; top: -100px; z-index: -1; }
.pet-scene { display: grid; place-items: center; min-height: 420px; padding: 18px; }
.pet-art { position: relative; width: 190px; height: 176px; transform-origin: 50% 82%; animation: petIdle 3.2s ease-in-out infinite; filter: drop-shadow(0 25px 22px rgba(31,75,67,.2)); }
.pet-art .animal-kind { position:absolute; z-index:8; left:50%; bottom:-26px; transform:translateX(-50%); padding:4px 9px; border-radius:999px; color:var(--teal-dark); background:rgba(255,255,255,.88); border:1px solid rgba(31,118,108,.14); font-size:9px; font-weight:800; white-space:nowrap; }
.character-portrait img { width:100%; height:100%; object-fit:contain; transform-origin:50% 82%; transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s; }
.pet-stage-sprite { position:absolute; inset:0; display:block; background-image:var(--pet-sheet); background-size:400% 200%; background-position:var(--sprite-x) var(--sprite-y); background-repeat:no-repeat; transform-origin:50% 82%; transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s; }
.companion-avatar .pet-stage-sprite.compact { position:relative; inset:auto; width:48px; height:64px; flex:none; transform:scale(1.42); }
.character-portrait.form-bean img { transform:scaleX(1.06) scaleY(.96); }
.character-portrait.form-pear img { transform:scaleX(.94) scaleY(1.04); }
.character-portrait.form-tall img { transform:scaleX(.88) scaleY(1.1); }
.character-portrait.form-diamond img { transform:skewX(-2deg) scale(.98,1.04); }
.character-portrait.age-newborn img { transform:scale(.78); }
.character-portrait.age-toddler img { transform:scale(.86); }
.character-portrait.age-child img { transform:scale(.92); }
.character-portrait.age-teen img { transform:scale(.97); }
.character-portrait.age-mature img,.character-portrait.age-elder img { filter:saturate(.88) contrast(1.04); }
.character-portrait.pose-lean img { transform:rotate(-7deg) translateX(-7px) scale(1.03); }
.character-portrait.pose-hug img { transform:scaleX(1.1) scaleY(.94) translateY(5px); filter:saturate(1.12); }
.character-portrait.pose-play img { animation:flexiblePlay .62s cubic-bezier(.2,.8,.3,1) 3; }
.character-portrait.pose-sit img { transform:translateY(10px) scaleY(.92); filter:saturate(.9); }
.character-portrait .form-aura { position:absolute; inset:12%; border-radius:50%; opacity:0; background:radial-gradient(circle,rgba(255,205,120,.35),transparent 68%); }
.character-portrait.expression-bright .form-aura { opacity:1; animation:auraPulse 2.2s ease-in-out infinite; }
.character-portrait.expression-soft img { filter:saturate(.78) brightness(.95); }
@keyframes flexiblePlay { 0%,100%{transform:translate(0,0) rotate(0)} 35%{transform:translate(-11px,-12px) rotate(-6deg)} 70%{transform:translate(10px,-5px) rotate(6deg)} }
@keyframes auraPulse { 50%{transform:scale(1.16);opacity:.45} }
.pet-art.motion-happy { animation: petHappy .78s ease-in-out infinite; }
.pet-art.motion-sleep { animation: petSleep 2.4s ease-in-out infinite; }
.pet-art.motion-weak { animation: petWeak 2.8s ease-in-out infinite; }
.pet-art.motion-critical { animation: petCritical .24s linear infinite; }
.pet-art.action-feed { animation: petFeed .34s ease-in-out 3 !important; }
.pet-art.action-drink { animation: petDrink .45s ease-in-out 2 !important; }
.pet-art.action-medicine { animation: petMedicine .15s linear 7 !important; }
.pet-art.action-play { animation: petPlay .38s ease-in-out 3 !important; }
.pet-art.action-pet { animation: petSway .42s ease-in-out 3 !important; }
.live-pet-stage { min-height:230px; display:grid; place-items:center; overflow:hidden; border-radius:16px; background:radial-gradient(circle,rgba(125,213,198,.2),transparent 68%); }
.live-pet-stage .pet-art.character-portrait { width:150px; height:214px; border:0; background:transparent; box-shadow:none; }
.interaction-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr)); }
.live-response.boundary { border-color:rgba(190,112,78,.38); background:rgba(255,236,224,.72); }
.live-stream .boundary { color:#a65d42; }
.pet-art.interaction-pat,.pet-art.interaction-boop { animation:interactionLean .7s ease-in-out 1 !important; }
.pet-art.interaction-hug { animation:interactionHug 1.05s ease-in-out 1 !important; }
.pet-art.interaction-play,.pet-art.interaction-high_five,.pet-art.interaction-cheer { animation:interactionJump .42s ease-in-out 3 !important; }
.pet-art.interaction-dance { animation:interactionDance .42s ease-in-out 4 !important; }
.pet-art.interaction-tickle { animation:interactionTickle .12s linear 8 !important; }
.pet-art.interaction-quiet,.pet-art.interaction-focus,.pet-art.interaction-rest { animation:interactionBreathe 1.6s ease-in-out 1 !important; }
.pet-art.interaction-boundary { animation:interactionBoundary .3s ease-out 2 !important; }
@keyframes interactionLean { 35%{transform:translateX(-12px) rotate(-5deg) scale(1.04)} 70%{transform:translateX(5px) rotate(2deg)} }
@keyframes interactionHug { 35%{transform:scale(.9,1.08)} 65%{transform:scale(1.1,.92)} }
@keyframes interactionJump { 45%{transform:translateY(-24px) scale(1.06)} }
@keyframes interactionDance { 25%{transform:translate(-10px,-8px) rotate(-7deg)} 75%{transform:translate(10px,-8px) rotate(7deg)} }
@keyframes interactionTickle { 25%{transform:translateX(-5px) rotate(-2deg)} 75%{transform:translateX(5px) rotate(2deg)} }
@keyframes interactionBreathe { 50%{transform:translateY(5px) scale(.97);filter:saturate(.82)} }
@keyframes interactionBoundary { 50%{transform:translateX(12px) rotate(3deg);filter:saturate(.65)} }
.pet-art .limb { position:absolute; z-index:1; display:block; background:var(--pet-color); border:1px solid rgba(21,50,47,.08); }
.pet-art .arm { width:17px; height:43px; top:91px; border-radius:99px; transform-origin:50% 8px; }
.pet-art .arm::after { content:""; position:absolute; width:20px; height:20px; left:-3px; bottom:-6px; border-radius:50%; background:var(--pet-secondary); box-shadow:inset 3px 2px 0 rgba(255,255,255,.18); }
.pet-art .arm-left { left:25px; transform:rotate(29deg); }
.pet-art .arm-right { right:25px; transform:rotate(-29deg); }
.pet-art .leg { width:19px; height:38px; bottom:-5px; border-radius:99px; }
.pet-art .leg::after { content:""; position:absolute; width:30px; height:17px; left:-6px; bottom:-3px; border-radius:60% 60% 52% 52%; background:var(--pet-secondary); box-shadow:inset 4px 2px 0 rgba(255,255,255,.16); }
.pet-art .leg-left { left:52px; transform:rotate(8deg); }
.pet-art .leg-right { right:52px; transform:rotate(-8deg); }
.pet-art.motion-idle .arm-left { animation:armWave 4.8s ease-in-out infinite; }
.pet-art.motion-happy .arm-left { animation:armCheer .78s ease-in-out infinite; }
.pet-art.motion-happy .arm-right { animation:armCheerRight .78s ease-in-out infinite; }
.pet-art.motion-sleep .arm-left { transform:rotate(67deg); }
.pet-art.motion-sleep .arm-right { transform:rotate(-67deg); }
.pet-art .body { position: absolute; z-index: 2; width: 140px; height: 128px; left: 25px; bottom: 5px; border-radius: 48% 52% 43% 47%; background-color: var(--pet-color, #65a99b); transition: .25s; }
.pet-art.morph-bean .body { width: 146px; height: 116px; left: 22px; bottom: 8px; border-radius: 58% 42% 50% 39% / 52% 44% 56% 48%; transform: rotate(-5deg); }
.pet-art.morph-pear .body { width: 128px; height: 142px; left: 31px; border-radius: 45% 46% 36% 38% / 34% 34% 66% 66%; }
.pet-art.morph-tall .body { width: 104px; height: 151px; left: 43px; border-radius: 46% 54% 37% 43% / 30% 31% 69% 70%; }
.pet-art.morph-squash .body { width: 166px; height: 103px; left: 12px; bottom: 10px; border-radius: 50% 50% 38% 42% / 63% 61% 39% 37%; }
.pet-art.morph-diamond .body { width: 135px; height: 135px; left: 28px; clip-path: polygon(50% 0, 96% 42%, 78% 91%, 43% 100%, 3% 58%, 17% 18%); border-radius: 24%; }
.pet-art.morph-puff .body { width: 157px; height: 121px; left: 17px; border-radius: 33% 49% 38% 51% / 41% 34% 57% 59%; box-shadow: inset 18px 13px 0 rgba(255,255,255,.1), -13px -9px 0 -2px var(--pet-secondary), 14px -12px 0 -3px var(--pet-color); }
.pet-art .face { position: absolute; z-index: 4; inset: 27% 14% 13%; transform: rotate(0); }
.pet-art.morph-bean .face { transform: rotate(5deg); }
.pet-art .face::before { content:""; position:absolute; z-index:0; width:48px; height:34px; left:calc(50% - 24px); top:38%; border-radius:52% 52% 48% 48%; background:color-mix(in srgb,var(--pet-secondary),white 28%); opacity:.92; }
.pet-art .eyes,.pet-art .nose,.pet-art .mouth,.pet-art .cheek { z-index:1; }
.pet-art .eyes { position: absolute; top: 17%; left: 12%; right: 12%; display: flex; justify-content: center; align-items: center; gap: 18px; }
.pet-art .eye { display: block; width: 13px; height: 19px; border-radius: 50%; background: var(--ink); box-shadow: inset 3px 3px 0 rgba(255,255,255,.82); animation: blink 5s infinite; }
.pet-art.eyes-cyclops .eye { width: 26px; height: 31px; border: 5px solid var(--pet-secondary, #c5e7d7); box-shadow: inset 4px 3px 0 rgba(255,255,255,.85); }
.pet-art.eyes-trio .eyes { gap: 10px; }
.pet-art.eyes-trio .eye:nth-child(2) { width: 17px; height: 25px; transform: translateY(-7px); }
.pet-art.eyes-sleepy .eye { width: 22px; height: 9px; border-radius: 0 0 50% 50%; background: transparent; border-bottom: 3px solid var(--ink); box-shadow: none; animation: none; }
.pet-art .nose { position: absolute; width: 10px; height: 7px; left: calc(50% - 5px); top: 51%; border-radius: 50% 50% 70% 70%; background: var(--pet-accent, #693d43); }
.pet-art .mouth { position: absolute; width: 21px; height: 10px; left: calc(50% - 10px); top: 57%; border-bottom: 2px solid var(--ink); border-radius: 50%; }
.pet-art .cheek { position: absolute; width: 20px; height: 9px; top: 58%; border-radius: 50%; background: rgba(255,180,178,.48); }
.pet-art .cheek-left { left: 1%; }
.pet-art .cheek-right { right: 1%; }
.pet-art .ear { position: absolute; z-index: 3; display: block; background: var(--pet-secondary); }
.pet-art .ear-left { left: 15%; }
.pet-art .ear-right { right: 15%; }
.pet-art.ears-antenna .ear { width: 8px; height: 57px; top: -42px; border-radius: 9px; transform-origin: bottom; transform: rotate(-14deg); }
.pet-art.ears-antenna .ear-right { transform: rotate(14deg); }
.pet-art.ears-antenna .ear::after { content: ""; position: absolute; width: 19px; height: 19px; left: -5px; top: -5px; border-radius: 50%; background: var(--accent); box-shadow: inset 4px 3px 0 rgba(255,255,255,.2); }
.pet-art.ears-horns .ear { width: 42px; height: 55px; top: -29px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--accent); transform: rotate(-12deg); }
.pet-art.ears-horns .ear-right { transform: rotate(12deg); }
.pet-art.ears-leaf .ear { width: 53px; height: 72px; top: -37px; border-radius: 100% 5% 100% 8%; transform: rotate(-25deg); box-shadow: inset -8px -8px 0 rgba(0,0,0,.06); }
.pet-art.ears-leaf .ear-right { transform: scaleX(-1) rotate(-25deg); }
.pet-art.ears-fins .ear { width: 61px; height: 37px; top: 22px; left: -35px; clip-path: polygon(0 50%, 100% 0, 78% 50%, 100% 100%); background: var(--accent); }
.pet-art.ears-fins .ear-right { left: auto; right: -35px; transform: scaleX(-1); }
.pet-art.ears-mismatch .ear-left { width: 38px; height: 55px; top: -30px; clip-path: polygon(50% 0,100% 100%,0 100%); background: var(--accent); transform: rotate(-16deg); }
.pet-art.ears-mismatch .ear-right { width: 9px; height: 67px; top: -49px; border-radius: 9px; transform: rotate(13deg); }
.pet-art.ears-mismatch .ear-right::after { content:""; position:absolute; width:21px; height:21px; left:-6px; top:-6px; border-radius:50%; background:var(--secondary); }
.pet-art.ears-cat .ear, .pet-art.ears-fox .ear { width: 38px; height: 46px; top: -23px; left:20%; clip-path: polygon(50% 0,100% 100%,0 100%); background: var(--pet-secondary); transform: rotate(-9deg); }
.pet-art.ears-cat .ear-right, .pet-art.ears-fox .ear-right { left:auto; right:20%; }
.pet-art.ears-cat .ear-right, .pet-art.ears-fox .ear-right { transform: rotate(9deg); }
.pet-art.ears-fox .ear { width: 39px; height: 50px; top: -27px; background:linear-gradient(145deg,var(--pet-color) 0 64%,var(--pet-accent) 65%); }
.pet-art.ears-dog .ear { width: 48px; height: 70px; top: -10px; left: 4%; border-radius: 72% 28% 70% 34%; transform: rotate(22deg); box-shadow: inset -7px -8px 0 rgba(0,0,0,.06); }
.pet-art.ears-dog .ear-right { left:auto; right:4%; transform:scaleX(-1) rotate(22deg); }
.pet-art.ears-rabbit .ear { width: 31px; height: 86px; top: -65px; left: 23%; border-radius: 70% 70% 45% 45%; transform: rotate(-7deg); box-shadow: inset 0 0 0 8px var(--pet-secondary), inset 0 0 0 15px rgba(255,180,178,.42); }
.pet-art.ears-rabbit .ear-right { left:auto; right:23%; transform:rotate(7deg); }
.pet-art.ears-bear .ear { width: 44px; height: 44px; top: -14px; left: 5%; border-radius: 50%; box-shadow: inset 0 0 0 8px var(--accent); }
.pet-art.ears-bear .ear-right { left:auto; right:5%; }
.pet-art .appendage { position: absolute; z-index: 1; display: block; background: var(--pet-secondary); }
.pet-art.appendage-tail .appendage-left { width: 77px; height: 73px; right: 4px; bottom: 16px; border: 17px solid var(--accent); border-left-color: transparent; border-radius: 50%; background: transparent; transform: rotate(20deg); }
.pet-art.appendage-wings .appendage { width: 72px; height: 88px; top: 63px; left: -12px; border-radius: 90% 10% 80% 20%; transform: rotate(-17deg); box-shadow: inset -10px -8px 0 rgba(255,255,255,.13); }
.pet-art.appendage-wings .appendage-right { left: auto; right: -12px; transform: scaleX(-1) rotate(-17deg); }
.pet-art.appendage-tentacles .appendage { width: 28px; height: 72px; bottom: -6px; left: 48px; border-radius: 0 0 60% 60%; transform: rotate(13deg); }
.pet-art.appendage-tentacles .appendage-right { left: auto; right: 48px; transform: rotate(-13deg); }
.pet-art.appendage-tentacles::after { content:""; position:absolute; z-index:1; width:28px; height:61px; left:81px; bottom:-10px; border-radius:0 0 60% 60%; background:var(--accent); }
.pet-art.appendage-crystal .appendage { width: 43px; height: 69px; top: 32px; left: 7px; clip-path: polygon(50% 0,100% 66%,62% 100%,10% 77%); background: var(--accent); transform: rotate(-27deg); }
.pet-art.appendage-crystal .appendage-right { left:auto; right:8px; top:48px; width:35px; height:55px; transform:scaleX(-1) rotate(-25deg); }
.pet-art.appendage-fin .appendage-left { width: 83px; height: 91px; right: -13px; top: 63px; border-radius: 0 100% 0 100%; background: var(--accent); transform: rotate(28deg); }
.pet-art.appendage-cat .appendage-right, .pet-art.appendage-dog .appendage-right, .pet-art.appendage-rabbit .appendage-right, .pet-art.appendage-fox .appendage-right, .pet-art.appendage-bear .appendage-right { display:none; }
.pet-art.appendage-cat .appendage-left { width:78px; height:80px; right:0; bottom:13px; border:16px solid var(--accent); border-left-color:transparent; border-radius:50%; background:transparent; transform:rotate(18deg); }
.pet-art.appendage-dog .appendage-left { width:64px; height:25px; right:1px; top:83px; border-radius:99px; background:var(--pet-secondary); transform:rotate(-24deg); transform-origin:left center; }
.pet-art.appendage-rabbit .appendage-left { width:45px; height:45px; right:7px; bottom:42px; border-radius:50%; background:var(--pet-secondary); box-shadow:inset 8px 5px 0 rgba(255,255,255,.22); }
.pet-art.appendage-fox .appendage-left { width:87px; height:57px; right:-2px; bottom:26px; border-radius:80% 35% 80% 35%; background:linear-gradient(90deg,var(--pet-color) 0 68%,var(--pet-secondary) 69%); transform:rotate(18deg); }
.pet-art.appendage-bear .appendage-left { width:34px; height:34px; right:12px; bottom:47px; border-radius:50%; background:var(--pet-secondary); }
.pet-art.pattern-spots .body { background-image: radial-gradient(circle at 24% 30%, var(--pet-secondary) 0 9%, transparent 10%), radial-gradient(circle at 74% 69%, var(--accent) 0 8%, transparent 9%), radial-gradient(circle at 80% 23%, var(--pet-secondary) 0 5%, transparent 6%); }
.pet-art.pattern-stripes .body { background-image: repeating-linear-gradient(115deg, transparent 0 17px, rgba(255,255,255,.22) 18px 29px); }
.pet-art.pattern-split .body { background-image: linear-gradient(97deg, transparent 0 48%, var(--pet-secondary) 49% 100%); }
.pet-art.pattern-stars .body { background-image: radial-gradient(circle at 20% 24%, rgba(255,255,255,.3) 0 2%, transparent 3%), radial-gradient(circle at 76% 62%, rgba(255,255,255,.35) 0 3%, transparent 4%); }
.pet-art .pattern-glyph { display: none; position: absolute; z-index: 3; right: 18%; bottom: 15%; color: var(--accent); font-style: normal; font-size: 25px; text-shadow: -43px -50px 0 var(--pet-secondary); }
.pet-art.pattern-stars .pattern-glyph { display: block; }
.pet-art.pattern-swirl .pattern-glyph { display: block; width: 45px; height: 45px; right: 12%; bottom: 8%; color: transparent; border: 7px double var(--pet-secondary); border-left-color: transparent; border-radius: 50%; transform: rotate(-22deg); text-shadow: none; }
.pet-art.mature-pet { width: 190px; height: 246px; filter: drop-shadow(0 26px 18px rgba(27,51,48,.18)); }
.pet-art.mature-pet .animal-kind { bottom: -14px; border-radius: 6px; color: #324a47; background: rgba(247,247,242,.9); font: 800 8px/1.4 Consolas, monospace; letter-spacing: .08em; }
.pet-art.mature-pet .body { width: 108px; height: 153px; left: 41px; bottom: 47px; border-radius: 42% 46% 28% 30% / 24% 25% 75% 76%; border: 1px solid rgba(25,42,40,.16); box-shadow: inset 12px 10px 20px rgba(255,255,255,.09), inset -12px -10px 20px rgba(20,35,33,.07); }
.pet-art.mature-pet.morph-bean .body { width: 114px; height: 148px; left: 38px; bottom: 48px; border-radius: 46% 42% 31% 33% / 27% 28% 72% 73%; transform: rotate(-2deg); }
.pet-art.mature-pet.morph-pear .body { width: 110px; height: 157px; left: 40px; bottom: 44px; border-radius: 39% 42% 30% 32% / 22% 23% 77% 78%; }
.pet-art.mature-pet.morph-tall .body { width: 94px; height: 166px; left: 48px; bottom: 40px; border-radius: 42% 45% 27% 29% / 20% 21% 79% 80%; }
.pet-art.mature-pet.morph-diamond .body { width: 110px; height: 159px; left: 40px; bottom: 44px; }
.pet-art.mature-pet .limb { border-color: rgba(24,41,39,.14); }
.pet-art.mature-pet .arm { width: 10px; height: 73px; top: 105px; }
.pet-art.mature-pet .arm::after { width: 16px; height: 13px; left: -3px; bottom: -4px; border-radius: 45%; }
.pet-art.mature-pet .arm-left { left: 37px; transform: rotate(16deg); }
.pet-art.mature-pet .arm-right { right: 37px; transform: rotate(-16deg); }
.pet-art.mature-pet .leg { width: 11px; height: 75px; bottom: 3px; }
.pet-art.mature-pet .leg::after { width: 25px; height: 12px; left: -5px; border-radius: 38% 58% 34% 40%; }
.pet-art.mature-pet .leg-left { left: 65px; }
.pet-art.mature-pet .leg-right { right: 65px; }
.pet-art.mature-pet .face { inset: 15% 12% 34%; }
.pet-art.mature-pet .face::before { width: 43px; height: 28px; left: calc(50% - 21px); top: 40%; opacity: .65; }
.pet-art.mature-pet .eyes { top: 20%; gap: 24px; }
.pet-art.mature-pet .eye { width: 8px; height: 12px; box-shadow: inset 2px 2px 0 rgba(255,255,255,.62); }
.pet-art.mature-pet.eyes-sleepy .eye { width: 18px; height: 7px; }
.pet-art.mature-pet .nose { width: 8px; height: 5px; left: calc(50% - 4px); top: 52%; }
.pet-art.mature-pet .mouth { width: 16px; height: 8px; left: calc(50% - 8px); top: 58%; }
.pet-art.mature-pet .cheek { display: none; }
.pet-art.mature-pet.pattern-spots .body { background-image: radial-gradient(circle at 25% 29%, color-mix(in srgb,var(--pet-secondary),transparent 40%) 0 5%, transparent 6%), radial-gradient(circle at 76% 69%, color-mix(in srgb,var(--pet-accent),transparent 45%) 0 4%, transparent 5%); }
.pet-art.mature-pet.pattern-stripes .body { background-image: repeating-linear-gradient(115deg, transparent 0 25px, rgba(255,255,255,.13) 26px 34px); }
.pet-art.mature-pet.pattern-stars .pattern-glyph, .pet-art.mature-pet.pattern-swirl .pattern-glyph { display: none; }
.pet-art .collar { position: absolute; z-index: 6; width: 68px; height: 7px; left: calc(50% - 34px); top: 58%; border-radius: 2px; background: color-mix(in srgb,var(--pet-accent),#243b38 38%); box-shadow: 0 1px 0 rgba(255,255,255,.18); }
.pet-art .status-core { position: absolute; z-index: 7; width: 10px; height: 10px; left: calc(50% - 5px); top: calc(58% + 3px); border: 2px solid rgba(255,255,255,.68); border-radius: 2px; background: var(--teal-dark); transform: rotate(45deg); box-shadow: 0 0 0 2px rgba(22,51,47,.15); }
.pet-art.character-portrait { width: 284px; height: 406px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: #101514; box-shadow: 0 24px 45px rgba(0,0,0,.3); filter: none; }
.pet-art.character-portrait img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; }
.pet-art.character-portrait .animal-kind { z-index: 9; left: 12px; right: auto; bottom: 11px; transform: none; padding: 6px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; color: #e6efeb; background: rgba(15,23,21,.76); backdrop-filter: blur(8px); font: 800 8px/1.4 Consolas, monospace; letter-spacing: .1em; }
.pet-art.character-portrait + .pet-shadow { display: none; }
.pet-shadow { width: 170px; height: 24px; margin-top: -8px; border-radius: 50%; background: rgba(27,65,59,.12); filter: blur(4px); }
.pet-identity { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 23px 26px; background: rgba(255,255,255,.66); backdrop-filter: blur(15px); }
.pet-name { margin: 0; font-family: Georgia, "STSong", serif; font-size: 31px; font-weight: 500; }
.pet-meta { margin-top: 4px; color: var(--muted); font-size: 12px; }
.level-disc { width: 65px; height: 65px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(21,50,47,.12); background: var(--paper-2); text-align: center; }
.level-disc b { display: block; font-family: Georgia, serif; font-size: 21px; }
.level-disc small { display: block; color: var(--muted); font-size: 8px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.4); }
.stat span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.stat b { display: block; margin-top: 7px; font-family: Georgia, serif; font-weight: 500; font-size: 23px; }
.stat small.energy-rate { display: block; margin-top: 3px; color: var(--teal); font-size: 9px; font-weight: 800; }
.live-energy.tick { animation: numberTick .34s ease; }
.live-energy-chip { padding: 8px 11px; border-radius: 12px; color: var(--teal-dark); background: #e7f1eb; font: 600 11px Consolas, monospace; }
.progress { height: 7px; margin-top: 10px; border-radius: 99px; background: #e6e7df; overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--teal); }
.trait-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag { display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 999px; background: #e8f1ec; color: var(--teal-dark); font-size: 11px; font-weight: 800; }
.tag.warm { background: #f7e2ce; color: #87502c; }
.uuid-box { margin-top: 18px; padding: 13px 15px; border-radius: 14px; background: #eeede6; color: var(--muted); font: 11px/1.5 Consolas, monospace; word-break: break-all; }
.pet-id-box { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pet-id-box span { min-width:0; }
.pet-id-box b { display:block; margin-bottom:3px; color:var(--teal-dark); font:800 9px/1.4 system-ui,sans-serif; letter-spacing:.06em; }
.activity { margin: 18px 0 0; padding: 17px 0 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.7; }
.health-event-banner { display:flex; align-items:flex-start; gap:11px; margin-top:14px; padding:13px 14px; border:1px solid #edc6a7; border-radius:15px; background:linear-gradient(135deg,#fff1df,#f8ddd7); }
.health-event-banner > span { width:31px; height:31px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; color:#fff; background:#d26d51; font-weight:900; }
.health-event-banner > div { min-width:0; }
.health-event-banner b,.health-event-banner small { display:block; }
.health-event-banner b { color:#813f33; font-size:11px; }
.health-event-banner small { margin-top:4px; color:#916a5f; font-size:8px; line-height:1.55; }
.health-event-banner.steady { border-color:#cfe4d8; background:#edf5ef; }
.health-event-banner.steady > span { background:var(--teal); }
.health-event-banner.steady b { color:var(--teal-dark); }
.health-event-banner.steady small { color:var(--muted); }
.health-event-banner.compact { margin:0 0 14px; padding:10px 11px; }

.care-layout { grid-template-columns: minmax(330px, .82fr) minmax(370px, 1.18fr); }
.care-pet-card { overflow: visible; }
.care-scene { min-height: 480px; display: grid; place-items: center; position: relative; border-radius: var(--radius) var(--radius) 0 0; background: radial-gradient(circle at 50% 42%, #35423f, #111716 68%); }
.care-scene .pet-shadow { position: absolute; left: calc(50% - 85px); bottom: 70px; }
.care-speech { position: absolute; left: 24px; right: 24px; bottom: 19px; padding: 12px 15px; border: 1px solid rgba(32,43,42,.1); border-radius: 8px; background: rgba(248,248,244,.78); backdrop-filter: blur(10px); color: var(--ink); font-size: 11px; text-align: center; }
.need-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.need > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.need > div:first-child b { color: var(--ink); font-family: Georgia, serif; font-size: 15px; }
.need-bar { height: 7px; margin-top: 7px; border-radius: 99px; overflow: hidden; background: #e8e8e1; }
.need-bar i { display: block; height: 100%; border-radius: inherit; transition: width .35s ease; }
.care-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.care-action { min-height: 77px; display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: rgba(255,255,255,.46); box-shadow: none; text-align: left; cursor: pointer; transition: .16s; }
.care-action:hover { transform: translateY(-2px); border-color: rgba(31,118,108,.35); background: #fffdf7; }
.care-action:disabled { opacity: .5; cursor: wait; }
.care-icon { width: 43px; height: 43px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; color: #31534f; background: #dfe8e4; font: 800 9px/1 Consolas, monospace; letter-spacing: -.02em; }
.care-action > span:nth-child(2) { min-width: 0; flex: 1; }
.care-action b, .care-action small { display: block; }
.care-action b { font-size: 13px; }
.care-action small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.care-action > i { color: var(--teal); font-style: normal; }
.live-ledger { margin: -3px 0 27px; padding: 24px; border-radius: 20px; color: #fff; background: linear-gradient(125deg, var(--teal-dark), var(--teal)); position: relative; overflow: hidden; }
.live-ledger::after { content:""; position:absolute; width:130px; height:130px; right:-34px; top:-56px; border:24px solid rgba(255,255,255,.09); border-radius:50%; }
.live-ledger span, .live-ledger b, .live-ledger small { display: block; position: relative; z-index: 1; }
.live-ledger span { color: rgba(255,255,255,.6); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.live-ledger b { margin: 7px 0 3px; font: 500 34px Consolas, monospace; letter-spacing: -.04em; }
.live-ledger small { color: #bfe2d8; font-size: 10px; }
.world-task-card { margin-bottom: 18px; }
.task-summary { grid-template-columns:repeat(4,1fr); margin-bottom:14px; }
.task-summary-item { padding:16px; }
.task-summary-item span,.task-summary-item b { display:block; }
.task-summary-item span { color:var(--muted); font-size:9px; }
.task-summary-item b { margin-top:5px; color:var(--teal-dark); font:500 25px Georgia,serif; }
.task-board-card { margin-top:14px; }
.task-history-card { margin-top:18px; }
.task-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.task-rate { color:var(--teal); font-size:9px; }
.task-rate.warn { color:#b55f4f; }
.task-run { align-items:flex-start; }
.task-run.success .pet-avatar { color:var(--teal-dark); background:#dcefe5; }
.task-run.failed .pet-avatar { color:#a3473d; background:#f7ded9; }
.task-run p { margin:7px 0 0; color:var(--ink); font-size:9px; }
.skill-card { margin-bottom:18px; }
.skill-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; }
.skill-item { padding:13px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.45); }
.skill-item span,.skill-item b,.skill-item small { display:block; }
.skill-item span { color:var(--muted); font-size:8px; font-weight:800; }
.skill-item b { margin-top:6px; font:500 18px Georgia,serif; }
.skill-item small { margin-top:2px; color:var(--teal); font-size:8px; }
.task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.task-item { padding: 18px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.45); }
.task-item.locked { opacity: .55; filter: grayscale(.35); }
.task-category { display: inline-flex; padding: 5px 8px; border-radius: 99px; color: var(--teal-dark); background: #e6f0ea; font-size: 9px; font-weight: 800; }
.task-item h3 { margin: 13px 0 7px; font-size: 15px; }
.task-item p { min-height: 46px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.task-economy { display: grid; gap: 4px; margin: 13px 0; color: var(--muted); font-size: 9px; }
.world-grid { grid-template-columns: minmax(330px, 1fr) minmax(320px, .85fr); }
.timeline { position: relative; display: grid; gap: 4px; }
.timeline::before { content:""; position:absolute; width:1px; top:18px; bottom:18px; left:17px; background:var(--line); }
.timeline-item { display: flex; align-items: center; gap: 13px; padding: 10px 0; position: relative; }
.timeline-item > span { width: 35px; height: 35px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; color:var(--teal-dark); background:#e6f0ea; z-index:1; }
.timeline-item b, .timeline-item small { display:block; }
.timeline-item b { font-size:12px; }
.timeline-item small { margin-top:3px; color:var(--muted); font-size:9px; }
.achievement-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.achievement { min-height:95px; padding:14px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,#fffdf7,#edf3ec); }
.achievement > span { color:var(--orange); }
.achievement b, .achievement small { display:block; }
.achievement b { margin-top:8px; font-size:12px; }
.achievement small { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.5; }
.social-head { margin-top:25px; padding-top:21px; border-top:1px solid var(--line); }
.locked-feature { padding:20px; border:1px dashed var(--line); border-radius:16px; text-align:center; }
.locked-feature b, .locked-feature span { display:block; }
.locked-feature span { margin-top:6px; color:var(--muted); font-size:10px; line-height:1.6; }
.friend-form { display:grid; grid-template-columns:1fr auto; gap:7px; }
.social-list { margin-top:10px; }
.social-friend { align-items:flex-start; }
.my-social-id { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:14px; background:#e7f1eb; }
.my-social-id span { min-width:0; }
.my-social-id b,.my-social-id code { display:block; }
.my-social-id b { margin-bottom:3px; color:var(--teal-dark); font-size:9px; }
.my-social-id code { overflow:hidden; color:var(--muted); font-size:9px; text-overflow:ellipsis; }
.friend-form { margin-top:9px; }
.social-subhead { display:flex; align-items:end; justify-content:space-between; gap:10px; margin-top:18px; padding-bottom:7px; border-bottom:1px solid var(--line); }
.social-subhead b { font-size:11px; }
.social-subhead span { color:var(--muted); font-size:8px; }
.friend-chat-preview { display:grid; gap:3px; margin-top:8px; padding:8px 9px; border-radius:11px; background:#f0eee7; }
.friend-chat-preview p { margin:0; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.friend-chat-preview p.mine { color:var(--teal-dark); }
.friend-chat-preview.empty-preview { color:var(--muted); font-size:8px; }
.nearby-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; margin-top:10px; }
.nearby-pet { min-width:0; padding:12px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.42); }
.nearby-head { display:flex; align-items:center; gap:9px; }
.nearby-head > div { min-width:0; }
.nearby-head b,.nearby-head small { display:block; }
.nearby-head b { font-size:11px; }
.nearby-head small { margin-top:3px; color:var(--muted); font-size:8px; }
.nearby-avatar { width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--pet-color),white 70%); font-size:18px; }
.nearby-pet > code { display:block; margin-top:8px; overflow:hidden; color:var(--muted); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.presence { color:#8c7b6a; font-style:normal; }
.presence.online { color:#13876d; }
.presence.today { color:#bd793d; }
.friend-chat-modal { width:min(600px,100%); }
.friend-chat-stream { height:min(52vh,430px); display:flex; flex-direction:column; gap:9px; margin-top:12px; padding:14px; overflow:auto; border:1px solid var(--line); border-radius:17px; background:#f1efe8; }
.friend-message { max-width:78%; align-self:flex-start; padding:9px 11px; border-radius:13px 13px 13px 4px; background:#fff; }
.friend-message.mine { align-self:flex-end; color:#fff; background:var(--teal); border-radius:13px 13px 4px 13px; }
.friend-message b,.friend-message small { display:block; font-size:7px; opacity:.68; }
.friend-message p { margin:4px 0; font-size:11px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.friend-chat-compose { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:10px; align-items:end; }
.friend-chat-compose textarea { min-height:58px; resize:vertical; }
.mini-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.button.tiny { min-height:28px; padding:0 9px; font-size:8px; }
.family-world-card { margin-top:18px; }
.family-incoming { margin-bottom:14px; }
.family-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px; border-radius:20px; color:#fff; background:linear-gradient(125deg,#5d537c,#9b7284); }
.family-banner span,.family-banner b,.family-banner small { display:block; }
.family-banner span { color:rgba(255,255,255,.65); font-size:8px; letter-spacing:.12em; }
.family-banner b { margin:7px 0 4px; font:500 12px Consolas,monospace; word-break:break-all; }
.family-banner small { color:#f1dce4; font-size:9px; }
.family-banner strong { flex:0 0 auto; font:500 25px Consolas,monospace; }
.farm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.farm-plot { min-height:145px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; padding:15px; border:1px solid var(--line); border-radius:18px; text-align:center; background:linear-gradient(#f7f1df,#e2edda); }
.farm-plot > span { color:var(--muted); font-size:8px; font-weight:800; }
.farm-plot > b { font-size:12px; }
.farm-plot > small { color:var(--muted); font-size:8px; line-height:1.5; }
.farm-plot.mature { background:linear-gradient(#fff0b9,#d8eabb); }
.farm-plot.growing::before { content:'🌱'; font-size:28px; animation:breathe 2.2s ease-in-out infinite; }
.farm-note { margin:13px 0 0; color:var(--muted); font-size:9px; line-height:1.7; }
.annual-card { margin-top:18px; }
.annual-upcoming { padding:20px; border-radius:18px; background:linear-gradient(145deg,#edf4ed,#fff1dc); }
.annual-upcoming span,.annual-upcoming b,.annual-upcoming small { display:block; }
.annual-upcoming span { color:var(--muted); font-size:9px; }
.annual-upcoming b { margin-top:6px; font:500 24px Georgia,serif; }
.annual-upcoming small { margin-top:10px; color:var(--muted); font-size:9px; }
.annual-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.annual-memory { padding:18px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,#fffdf7,#efe8f3); }
.annual-memory span,.annual-memory b,.annual-memory small,.annual-memory em { display:block; }
.annual-memory span { color:#8a6884; font-size:8px; font-weight:900; letter-spacing:.12em; }
.annual-memory b { margin-top:9px; font-size:13px; }
.annual-memory small { margin-top:7px; color:var(--muted); font-size:9px; line-height:1.7; }
.annual-memory em { margin-top:12px; color:#9a8392; font-size:8px; font-style:normal; }
.visit-modal { width:min(620px,100%); }
.visit-scene { min-height:245px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:4px; margin-top:14px; padding:18px 8px; border-radius:20px; background:linear-gradient(145deg,#dcebe3,#f3dac9); overflow:hidden; }
.visit-scene > div { min-width:0; display:grid; justify-items:center; transform:scale(.78); }
.visit-scene > div > b { margin-top:-4px; font-size:12px; }
.visit-scene > span { color:#b56874; font-size:24px; animation:pulse 1s infinite; }
.life-grid { grid-template-columns:minmax(330px,.85fr) minmax(390px,1.15fr); }
.life-reserve { margin:8px 0 18px; padding:23px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#173f3b,#2d8578); }
.life-reserve span,.life-reserve b,.life-reserve small { display:block; }
.life-reserve span { color:rgba(255,255,255,.62); font-size:10px; font-weight:800; letter-spacing:.08em; }
.life-reserve b { margin:8px 0 5px; font:500 34px Consolas,monospace; }
.life-reserve small { color:#c5e7dc; font-size:10px; }
.reserve-actions { display:flex; flex-wrap:wrap; gap:8px; }
.life-rule { margin-top:20px; padding-top:17px; border-top:1px solid var(--line); }
.life-rule b,.life-rule span { display:block; }
.life-rule b { font-size:11px; }
.life-rule span { margin-top:6px; color:var(--muted); font-size:9px; line-height:1.7; }
.life-history { margin-top:18px; }

.egg-panel { min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 40px; text-align: center; }
.egg-art { width: 170px; height: 210px; margin: 0 auto 24px; border-radius: 52% 48% 49% 51% / 61% 62% 38% 39%; background: linear-gradient(145deg, #f8ead6, #ddb581); box-shadow: inset -20px -18px 0 rgba(184,121,72,.12), 0 30px 50px rgba(88,64,40,.16); position: relative; animation: eggFloat 2.7s ease-in-out infinite; }
.egg-art::before, .egg-art::after { content: "✦"; position: absolute; color: rgba(31,118,108,.7); font-size: 34px; }
.egg-art::before { left: 35px; top: 54px; transform: rotate(-16deg); }
.egg-art::after { right: 34px; bottom: 52px; font-size: 21px; }
.egg-panel h2 { margin: 0; font: 500 38px Georgia, "STSong", serif; }
.egg-panel > div > p { max-width: 550px; margin: 12px auto 24px; color: var(--muted); line-height: 1.8; }
.countdown { display: flex; justify-content: center; gap: 9px; margin: 20px 0 25px; }
.countdown span { min-width: 76px; padding: 13px 9px; border-radius: 16px; background: rgba(255,255,255,.65); border: 1px solid var(--line); }
.countdown b { display: block; font: 500 27px Georgia, serif; }
.countdown small { color: var(--muted); font-size: 9px; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.sandbox-note { margin: 15px auto 0; max-width: 480px; color: #916443; font-size: 10px; }
.journey-card { margin-top:18px; }
.development-card { margin-top:18px;overflow:hidden; }
.pet-hero .character-portrait { transform:scale(var(--life-scale,1));transform-origin:center bottom;transition:transform .5s ease; }
.development-track { display:grid;grid-template-columns:repeat(8,minmax(90px,1fr));gap:7px;margin-top:16px;overflow-x:auto;padding-bottom:6px; }
.development-node { min-width:90px;padding:12px 8px;border:1px solid var(--line);border-radius:14px;text-align:center;background:rgba(255,255,255,.3); }
.development-node span,.development-node b,.development-node small { display:block; }
.development-node span { width:24px;height:24px;margin:0 auto 8px;display:grid;place-items:center;border-radius:50%;background:#e8e4dc;color:var(--muted); }
.development-node b { font-size:10px; }
.development-node small { margin-top:5px;color:var(--muted);font-size:7px;line-height:1.5; }
.development-node.passed { background:#edf5ef; }.development-node.passed span{color:#fff;background:var(--teal);}
.development-node.current { border-color:#d1905f;background:#fff0dd;box-shadow:inset 0 0 0 1px #e1b18c; }.development-node.current span{color:#fff;background:var(--orange);}
.development-next { display:grid;grid-template-columns:1fr minmax(180px,.35fr);gap:20px;align-items:center;margin-top:14px;padding:15px;border-radius:14px;background:#f3eee4; }
.development-next small,.development-next b { display:block; }.development-next small{color:var(--muted);font-size:8px;}.development-next b{margin-top:4px;font-size:10px;}
.journey-loading { padding:28px; color:var(--muted); text-align:center; font-size:11px; }
.journey-loading.error { color:#9b4e4e; }
.journey-head { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }
.journey-head h2 { margin:6px 0 5px; font:500 25px Georgia,"STSong",serif; }
.journey-head p { margin:0; color:var(--muted); font-size:10px; line-height:1.7; }
.journey-score { flex:0 0 auto; text-align:right; }
.journey-score b,.journey-score small { display:block; }
.journey-score b { color:var(--teal-dark); font:500 30px Georgia,serif; }
.journey-score small { margin-top:4px; color:var(--muted); font-size:9px; }
.journey-progress { height:6px; margin:18px 0; overflow:hidden; border-radius:99px; background:#e8e4da; }
.journey-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),#d19a68); transition:width .5s ease; }
.journey-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; }
.journey-step { display:flex; align-items:flex-start; gap:10px; min-height:68px; padding:12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.28); }
.journey-step > span { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:var(--muted); background:#ece8df; font-size:11px; }
.journey-step b,.journey-step small { display:block; }
.journey-step b { font-size:10px; }
.journey-step small { margin-top:5px; color:var(--muted); font-size:8px; line-height:1.5; }
.journey-step.done { border-color:rgba(31,118,108,.22); background:rgba(226,240,233,.48); }
.journey-step.done > span { color:#fff; background:var(--teal); }
.journey-next { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; padding:15px 16px; border-radius:15px; background:#f5eadb; }
.journey-next small,.journey-next b { display:block; }
.journey-next small { color:#9a7354; font-size:8px; font-weight:800; letter-spacing:.08em; }
.journey-next b { margin-top:4px; font-size:11px; }
.journey-next.complete { background:#e8f1ec; }

.chat-layout { height: calc(100vh - 150px); min-height: 560px; display: grid; grid-template-rows: auto auto 1fr auto; position: relative; }
.chat-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; background: rgba(249,249,245,.82); }
.companion-avatar { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(31,64,60,.18); border-radius: 11px; background: linear-gradient(145deg,#d8dfdc,#b9ccc5); }
.companion-avatar img { width: 72px; height: 72px; object-fit: contain; object-position: center 24%; transform: translateY(8px) scale(1.25); filter: drop-shadow(0 5px 5px rgba(20,35,33,.2)); }
.chat-head b, .chat-head small { display: block; }
.chat-head small { color: var(--muted); margin-top: 3px; font-size: 10px; }
.chat-head .perception-status { color: #60706d; }
.chat-head .perception-status.active { color: #b63f4c; font-weight: 700; }
.chat-tools { margin-left: auto; display: flex; gap: 7px; }
.chat-tools .icon-button { width: auto; min-width: 62px; padding: 0 10px; white-space: nowrap; }
.chat-attachment-bar { padding: 10px 19px; border-bottom: 1px solid var(--line); background: rgba(237,244,239,.58); display: grid; grid-template-columns: auto minmax(160px, 1fr) auto auto; gap: 8px; align-items: center; }
.chat-attachment-bar > span { color: var(--teal-dark); font-size: 10px; font-weight: 800; }
.chat-attachment-bar .input { padding: 8px 10px; min-height: 34px; font-size: 10px; }
.chat-attachment-bar > small { grid-column: 2 / -1; color: var(--muted); font-size: 9px; }
.file-picker { cursor: pointer; }
.chat-stream { padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; position: relative; background: linear-gradient(180deg,rgba(249,249,245,.64),rgba(235,237,232,.78)); }
.chat-stream::before { content:""; position: absolute; width: 330px; height: 390px; right: 2%; bottom: -80px; opacity: .055; pointer-events: none; background: var(--companion-bg, url('companion-mature-v1.png')) center bottom/contain no-repeat; filter: grayscale(.25); }
.message { max-width: min(72%, 720px); }
.message, .chat-stream > .empty { position: relative; z-index: 1; }
.chat-stream > .empty { margin: auto; padding: 20px; }
.message.user { align-self: flex-end; }
.bubble { padding: 13px 16px; border: 1px solid rgba(32,43,42,.09); border-left: 3px solid #6b8b85; border-radius: 3px 10px 10px 3px; background: rgba(250,250,247,.94); line-height: 1.72; font-size: 14px; white-space: pre-wrap; word-break: break-word; box-shadow: 0 6px 18px rgba(25,40,38,.04); }
.message.user .bubble { color: #fff; border: 0; border-right: 3px solid #b88762; background: #285d57; border-radius: 10px 3px 3px 10px; }
.message small { display: block; margin: 5px 7px 0; color: var(--muted); font-size: 9px; }
.message.user small { text-align: right; }
.message-file { display: inline-block; margin: 0 7px 5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.65); color: var(--teal-dark); font-size: 9px; }
.message.user .message-file { display: block; width: fit-content; margin-left: auto; }
.typing .bubble::after { content: "···"; letter-spacing: 3px; animation: pulse 1s infinite; }
.chat-compose { padding: 17px 19px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: end; }
.chat-compose textarea { min-height: 45px; max-height: 130px; resize: none; }
.chat-compose .icon-button { width: auto; min-width: 52px; padding: 0 9px; white-space: nowrap; }

.content-grid { grid-template-columns: minmax(310px, 1fr) minmax(260px, .55fr); }
.list { display: grid; gap: 10px; }
.list-item { display: flex; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.38); }
.list-item > div { min-width: 0; flex: 1; }
.list-item b { display: block; font-size: 13px; }
.list-item p, .list-item small { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.notification-item { align-items: flex-start; }
.notification-item .pet-avatar { margin-top: 2px; background: var(--teal); }
.notification-item.muted-item { opacity: .55; }
.amount { font: 500 18px Georgia, serif; }
.amount.positive { color: var(--teal); }
.amount.negative { color: #b75d4f; }
.empty { padding: 45px 20px; text-align: center; color: var(--muted); }
.empty strong { display: block; margin-bottom: 8px; color: var(--ink); font: 500 22px Georgia, "STSong", serif; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 13px; }
.shop-item { padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.45); }
.shop-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; background: #e8f0e8; font-size: 23px; }
.shop-item h3 { margin: 16px 0 4px; font-size: 15px; }
.shop-item p { margin: 0 0 16px; min-height: 32px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.shop-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font: 500 21px Georgia, serif; color: var(--teal-dark); }

.device-card { max-width: 760px; }
.privacy-actions { display:grid; gap:10px; }
.membership-card,.account-orders { margin-bottom:18px; }
.account-session { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.account-session b,.account-session small { display:block; }
.account-session small { margin-top:4px; color:var(--muted); font-size:10px; }
.membership-current { display:grid; grid-template-columns:minmax(150px,.5fr) minmax(300px,1.4fr) auto; gap:18px; align-items:center; }
.membership-current span,.membership-current > div > b,.membership-current > div > small { display:block; }
.membership-current span { color:var(--muted);font-size:8px;letter-spacing:.1em; }
.membership-current > div > b { margin:5px 0;font:500 22px Georgia,serif; }
.membership-current > div > small { color:var(--muted);font-size:9px; }
.membership-benefits { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
.membership-benefit { padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.35); }
.membership-benefit small,.membership-benefit b { display:block; }
.membership-benefit small { color:var(--muted);font-size:8px; }
.membership-benefit b { margin-top:4px;font-size:10px; }
.danger-action { border-color:rgba(155,78,78,.28); background:#fff5f2; }
.danger-action .care-icon { color:#fff; background:#a95b55; }
.consent-status { display:flex; align-items:center; gap:13px; padding:17px; border:1px solid var(--line); border-radius:16px; }
.consent-status > span { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#a45d55; }
.consent-status.current { background:#edf5ef; }
.consent-status.current > span { background:var(--teal); }
.consent-status b,.consent-status small { display:block; }
.consent-status small { margin-top:5px; color:var(--muted); font-size:9px; }
#renew-consent { margin-top:16px; }
.deletion-notice { margin-top:14px; padding:14px; border-radius:14px; background:#fff1e8; }
.deletion-notice b,.deletion-notice small { display:block; }
.deletion-notice small { margin:5px 0 11px; color:var(--muted); font-size:9px; }
.button.danger { color:#fff; background:#9b4e4e; }
.device-visual { height: 180px; display: grid; place-items: center; background: linear-gradient(135deg, #c9e0d7, #ecd6bd); }
.monitor { width: 210px; height: 120px; border: 8px solid var(--teal-dark); border-radius: 14px; background: #eff7f2; display: grid; place-items: center; box-shadow: 0 18px 32px rgba(17,74,69,.18); position: relative; }
.monitor::before { content: ""; position: absolute; width: 50px; height: 24px; border-bottom: 8px solid var(--teal-dark); bottom: -30px; }
.monitor span { font-size: 40px; }
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table td { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.detail-table td:first-child { color: var(--muted); width: 38%; }
.admin-stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; }
.admin-stat { padding: 20px; }
.admin-stat b { display: block; margin-top: 6px; font: 500 29px Georgia, serif; }
.admin-section { margin-bottom:18px; }
.funnel-grid { display:grid; grid-template-columns:repeat(6,minmax(100px,1fr)); gap:8px; }
.funnel-step { min-width:0; display:flex; align-items:center; gap:9px; padding:14px 10px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.38); }
.funnel-step > span { width:22px; height:22px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--teal); font-size:8px; }
.funnel-step div { min-width:0; flex:1; }
.funnel-step small,.funnel-step b { display:block; }
.funnel-step small { overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.funnel-step b { margin-top:3px; font:500 20px Georgia,serif; }
.funnel-step i { color:#bcae9b; font-style:normal; }
.monitor-grid { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:9px; }
.monitor-item { min-width:0; padding:14px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.4); }
.monitor-item span,.monitor-item b { display:block; }
.monitor-item span { color:var(--muted); font-size:9px; }
.monitor-item b { margin-top:7px; overflow:hidden; color:var(--teal-dark); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.monitor-item.danger-monitor { border-color:#cf8d82; background:#fff0ed; }
.monitor-item.danger-monitor b { color:#a64337; }
.admin-form-grid { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:11px; align-items:end; margin-bottom:16px; }
.admin-form-grid .form-field { margin:0; }
.admin-form-grid .effect-field { grid-column:span 2; }
.admin-check { min-height:43px; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }
.admin-check input { accent-color:var(--teal); }
.admin-product-list,.admin-pet-list { margin-top:8px; }
.admin-pet-row .mini-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.admin-section-grid { margin-bottom:18px; }
.compact-list { margin-top:16px; max-height:360px; overflow:auto; }
.model-config-card { margin-bottom: 18px; }
.model-form { display: grid; grid-template-columns: 1.3fr .75fr .9fr; gap: 13px; align-items: end; }
.model-form .form-field { margin: 0; }
.model-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding-top: 3px; }
.model-actions > span { margin-right: auto; color: var(--muted); font-size: 10px; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th, .data-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.data-table th { color: var(--muted); font-size: 9px; letter-spacing: .07em; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(10,33,30,.42); backdrop-filter: blur(8px); }
.modal { width: min(440px, 100%); padding: 27px; border-radius: 26px; background: var(--paper-2); box-shadow: var(--shadow); }
.modal h2 { margin: 0 0 9px; font: 500 27px Georgia, "STSong", serif; }
.modal > p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.toast { position: fixed; z-index: 100; right: 25px; bottom: 25px; max-width: 380px; padding: 13px 17px; border-radius: 13px; color: #fff; background: var(--ink); box-shadow: 0 14px 30px rgba(0,0,0,.18); font-size: 12px; transform: translateY(25px); opacity: 0; pointer-events: none; transition: .25s; }
.pwa-install-hint { position:fixed; z-index:110; left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px)); display:grid; grid-template-columns:1fr auto; gap:4px 14px; padding:15px 16px; border:1px solid rgba(255,255,255,.3); border-radius:17px; color:#fff; background:rgba(16,46,42,.96); box-shadow:0 18px 45px rgba(12,30,28,.24); backdrop-filter:blur(18px); }
.pwa-install-hint b,.pwa-install-hint span{display:block}.pwa-install-hint b{font-size:13px}.pwa-install-hint span{grid-column:1;color:rgba(255,255,255,.7);font-size:11px;line-height:1.5}.pwa-install-hint button{grid-column:2;grid-row:1/3;align-self:center;width:32px;height:32px;border:0;border-radius:10px;color:#fff;background:rgba(255,255,255,.1);font-size:20px}
.pwa-roaming-pet { position:fixed; z-index:35; top:0; left:0; width:88px; height:112px; padding:0; border:0; color:var(--ink); background:transparent; filter:drop-shadow(0 13px 12px rgba(25,55,51,.24)); touch-action:none; user-select:none; will-change:transform; }
.pwa-roaming-pet[hidden]{display:none}.pwa-roaming-pet small{position:absolute;left:50%;bottom:0;max-width:86px;transform:translateX(-50%);padding:3px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:999px;color:#fff;background:rgba(16,46,42,.82);font-size:9px}.pwa-roaming-sprite{position:absolute;inset:0 0 14px;display:block;background-repeat:no-repeat;background-size:400% 200%;transform-origin:50% 90%;animation:pwaPetFloat 2.8s ease-in-out infinite}.pwa-roaming-pet.jumping-in .pwa-roaming-sprite{animation:pwaPetJumpIn .72s cubic-bezier(.2,.9,.28,1.15)}
.pwa-modal-open .pwa-roaming-pet{opacity:0;pointer-events:none}.pwa-update-ready::after{content:"星伴有新版本，重新打开后更新";position:fixed;z-index:105;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);padding:9px 13px;border-radius:999px;color:#fff;background:#245f58;font-size:10px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
@keyframes pwaPetFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}
@keyframes pwaPetJumpIn{0%{transform:translate(95px,50px) scale(.55) rotate(16deg);opacity:0}65%{transform:translate(-8px,-18px) scale(1.08) rotate(-4deg);opacity:1}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pwa-roaming-sprite{animation:none}.pwa-roaming-pet{right:max(12px,env(safe-area-inset-right));bottom:max(78px,calc(env(safe-area-inset-bottom) + 70px))}}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #9b4e4e; }

@keyframes breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-7px) scale(1.015); } }
@keyframes petIdle { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-7px) scale(1.015); } }
@keyframes petHappy { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-14px) rotate(3deg) scale(1.035); } }
@keyframes petSleep { 0%,100% { transform:translateY(7px) rotate(-4deg) scale(1,.96); } 50% { transform:translateY(10px) rotate(-4deg) scale(1.035,.91); } }
@keyframes petWeak { 0%,100% { transform:translateY(5px) rotate(-3deg) scale(.97); } 50% { transform:translateY(8px) rotate(-1deg) scale(.96); } }
@keyframes petCritical { 0%,100% { transform:translateX(-2px) scale(.95); } 50% { transform:translateX(2px) scale(.95); } }
@keyframes petFeed { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-15px) scale(1.08,.94); } }
@keyframes petDrink { 0%,100% { transform:rotate(-8deg); } 50% { transform:rotate(6deg) translateY(-4px); } }
@keyframes petMedicine { 0%,100% { transform:translateX(-3px) rotate(-2deg); } 50% { transform:translateX(3px) rotate(2deg); } }
@keyframes petPlay { 0%,100% { transform:translateY(0) rotate(-5deg); } 50% { transform:translateY(-27px) rotate(8deg) scale(1.04); } }
@keyframes petSway { 0%,100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg) translateY(-4px); } }
@keyframes armWave { 0%,72%,100% { transform:rotate(29deg); } 80% { transform:rotate(112deg); } 88% { transform:rotate(72deg); } 95% { transform:rotate(112deg); } }
@keyframes armCheer { 0%,100% { transform:rotate(82deg); } 50% { transform:rotate(118deg); } }
@keyframes armCheerRight { 0%,100% { transform:rotate(-82deg); } 50% { transform:rotate(-118deg); } }
@keyframes blink { 0%,45%,48%,100% { transform: scaleY(1); } 46%,47% { transform: scaleY(.08); } }
@keyframes eggFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes numberTick { 50% { color: var(--orange); transform: translateY(-1px); } }

@media (max-width: 980px) {
    .auth-screen { grid-template-columns: 1fr; padding: 40px 25px; }
    .auth-story { display: none; }
    .auth-card { justify-self: center; }
    .shell { grid-template-columns: 80px 1fr; }
    .sidebar { padding: 20px 12px; }
    .brand { padding: 0 7px 18px; justify-content: center; }
    .brand > div:last-child, .side-section-title, .pet-switch > span, .new-pet span, .nav button span, .user-chip div, .user-chip .icon-button { display: none; }
    .pet-switch, .nav button, .new-pet { justify-content: center; }
    .dashboard-grid, .content-grid, .care-layout, .world-grid, .life-grid { grid-template-columns: 1fr; }
    .admin-form-grid { grid-template-columns:repeat(2,minmax(140px,1fr)); }
    .funnel-grid { grid-template-columns:repeat(3,1fr); }
    .membership-current { grid-template-columns:1fr; }
    .task-summary { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 640px) {
    body { padding-bottom: 0; }
    .shell { display: block; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .sidebar { position: fixed; z-index: 50; inset: auto 0 0; width: 100%; height: calc(68px + env(safe-area-inset-bottom)); flex-direction: row; padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); overflow: hidden; box-shadow: 0 -8px 28px rgba(12,35,32,.16); }
    .brand, .side-section-title, .pet-list, .new-pet, .pet-limit, .user-chip { display: none; }
    .nav { width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
    .nav button { min-width: 0; min-height: 52px; padding: 5px 1px; display: none; place-items: center; align-content: center; gap: 3px; border-radius: 11px; font-size: 9px; line-height: 1.1; text-align: center; }
    .nav button[data-mobile-primary="true"], .nav .mobile-more { display: grid; }
    .nav button::before { width: auto; font-size: 18px; line-height: 1; }
    .nav button span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .nav button.active { color: #fff; background: rgba(255,255,255,.12); }
    .mobile-nav-sheet { position: fixed; z-index: 70; inset: 0; display: flex; align-items: flex-end; }
    .mobile-nav-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(12,25,23,.48); backdrop-filter: blur(3px); }
    .mobile-nav-panel { position: relative; width: 100%; max-height: min(72vh, 560px); overflow-y: auto; padding: 18px max(16px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); border-radius: 24px 24px 0 0; background: #fbfaf6; box-shadow: 0 -18px 55px rgba(11,29,26,.24); }
    .mobile-nav-panel::before { content: ""; display: block; width: 38px; height: 4px; margin: -7px auto 15px; border-radius: 999px; background: #ccd3cf; }
    .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
    .mobile-nav-head b, .mobile-nav-head small { display: block; }
    .mobile-nav-head b { font: 500 24px Georgia, "STSong", serif; }
    .mobile-nav-head small { margin-top: 3px; color: var(--muted); font-size: 10px; }
    .mobile-nav-head .icon-button { color: var(--ink); background: #eceee9; font-size: 20px; }
    .mobile-nav-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .mobile-nav-grid button { min-width: 0; min-height: 82px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 10px 5px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: rgba(255,255,255,.72); }
    .mobile-nav-grid button.active { color: var(--teal-dark); border-color: rgba(36,95,88,.35); background: #e5f0eb; }
    .mobile-nav-grid i { font-style: normal; font-size: 20px; }
    .mobile-nav-grid span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }
    .mobile-menu-open { overflow: hidden; }
    .workspace { padding: 16px 12px 24px; }
    .card-body { padding: 18px; }
    .topbar { align-items: flex-start; flex-direction: column; }
    .topbar > div { min-width: 0; width: 100%; }
    .topbar h1 { line-height: 1.18; word-break: normal; }
    .topbar > .status-pill, .topbar > .button { align-self: flex-start; width: auto; }
    .topbar .button { padding: 0 12px; font-size: 10px; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
    .admin-stats { grid-template-columns: 1fr 1fr; }
    .care-actions { grid-template-columns: 1fr; }
    .model-form { grid-template-columns: 1fr; }
    .admin-form-grid { grid-template-columns:1fr; }
    .admin-form-grid .effect-field { grid-column:1; }
    .admin-pet-row { align-items:flex-start; flex-wrap:wrap; }
    .admin-pet-row .mini-actions { width:100%; justify-content:flex-start; padding-left:62px; }
    .farm-grid { grid-template-columns:1fr; }
    .skill-grid { grid-template-columns:repeat(2,1fr); }
    .model-actions { grid-column: 1; flex-wrap: wrap; }
    .chat-layout { height: calc(100vh - 175px); }
    .pet-hero { min-height: 440px; }
    .pet-scene { min-height: 330px; }
    .pet-art.character-portrait { width: 214px; height: 306px; }
    .care-scene { min-height: 390px; }
    .chat-attachment-bar { grid-template-columns: minmax(120px,1fr) auto auto; }
    .chat-attachment-bar > span { display: none; }
    .chat-attachment-bar > small { grid-column: 1 / -1; }
    .message { max-width: 88%; }
    .promise-row { grid-template-columns: 1fr; }
    .funnel-grid { grid-template-columns:repeat(2,1fr); }
    .journey-head,.journey-next { align-items:flex-start; flex-direction:column; }
    .journey-score { text-align:left; }
    .journey-next .button { width:100%; }
    .auth-screen { min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
    .auth-card { width: 100%; padding: 26px 20px; border-radius: 20px; }
    .auth-card h2 { font-size: 30px; }
    .auth-card .lead { margin-bottom: 21px; }
    .auth-card .input { min-height: 48px; font-size: 16px; }
    .tabs { margin-bottom: 20px; }
    .egg-panel { min-height: auto; place-items: start center; padding: 25px 15px 30px; }
    .egg-art { width: 138px; height: 170px; margin-bottom: 21px; }
    .egg-art::before { left: 28px; top: 44px; }
    .egg-art::after { right: 27px; bottom: 42px; }
    .egg-panel h2 { font-size: clamp(27px, 8.5vw, 34px); line-height: 1.22; }
    .egg-panel > div { width: 100%; min-width: 0; }
    .egg-panel > div > p { margin: 10px auto 19px; font-size: 13px; line-height: 1.75; }
    .countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; margin: 16px 0 20px; }
    .countdown span { min-width: 0; padding: 10px 3px; border-radius: 12px; }
    .countdown b { font-size: 23px; }
    .uuid-box { margin-top: 14px; padding: 11px 9px; border-radius: 11px; font-size: 9px; }
    .egg-panel .actions { display: grid; grid-template-columns: 1fr; width: min(240px, 100%); margin-right: auto !important; margin-left: auto !important; }
    .egg-panel .actions .button { width: 100%; }
    .sandbox-note { padding: 0 4px; font-size: 9px; line-height: 1.55; }
    .account-session { align-items:stretch; flex-direction:column; }
    .account-session .button { width:100%; }
    .toast { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); left: 12px; max-width: none; text-align: center; }
    .pwa-roaming-pet { z-index: 45; }
}
.companion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.reflection-card { grid-column:1/-1; }
.mood-choices { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; }
.mood-choices input { position:absolute; opacity:0; pointer-events:none; }
.mood-choices span { display:block; padding:9px 13px; border:1px solid var(--line); border-radius:999px; cursor:pointer; }
.mood-choices input:checked + span { background:var(--ink); color:#fff; border-color:var(--ink); }
.goal-form { display:grid; grid-template-columns:1fr 90px auto; gap:8px; margin:12px 0 18px; }
.companion-goals .list-item>div { flex:1; }
.mini-progress { height:5px; background:var(--line); border-radius:5px; overflow:hidden; margin-top:7px; }
.mini-progress i { display:block; height:100%; background:var(--accent); }
.live-actions { display:flex; flex-wrap:wrap; gap:9px; margin:12px 0; }
.live-response { padding:16px; border-radius:14px; background:var(--surface-soft,#f6f3ee); display:flex; flex-direction:column; gap:5px; }
.live-stream { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.live-stream span { font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:5px 8px; }
.soul-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-top:12px; }
.soul-traits { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:12px 0; }
.soul-traits span { display:grid; grid-template-columns:38px 1fr 24px; gap:6px; align-items:center; font-size:12px; }
.soul-traits i { height:5px; background:var(--line); border-radius:5px; overflow:hidden; }.soul-traits em{display:block;height:100%;background:var(--accent)}
.insight-box { padding:16px; border-radius:14px; background:linear-gradient(145deg,#203633,#34504c); color:#fff; }.insight-box p{line-height:1.6}.insight-box small{opacity:.72}
.moment-strip { display:flex; gap:8px; overflow:auto; padding-top:12px; }.moment-strip>span{min-width:150px;padding:10px;border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column}.moment-strip small{color:var(--muted);margin-top:4px}
@media (max-width:900px) { .soul-layout{grid-template-columns:1fr} }
.agent-grid { grid-template-columns:minmax(300px,.75fr) minmax(420px,1.25fr); gap:18px; }
.agent-run { align-items:center; }.agent-run>div:nth-child(2){flex:1}.risk{font:800 9px/1 monospace;padding:7px;border-radius:7px;background:#edf2ef}.risk-medium{background:#fff0d2;color:#8a5a00}.risk-high{background:#ffe1df;color:#9b251e}
@media (max-width:1000px) { .agent-grid{grid-template-columns:1fr} }
.skill-market { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px }.skill-card>p{min-height:44px;color:var(--muted)}.permission-row{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px}.permission-row code{font-size:10px;padding:5px 7px;background:#edf2ef;border-radius:6px}.creator-card{margin-top:18px}.creator-skill-form{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}.creator-skill-form .button{grid-column:1/-1}@media(max-width:900px){.creator-skill-form{grid-template-columns:1fr}}
.proactive-card{grid-column:1/-1}.proactive-hours{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.proactive-card form>.button{margin-right:8px}@media(max-width:700px){.proactive-hours{grid-template-columns:1fr}}
@media (max-width:900px) { .companion-grid { grid-template-columns:1fr; } .reflection-card{grid-column:auto}.goal-form{grid-template-columns:1fr 80px}.goal-form .button{grid-column:1/-1} }
.sensor-event-list{display:grid;gap:10px}.sensor-event-row{align-items:flex-start}.sensor-outcome{min-width:86px;padding:7px 9px;border-radius:999px;text-align:center;font:800 10px/1 sans-serif;letter-spacing:.04em;background:#edf2ef;color:#31514b}.sensor-outcome.rejected{background:#ffe4df;color:#922f28}.sensor-outcome.suppressed,.sensor-outcome.silent{background:#fff0d2;color:#7c5900}.sensor-event-row small{line-height:1.55}