:root{--primary: #FF8A65;--secondary: #4ECDC4;--accent: #FFD93D;--bg: #FFF8E7;--text: #2C3E50;--shadow: 0 6px 0 rgba(0,0,0,.1)}.app-container{min-height:100vh;background:var(--bg);font-family:Quicksand,PingFang SC,system-ui,sans-serif;color:var(--text);padding:20px;display:flex;flex-direction:column;align-items:center}.app-header{width:100%;max-width:600px;display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.logo-group{display:flex;align-items:center;gap:10px}.logo-icon{color:var(--primary);filter:drop-shadow(2px 2px 0px var(--accent))}.logo-group h1{font-size:24px;margin:0;font-weight:800}.logo-group span{font-size:12px;opacity:.5;display:block}.cloud-badge{background:#fff;padding:6px 12px;border-radius:20px;display:flex;align-items:center;gap:6px;font-size:12px;box-shadow:0 2px 10px #0000000d;transition:all .3s}.cloud-badge.saving{color:var(--primary);animation:pulse 1.5s infinite}.cloud-badge.saved{color:var(--secondary)}.card{background:#fff;width:100%;max-width:500px;border-radius:32px;padding:40px;box-shadow:var(--shadow),0 20px 40px #0000000d;text-align:center;border:3px solid var(--text)}.start-card h2{font-size:28px;margin:20px 0 10px}.start-card p{opacity:.7;margin-bottom:30px}.welcome-visual{position:relative;height:160px;display:flex;justify-content:center}.svg-hero{width:160px;height:160px}.paw-decoration{position:absolute;font-size:40px;top:0;right:20%;transform:rotate(20deg)}.pet-input{width:100%;padding:16px 24px;border-radius:20px;border:3px solid #eee;font-size:18px;margin-bottom:20px;outline:none;transition:border-color .3s}.pet-input:focus{border-color:var(--primary)}.btn-primary{background:var(--primary);color:#fff;border:none;padding:16px 32px;border-radius:999px;font-size:18px;font-weight:700;display:flex;align-items:center;gap:10px;cursor:pointer;box-shadow:0 6px #d86a4a;transition:all .2s;margin:0 auto}.btn-primary:active{transform:translateY(4px);box-shadow:0 2px #d86a4a}.btn-secondary{background:#eee;color:var(--text);border:none;padding:12px 24px;border-radius:999px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px}.btn-text{background:none;border:none;color:#999;cursor:pointer;margin-top:20px;display:flex;align-items:center;gap:4px}.progress-bar{height:10px;background:#f0f0f0;border-radius:5px;margin-bottom:20px;overflow:hidden}.progress-fill{height:100%;background:var(--secondary);transition:width .4s cubic-bezier(.34,1.56,.64,1)}.step-indicator{font-size:14px;color:#999;font-weight:600}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:30px 0}.option-btn{background:#fff;border:3px solid #eee;padding:20px 15px;border-radius:20px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.option-btn:hover{border-color:var(--secondary);background:#f0fffe;transform:translateY(-3px)}.result-header{display:flex;align-items:center;gap:20px;text-align:left;margin-bottom:30px}.role-avatar{width:100px;height:100px;background:var(--accent);border-radius:24px;overflow:hidden;border:3px solid var(--text)}.role-avatar img{width:100%;height:100%;object-fit:cover}.avatar-fallback{font-size:50px;display:flex;align-items:center;justify-content:center;height:100%}.badge{background:var(--secondary);color:#fff;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:700}.role-name{font-size:24px;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--primary)}.report-section{background:#f8f9fa;border-radius:24px;padding:25px;text-align:left;margin-bottom:20px;border:2px dashed #DDD}.section-title{font-weight:700;margin-bottom:15px;display:flex;align-items:center;gap:8px}.report-text{line-height:1.6;font-size:15px;white-space:pre-wrap}.report-footer{margin-top:15px;font-size:12px;color:#999;font-style:italic}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:30px}.stat-item{background:#fff;padding:15px;border-radius:16px;border:2px solid #eee}.stat-label{font-size:13px;color:#666;display:block;margin-bottom:5px}.action-group{display:flex;gap:15px;justify-content:center}.loading-report{padding:40px 0}.spinner{width:30px;height:30px;border:4px solid #eee;border-top-color:var(--primary);border-radius:50%;margin:0 auto 15px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 480px){.options-grid{grid-template-columns:1fr}.card{padding:25px}.result-header{flex-direction:column;text-align:center}}