*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#101933;color:#fff}
body{background:radial-gradient(circle at top,#283765 0,#111831 52%,#0b1124 100%)}
.app-shell{display:flex;width:100%;min-height:100vh}
.sidebar{width:285px;background:linear-gradient(180deg,rgba(24,36,79,.98),rgba(34,31,62,.98));padding:28px 16px;box-shadow:8px 0 30px rgba(0,0,0,.25);position:relative;z-index:3}
.brand-logo{font-size:52px;font-weight:bold;letter-spacing:-3px;text-align:center;text-shadow:0 0 15px rgba(78,211,255,.5)}
.brand-logo span{font-size:28px;color:#ff4591;margin-left:4px}
.brand-sub{text-align:center;margin-top:-2px;color:#d6d9f0;font-style:italic}
.profile-card{margin-top:28px;padding:16px;background:linear-gradient(135deg,#203b79,#111f4b);border:1px solid #3a65a8;border-radius:18px;display:grid;grid-template-columns:52px 1fr;gap:10px;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.avatar-mini{width:52px;height:52px;border-radius:50%;background:#fff;color:#263b6c;display:flex;align-items:center;justify-content:center;font-size:25px;border:3px solid #53cfff}
.profile-name{font-size:22px;font-weight:bold}
.profile-meta{font-size:13px;color:#c8d6f0;margin-top:4px}
.level{grid-column:1/3;color:#ffd45b;font-size:13px;border-top:1px solid rgba(255,255,255,.1);padding-top:9px}
.menu{margin-top:18px}
.menu a{display:flex;gap:13px;align-items:center;color:#fff;text-decoration:none;padding:13px 15px;margin:7px 0;border-radius:12px;border:1px solid rgba(96,147,224,.38);background:rgba(19,35,82,.58);font-size:16px}
.menu a:hover,.menu a.active{background:linear-gradient(90deg,#21aeea,#3989eb);box-shadow:0 0 18px rgba(51,190,255,.45)}
.main-area{flex:1;padding:28px;min-width:0}
.hero{display:grid;grid-template-columns:minmax(520px,1fr) 390px;gap:22px;max-width:1280px;margin:0 auto}
.hero-image-wrap{position:relative;min-height:720px;border-radius:24px;overflow:hidden;box-shadow:0 16px 35px rgba(0,0,0,.35);background:#1b2440;border:1px solid rgba(103,164,255,.35)}
.hero-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;animation:vivali-breathe 4s ease-in-out infinite;transform-origin:50% 70%}
@keyframes vivali-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
.hero-image-wrap.is-happy img{animation:vivali-happy .5s ease-in-out 5}
@keyframes vivali-happy{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(1deg)}}
.speech{position:absolute;top:45px;left:45px;background:rgba(255,255,255,.96);color:#172248;border-radius:20px;padding:17px 21px;font-size:18px;line-height:1.35;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.speech:after{content:"";position:absolute;left:35px;bottom:-17px;border:10px solid transparent;border-top-color:#fff}
.pet-name-badge{position:absolute;top:18px;left:50%;transform:translateX(-50%);background:rgba(15,31,76,.88);border:1px solid rgba(109,177,255,.55);padding:11px 23px;border-radius:0 0 20px 20px;font-size:22px;font-weight:bold}
.side-panels{display:flex;flex-direction:column;gap:20px}
.panel{background:linear-gradient(180deg,rgba(20,40,91,.97),rgba(18,31,72,.97));border:1px solid #3d6bac;border-radius:20px;padding:20px;box-shadow:0 14px 30px rgba(0,0,0,.28)}
.panel h2{margin:0 0 18px;font-size:23px;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:12px}
.stat-row{display:grid;grid-template-columns:28px 90px 1fr 47px;align-items:center;gap:8px;margin:14px 0}
.stat-icon{font-size:23px}.stat-name{font-size:14px}
.stat-track{height:15px;border-radius:10px;background:#0d1838;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.stat-fill{height:100%;border-radius:10px;transition:width .4s ease}
.stat-health{background:linear-gradient(90deg,#ff3f9c,#ff74b9)}
.stat-hunger{background:linear-gradient(90deg,#ff9f15,#ffc04e)}
.stat-happiness{background:linear-gradient(90deg,#e93dc2,#ff5bb7)}
.stat-energy{background:linear-gradient(90deg,#22a6f4,#55c8ff)}
.stat-cleanliness{background:linear-gradient(90deg,#6d46e8,#9d61f5)}
.color-row{display:grid;grid-template-columns:1fr 54px 92px;align-items:center;gap:10px;padding:9px 0}
.color-row input[type=color]{width:48px;height:38px;border:0;background:transparent}
.color-row code{background:#0d193a;border:1px solid #2d528e;border-radius:10px;padding:9px;font-family:Consolas,monospace;color:#fff}
.panel-buttons{text-align:center;margin-top:15px}
.btn{border:0;border-radius:12px;padding:12px 22px;color:#fff;font-size:15px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,#ef3b93,#ff3b7e);box-shadow:0 0 15px rgba(255,54,137,.35)}
.action-bar{max-width:980px;margin:22px auto 0;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.action-bar button{width:142px;padding:17px 12px;border:0;border-radius:16px;background:linear-gradient(180deg,#f8fbff,#d8e7ff);color:#102351;font-size:30px;box-shadow:0 8px 18px rgba(0,0,0,.25);cursor:pointer}
.action-bar button span{display:block;font-size:14px;font-weight:bold;margin-top:6px}
.action-bar button:hover{transform:translateY(-2px)}
.toast{max-width:620px;margin:18px auto 0;text-align:center;background:#223b77;border:1px solid #557fd0;border-radius:999px;padding:10px 18px;color:#fff;opacity:.95}
.empty-card{max-width:700px;margin:80px auto;background:#182958;border:1px solid #3d6bac;border-radius:18px;padding:40px;text-align:center}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.hero-image-wrap{min-height:620px}.side-panels{display:grid;grid-template-columns:1fr 1fr}.sidebar{width:235px}}
@media(max-width:760px){.app-shell{display:block}.sidebar{width:100%;position:static}.menu{display:none}.main-area{padding:12px}.hero-image-wrap{min-height:500px}.side-panels{grid-template-columns:1fr}.speech{font-size:14px;left:20px;top:25px}.hero{display:block}.panel{margin-top:14px}}