.companion-cat { object-fit: contain; mix-blend-mode: multiply; }
.hero-cat { position: absolute; z-index: 1; inset: 2px 14px 4px; width: calc(100% - 28px); height: calc(100% - 6px); }
.onboarding-cat { display: block; width: 178px; height: 180px; object-fit: contain; margin: -13px auto 10px; }
.card-cat { position: absolute; z-index: 1; right: -6px; bottom: -11px; width: 132px; height: 143px; object-fit: contain; }
.cat-hero .spark { z-index: 2; pointer-events: none; }
.sleep-setup { margin-top: 24px; }
.form-heading { margin: 0 0 12px; font-size: 13px; font-weight: 800; }
.sleep-card { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 16px; margin-top: 11px; border-radius: 19px; background: #eaf0fb; }
.sleep-moon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #d6e1f8; color: #7085ab; font-size: 25px; }
.sleep-card p { margin: 0 0 3px; text-transform: uppercase; letter-spacing: 1px; font-size: 9px; font-weight: 800; color: #7484a2; }
.sleep-card h3 { margin: 0 0 3px; font-size: 15px; letter-spacing: -.3px; }
.sleep-card small { font-size: 10px; color: #70809c; }
.sleep-arrow { margin-left: auto; color: #7589aa; font-size: 26px; }
.nutrition-card { margin-top: 12px; padding: 16px; border: 1px solid #ebe8df; border-radius: 19px; background: #fff; }
.nutrition-card p { margin: 0 0 3px; text-transform: uppercase; letter-spacing: 1px; font-size: 9px; font-weight: 800; color: #799079; }
.nutrition-card h3 { margin: 0 0 14px; font-size: 15px; }
.macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.macro-grid span { padding: 10px 5px; border-radius: 12px; text-align: center; background: #f1f6ed; }
.macro-grid b { display: block; font-size: 13px; }
.macro-grid small { display: block; margin-top: 2px; font-size: 9px; color: #728278; }
.nutrition-note { display: block; margin-top: 11px; font-size: 10px; line-height: 1.4; color: #869088; }
.chat-messages { display: grid; gap: 9px; max-height: 225px; overflow-y: auto; margin: 14px 0; padding-right: 3px; }
.chat-message { width: fit-content; max-width: 88%; padding: 11px 13px; border-radius: 14px; font-size: 12px; line-height: 1.45; }
.ai-message { background: #f1ecff; color: #5c5872; border-bottom-left-radius: 4px; }
.user-message { justify-self: end; background: #e4f0e1; color: #405d48; border-bottom-right-radius: 4px; }
.modal-card:has(.exercise-catalog) { min-height: 0; max-height: 92vh; overflow-y: auto; }
.exercise-catalog { padding-top: 4px; }
.exercise-catalog > p { margin: 0 0 15px; }
.exercise-filters { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 13px; }
.exercise-filters button { white-space: nowrap; padding: 9px 11px; border-radius: 11px; background: #f1eee7; color: #6d756f; font-size: 11px; font-weight: 800; }
.exercise-filters button.selected { background: #dcebd9; color: #456a4e; }
.exercise-list { display: grid; gap: 10px; padding-bottom: 4px; }
.exercise-card { display: grid; grid-template-columns: 84px 1fr; gap: 11px; width: 100%; padding: 10px; border: 1px solid #eee9e1; border-radius: 16px; background: #fff; text-align: left; }
.exercise-preview { min-height: 78px; display: grid; place-content: center; gap: 5px; border-radius: 12px; background: linear-gradient(135deg, #e6f0e3, #f7e3d0); color: #5f8169; text-align: center; }
.exercise-preview b { width: 28px; height: 28px; display: grid; place-items: center; margin: auto; border-radius: 50%; background: #fffdf8; font-size: 11px; }
.exercise-preview small { font-size: 8px; font-weight: 800; color: #6e7d74; }
.exercise-card h3 { margin: 1px 0 4px; font-size: 14px; letter-spacing: -.35px; }
.exercise-card p { margin: 0 0 7px; color: #718077; font-size: 10px; line-height: 1.35; }
.exercise-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.exercise-meta span { padding: 4px 6px; border-radius: 7px; background: #f6f3ed; color: #68756d; font-size: 8px; font-weight: 800; }
.exercise-meta .level-beginner { background: #e4f0e1; color: #52735a; }
.exercise-meta .level-medium { background: #f8ead8; color: #926947; }
.exercise-meta .level-advanced { background: #eee8ff; color: #73649c; }
.exercise-detail-video { height: 170px; margin: 16px 0; display: grid; place-content: center; gap: 9px; border-radius: 18px; background: linear-gradient(135deg, #e7f0e5, #f7e5d3); color: #5d7b65; text-align: center; }
.exercise-detail-video b { width: 48px; height: 48px; display: grid; place-items: center; margin: auto; border-radius: 50%; background: #fffdf8; font-size: 17px; }
.exercise-detail-video small { font-size: 11px; color: #6f7c73; }
.exercise-preview { overflow: hidden; }
.exercise-preview .exercise-motion { width: 84px; height: 78px; }
.exercise-motion { position: relative; overflow: hidden; color: #5f8169; }
.exercise-motion small { position: absolute; z-index: 2; right: 4px; bottom: 3px; font-size: 7px; font-weight: 800; color: #607867; }
.motion-floor { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 3px; border-radius: 50%; background: #b6cfb6; }
.motion-person { position: absolute; z-index: 1; top: 9px; left: 34px; width: 18px; height: 57px; transform-origin: 50% 78%; }
.motion-person i { position: absolute; display: block; background: #5d7b65; border-radius: 99px; transform-origin: 50% 0; }
.motion-head { top: 0; left: 3px; width: 12px; height: 12px; background: #f1b78e !important; }
.motion-body { top: 12px; left: 6px; width: 6px; height: 21px; }
.motion-arm { top: 16px; width: 4px; height: 19px; }
.motion-arm-left { left: 5px; transform: rotate(35deg); }
.motion-arm-right { right: 5px; transform: rotate(-35deg); }
.motion-leg { top: 31px; width: 5px; height: 24px; }
.motion-leg-left { left: 4px; transform: rotate(15deg); }
.motion-leg-right { right: 4px; transform: rotate(-15deg); }
.motion-squat .motion-person { animation: motion-squat 6s ease-in-out infinite; }
.motion-squat .motion-arm-left, .motion-squat .motion-arm-right { animation: motion-reach 6s ease-in-out infinite; }
.motion-plank .motion-person { top: 28px; left: 33px; animation: motion-plank 6s ease-in-out infinite; }
.motion-arms .motion-arm-left { animation: motion-wave-left 6s ease-in-out infinite; }
.motion-arms .motion-arm-right { animation: motion-wave-right 6s ease-in-out infinite; }
.motion-stretch .motion-person { animation: motion-stretch 6s ease-in-out infinite; }
.motion-stretch .motion-arm-left { animation: motion-stretch-arm-left 6s ease-in-out infinite; }
.motion-stretch .motion-arm-right { animation: motion-stretch-arm-right 6s ease-in-out infinite; }
.detail-motion { width: 150px; height: 130px; margin: -12px auto -3px; transform: scale(1.35); transform-origin: center center; }
.exercise-detail-video { overflow: hidden; }
.exercise-detail-video .exercise-motion small { display: none; }
@keyframes motion-squat { 0%, 100% { transform: translateY(0) scaleY(1); } 25%, 65% { transform: translateY(11px) scaleY(.84); } 45%, 80% { transform: translateY(0) scaleY(1); } }
@keyframes motion-reach { 0%, 100% { transform: rotate(35deg); } 25%, 65% { transform: rotate(82deg); } 45%, 80% { transform: rotate(35deg); } }
@keyframes motion-plank { 0%, 100% { transform: rotate(77deg) translateX(0); } 50% { transform: rotate(77deg) translateX(-5px); } }
@keyframes motion-wave-left { 0%, 100% { transform: rotate(35deg); } 20%, 60% { transform: rotate(130deg); } 40%, 80% { transform: rotate(35deg); } }
@keyframes motion-wave-right { 0%, 100% { transform: rotate(-35deg); } 20%, 60% { transform: rotate(-130deg); } 40%, 80% { transform: rotate(-35deg); } }
@keyframes motion-stretch { 0%, 100% { transform: translateX(0) rotate(0); } 35%, 70% { transform: translateX(-9px) rotate(-12deg); } }
@keyframes motion-stretch-arm-left { 0%, 100% { transform: rotate(35deg); } 35%, 70% { transform: rotate(118deg); } }
@keyframes motion-stretch-arm-right { 0%, 100% { transform: rotate(-35deg); } 35%, 70% { transform: rotate(-118deg); } }
.cat-motion { width: 100%; height: 100%; background: linear-gradient(135deg, #e7f0e5, #f7e5d3); }
.cat-sprite { position: absolute; inset: 0; display: block; background-position: 0 0; background-repeat: no-repeat; background-size: 200% 200%; animation: cat-sprite-frames 6s steps(1) infinite; }
.cat-sprite-squat { background-image: url("assets/avi-cat-squat.png"); }
.cat-sprite-plank { background-image: url("assets/avi-cat-plank.png"); }
.cat-sprite-arms { background-image: url("assets/avi-cat-arms.png"); }
.cat-sprite-stretch { background-image: url("assets/avi-cat-stretch.png"); }
.cat-motion small { z-index: 3; left: 4px; right: auto; color: #5a6f5e; text-shadow: 0 1px 3px #fffdf8; }
.detail-cat-motion { width: 184px; height: 142px; margin: -8px auto 0; }
.exercise-detail-video .detail-cat-motion { transform: none; }
@keyframes cat-sprite-frames {
  0%, 24.9% { background-position: 0 0; }
  25%, 49.9% { background-position: 100% 0; }
  50%, 74.9% { background-position: 0 100%; }
  75%, 99.9% { background-position: 100% 100%; }
  100% { background-position: 0 0; }
}
.food-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.food-photo-preview { margin-top: 16px; overflow: hidden; border-radius: 16px; background: #f1f6ed; }
.food-photo-preview img { display: block; width: 100%; max-height: 230px; object-fit: cover; }
.food-photo-preview p { margin: 0; padding: 12px 13px; font-size: 11px; }
.profile-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 18px; }
.profile-summary span { min-height: 66px; padding: 12px; border-radius: 14px; background: #f1f6ed; }
.profile-summary b, .profile-summary small { display: block; }
.profile-summary b { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: #6a806e; }
.profile-summary small { margin-top: 6px; font-size: 13px; font-weight: 800; color: #3e5144; }