*{box-sizing:border-box}body{margin:0;background:#e9dfd0;color:#201f1c;font-family:"PingFang SC","苹方-简",sans-serif}main{max-width:1120px;margin:auto;min-height:100vh;background:linear-gradient(#eee5d8dd,#e7dccdcc)}.hero{min-height:280px;padding:74px 56px 40px;color:#f8f2e7;background:linear-gradient(100deg,#102018e8,#5a3728cc 60%,#354c24cc)}.hero span{color:#ffc34d;border:1px solid #a57d30;border-radius:30px;padding:8px 14px}.hero h1{font-size:44px;margin:24px 0 10px}.hero p{color:#ddd5c9}nav{display:grid;grid-template-columns:repeat(4,1fr);background:#1e1e1e}nav button{border:0;border-right:1px solid #3c3c3c;background:none;color:#eee;padding:20px;font-size:17px;cursor:pointer}nav button.active{color:#ffc34d;box-shadow:inset 0 -4px #ffc34d}.module{padding:48px 40px}.module>h2{text-align:center;font-size:30px;font-weight:500;letter-spacing:4px;margin:0 0 40px}.card,.pet{background:#f6efe3;border:1px solid #cfc2ab;border-radius:18px;box-shadow:0 7px 0 #c9c0b3;padding:22px}.filters label{display:block;font-weight:600;margin-bottom:12px}.search{display:grid;grid-template-columns:1fr 210px;gap:12px}input,select{width:100%;padding:14px;border:1px solid #a99d89;border-radius:12px;background:#fffaf2;font:inherit}.pet-layout{display:grid;grid-template-columns:340px 1fr;gap:20px;margin-top:20px}.pet-list{display:grid;gap:12px;align-content:start}.pet{text-align:left;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font:inherit}.pet span{display:grid;gap:6px}.pet small,.detail small{color:#756e63}.pet em,.detail em{font-style:normal;border:1px solid #cbbd9f;border-radius:99px;padding:6px 12px}.pet.active{background:#ffd065;border-color:#d5961a;box-shadow:inset 4px 0 #1d1d1d,0 7px 0 #c9c0b3}.detail header{display:flex;justify-content:space-between}.detail h3{font-size:28px;margin:6px 0 18px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stats div,.skills>div{border:1px solid #d6cab5;border-radius:12px;padding:12px;display:grid;gap:5px}.info{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}.skills{display:grid;gap:10px}.skills span{color:#756e63;font-size:13px}.skills p,.info p{margin:3px 0}.placeholder{text-align:center;padding:80px 24px;color:#756e63}@media(max-width:720px){.hero{padding:48px 22px}.hero h1{font-size:30px}nav{grid-template-columns:1fr 1fr}.module{padding:32px 16px}.search,.pet-layout,.info{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}