:root{--bg1: #fff7ed;--bg2: #f3f0ff;--card: #ffffff;--ink: #3b2f4a;--ink-soft: #6b5f7d;--muted: #9b90ab;--line: #efe8f7;--brand: #ff7a45;--brand-soft: #ffe9dd;--purple: #7c5cff;--purple-soft: #ece7ff;--green: #22c1a4;--green-soft: #dcfaf3;--yellow: #ffc53d;--pink: #ff7eb3;--blue: #45a9ff;--red: #ff5a5f;--radius: 20px;--shadow: 0 10px 30px rgba(96, 74, 148, .1);--shadow-lg: 0 18px 44px rgba(96, 74, 148, .16)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:PingFang SC,HarmonyOS Sans SC,Hiragino Sans GB,Microsoft YaHei,system-ui,-apple-system,sans-serif;color:var(--ink);background:linear-gradient(160deg,var(--bg1) 0%,#fff 40%,var(--bg2) 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input,select,textarea{font-family:inherit;font-size:15px;color:var(--ink)}h1,h2,h3,h4{margin:0;font-weight:800}.app{min-height:100%;padding-bottom:60px}.container{max-width:1560px;margin:0 auto;padding:0 20px}.topbar{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffd1;border-bottom:1px solid var(--line)}.topbar-inner{display:flex;align-items:center;gap:14px;padding:12px 20px;max-width:1180px;margin:0 auto}.logo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:900;letter-spacing:.5px}.logo-badge{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px;background:linear-gradient(135deg,var(--brand),var(--pink));box-shadow:0 6px 16px #ff7a4559}.tabs{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}.tab{padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink-soft);transition:all .18s}.tab:hover{background:var(--purple-soft);color:var(--purple)}.tab.active{background:var(--purple);color:#fff;box-shadow:0 6px 16px #7c5cff52}.user-chip{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:14px}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;border:1px solid rgba(255,255,255,.7)}.section-title{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:14px}.section-title .sub{font-size:13px;font-weight:600;color:var(--muted)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:14px;font-weight:800;font-size:15px;background:#f4f1fa;color:var(--ink);transition:transform .12s,box-shadow .18s,background .18s}.btn:active{transform:scale(.96)}.btn.primary{background:linear-gradient(135deg,var(--brand),#ff9f6e);color:#fff;box-shadow:0 8px 20px #ff7a4552}.btn.purple{background:linear-gradient(135deg,var(--purple),#a78bfa);color:#fff;box-shadow:0 8px 20px #7c5cff4d}.btn.green{background:linear-gradient(135deg,var(--green),#5ee0c4);color:#fff;box-shadow:0 8px 20px #22c1a44d}.btn.danger{background:#fff1f0;color:var(--red)}.btn.ghost{background:#fff;border:1.5px solid var(--line)}.btn.sm{padding:7px 12px;font-size:13px;border-radius:11px}.btn:disabled{opacity:.45;cursor:not-allowed}.chip{padding:7px 14px;border-radius:999px;background:#f6f3fb;font-weight:700;font-size:13.5px;color:var(--ink-soft);border:1.5px solid transparent;transition:all .15s}.chip:hover{border-color:var(--purple-soft)}.chip.active{background:var(--purple-soft);color:var(--purple);border-color:var(--purple)}.chip.warn.active{background:#fff1f0;color:var(--red);border-color:var(--red)}.input{width:100%;padding:11px 14px;border-radius:13px;border:1.5px solid var(--line);background:#fbfaff;outline:none}.input:focus{border-color:var(--purple);background:#fff}.grid{display:grid;gap:16px}.grid.pets{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}.stat{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px}.stat .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px}.stat .num{font-size:22px;font-weight:900;line-height:1.1}.stat .label{font-size:12.5px;color:var(--muted);font-weight:700}.pet-card{background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);border:2px solid transparent;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden}.pet-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.pet-card.danger{border-color:#ffccc7;background:linear-gradient(180deg,#fff7f6,#fff)}.pet-card .pet-stage{position:absolute;top:12px;right:12px;font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--purple-soft);color:var(--purple)}.pet-card .avatar{display:grid;place-items:center;aspect-ratio:1 / 1;border-radius:16px;background:linear-gradient(160deg,#fdf6ff,#f2f8ff)}.pet-card .avatar .pet-sprite{width:100%;height:100%}.pet-name{text-align:center;font-weight:900;font-size:16px;margin-top:6px}.pet-owner{text-align:center;font-size:12.5px;color:var(--muted);font-weight:700;margin-bottom:8px}.bar{height:9px;border-radius:999px;background:#f0ecf7;overflow:hidden}.bar>span{display:block;height:100%;border-radius:999px;transition:width .5s cubic-bezier(.2,.9,.3,1)}.bar.exp>span{background:linear-gradient(90deg,#ffb648,#ff7a45)}.bar.mood>span{background:linear-gradient(90deg,#7ee8fa,#22c1a4)}.bar.mood.low>span{background:linear-gradient(90deg,#ffa39e,#ff5a5f)}.bar-label{display:flex;justify-content:space-between;font-size:11.5px;font-weight:800;color:var(--muted);margin:8px 0 4px}.quick-row{display:flex;gap:6px;margin-top:10px}.quick-btn{flex:1;padding:8px 0;border-radius:12px;font-weight:900;font-size:14px;background:#f6f3fb;transition:all .15s}.quick-btn:hover{background:var(--green-soft);color:#0f9b83}.quick-btn.minus:hover{background:#fff1f0;color:var(--red)}.hero{display:grid;grid-template-columns:1fr 320px;gap:18px}@media (max-width: 860px){.hero{grid-template-columns:1fr}}.hero-pet{display:grid;place-items:center;padding:10px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#fff8e6,#f3f0ff 60%,#eef6ff);aspect-ratio:1 / 1;position:relative;overflow:hidden}.hero-pet .pet-sprite{width:100%;height:100%}.hero-pet .ring{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.9),transparent 55%)}.mood-tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-weight:800;font-size:14px}.list-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}.list-item:last-child{border-bottom:none}.rank-medal{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:14px;background:#f4f1fa;color:var(--ink-soft)}.rank-medal.g1{background:linear-gradient(135deg,#ffd666,#ffa940);color:#fff}.rank-medal.g2{background:linear-gradient(135deg,#d9d9d9,#bfbfbf);color:#fff}.rank-medal.g3{background:linear-gradient(135deg,#ffbb96,#ff9340);color:#fff}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:30px 20px;background:radial-gradient(circle at 20% 20%,#ffe9d6 0%,transparent 45%),radial-gradient(circle at 80% 25%,#e5dbff 0%,transparent 45%),radial-gradient(circle at 50% 85%,#d9f5f0 0%,transparent 50%),#fffdf9}.login-card{width:min(880px,100%);background:#ffffffb8;border-radius:30px;box-shadow:var(--shadow-lg);padding:34px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}@media (max-width: 768px){.login-wrap{justify-content:center!important;padding-left:20px!important;padding-right:20px!important}.login-card{width:100%!important}.login-panel{width:100vw!important;max-width:100vw!important;margin-left:0!important;padding:24px 20px!important;background:#ffffffeb!important}.login-hero{display:none!important}}.role-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}@media (max-width: 720px){.role-cards{grid-template-columns:1fr}}.role-card{border-radius:22px;padding:22px;border:2.5px solid var(--line);background:#fff;text-align:left;transition:all .2s}.role-card.active{border-color:var(--purple);box-shadow:0 12px 28px #7c5cff2e}.role-card .emoji{font-size:34px}.role-card h3{font-size:18px;margin:8px 0 4px}.student-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:12px}.student-btn{padding:12px 6px;border-radius:16px;background:#f8f6fd;border:2px solid transparent;font-weight:800;font-size:14px;transition:all .15s}.student-btn div:first-child{font-size:22px}.student-btn:hover,.student-btn.active{border-color:var(--purple);background:var(--purple-soft)}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#3b2f4a6b;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:60;padding:20px;animation:fade .18s ease}.modal{width:min(560px,100%);background:#fff;border-radius:26px;padding:26px;box-shadow:var(--shadow-lg);max-height:88vh;overflow:auto;animation:pop .22s cubic-bezier(.2,1.2,.4,1)}.zoom-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:90;background:#1e162cd1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:zoom-out;animation:fade .18s ease}.zoom-mask .zoom-close{position:absolute;top:18px;right:26px;color:#ffffffd9;font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;background:#ffffff1f}.zoom-mask .zoom-caption{position:absolute;bottom:22px;left:50%;transform:translate(-50%);color:#fff;font-weight:800;font-size:16px;padding:10px 20px;border-radius:999px;background:#ffffff24;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}.field{margin-bottom:14px}.field label{display:block;font-size:13.5px;font-weight:800;color:var(--ink-soft);margin-bottom:7px}.toasts{position:fixed;top:76px;left:50%;transform:translate(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.toast{padding:12px 20px;border-radius:999px;background:#3b2f4af0;color:#fff;font-weight:800;font-size:14.5px;box-shadow:var(--shadow-lg);animation:pop .24s cubic-bezier(.2,1.2,.4,1)}.toast.success{background:linear-gradient(135deg,#22c1a4,#4fd1c5)}.toast.warn{background:linear-gradient(135deg,#ff7875,#ff5a5f)}.toast.level{background:linear-gradient(135deg,#ffb648,#ff7a45)}.codex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}.codex-cell{border-radius:18px;padding:12px;background:#fbfaff;border:2px solid var(--line);text-align:center;transition:transform .18s}.codex-cell.unlocked{background:#fff;border-color:#ffe0b2;box-shadow:var(--shadow)}.codex-cell.unlocked:hover{transform:translateY(-4px) scale(1.02)}.codex-cell.locked{filter:grayscale(1);opacity:.55}.codex-cell .nm{font-weight:900;font-size:14px;margin-top:4px}.codex-cell .sub{font-size:11.5px;color:var(--muted);font-weight:700}.species-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes auraPulse{0%,to{opacity:.45;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}@keyframes sparkle{0%,to{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}@keyframes pop{0%{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes wiggle{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.sprite-float{animation:float 2.8s ease-in-out infinite;transform-origin:100px 180px}.sprite-slow{animation:float 5s ease-in-out infinite;transform-origin:100px 180px}.sprite-aura{animation:auraPulse 3s ease-in-out infinite;transform-origin:100px 110px}.sprite-spark g{animation:sparkle 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.pet-float{animation:petFloat 2.6s ease-in-out infinite;transform-origin:100px 180px}.pet-hop{animation:petHop .66s ease-in-out infinite;transform-origin:100px 180px}.pet-sick-breathe{animation:petSick 4.2s ease-in-out infinite;transform-origin:100px 180px}.pet-droop{animation:petDroop 3.6s ease-in-out infinite;transform-origin:100px 180px}.pet-egg-rock{animation:petEggRock 3s ease-in-out infinite;transform-origin:100px 182px}.pet-breathe{animation:petBreathe 2.4s ease-in-out infinite}.pet-blink{animation:petBlink 4.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.pet-tail-r{animation:petWag 1.5s ease-in-out infinite}.pet-tail-l{animation:petWagRev 1.5s ease-in-out infinite}.pet-ear-l{animation:petWagRev 2.3s ease-in-out infinite}.pet-ear-r{animation:petWag 2.3s ease-in-out infinite}.pet-wing-l{animation:petFlapRev 2s ease-in-out infinite}.pet-wing-r{animation:petFlap 2s ease-in-out infinite}.pet-arm-l{animation:petWagRev 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:top center}.pet-arm-r{animation:petWag 1.8s ease-in-out infinite;transform-box:fill-box;transform-origin:top center}.pet-frill{animation:petFrill 3s ease-in-out infinite}@keyframes petJaw{0%,58%,to{transform:rotate(0)}66%{transform:rotate(-8deg)}74%{transform:rotate(-1.5deg)}82%{transform:rotate(-6.5deg)}92%{transform:rotate(0)}}.pet-jaw{animation:petJaw 3.6s ease-in-out infinite}@keyframes petHeadTilt{0%,to{transform:rotate(0)}50%{transform:rotate(-1.6deg)}}.pet-head-tilt{animation:petHeadTilt 3.6s ease-in-out infinite}.pet-aura{animation:auraPulse 3s ease-in-out infinite;transform-origin:100px 106px}.pet-spark g{animation:sparkle 1.7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.pet-zzz text{animation:petZzz 2.7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.pet-cry{animation:petCry 1.8s ease-in-out infinite}@keyframes petFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes petHop{0%,to{transform:translateY(0) scale(1)}28%{transform:translateY(-13px) scale(.965,1.045)}56%{transform:translateY(0) scale(1.05,.94)}72%{transform:translateY(-4px) scale(1)}}@keyframes petSick{0%,to{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(3px) rotate(1.6deg)}}@keyframes petDroop{0%,to{transform:translateY(3px) rotate(-1.2deg)}50%{transform:translateY(5px) rotate(1.2deg)}}@keyframes petEggRock{0%,to{transform:rotate(-3.5deg)}50%{transform:rotate(3.5deg)}}@keyframes petBreathe{0%,to{transform:scale(1)}50%{transform:scale(1.035,.972)}}@keyframes petBlink{0%,90%,to{transform:scaleY(1)}94%{transform:scaleY(.06)}}@keyframes petWag{0%,to{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}@keyframes petWagRev{0%,to{transform:rotate(7deg)}50%{transform:rotate(-9deg)}}@keyframes petFlap{0%,to{transform:rotate(-11deg)}50%{transform:rotate(7deg)}}@keyframes petFlapRev{0%,to{transform:rotate(11deg)}50%{transform:rotate(-7deg)}}@keyframes petFrill{0%,to{transform:scale(1)}50%{transform:scale(1.022)}}@keyframes petZzz{0%{opacity:0;transform:translate(0) scale(.7)}25%{opacity:1;transform:translate(2px,-4px) scale(1)}to{opacity:0;transform:translate(12px,-24px) scale(1.1)}}@keyframes petCry{0%{opacity:0;transform:translateY(-4px) scale(.7)}25%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(22px) scale(.85)}}.pet-sprite{display:block;overflow:visible}.wiggle{animation:wiggle .4s ease-in-out 2}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}.muted{color:var(--muted)}.small{font-size:12.5px}.badge-pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#fff7e6;color:#d48806}.alert{border-radius:16px;padding:12px 16px;font-weight:700;font-size:14px;display:flex;gap:10px;align-items:flex-start}.alert.warn{background:#fff7e6;color:#ad6800}.alert.danger{background:#fff1f0;color:#cf1322}.alert.info{background:#e6f4ff;color:#0958d9}.empty{text-align:center;padding:40px 20px;color:var(--muted);font-weight:700}.scroll-list{max-height:420px;overflow:auto}.student-pick-row{display:flex;flex-wrap:wrap;gap:8px}.pick-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#f6f3fb;font-weight:800;font-size:14px;border:2px solid transparent}.pick-btn.active{border-color:var(--purple);background:var(--purple-soft);color:var(--purple)}.score-big{font-size:40px;font-weight:900;line-height:1}@keyframes pet-fx-float{0%,to{transform:translateY(0) scale(.85);opacity:.28}50%{transform:translateY(-10px) scale(1.15);opacity:1}}.pet-fx{animation:pet-fx-float 2.6s ease-in-out infinite}@keyframes pet-ring-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pet-ring{animation:pet-ring-spin 9s linear infinite}.codex-cell.unlocked{border-color:#ffd666}@media (prefers-reduced-motion: reduce){.pet-fx,.pet-ring{animation:none}}.celebration{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:radial-gradient(circle at 50% 28%,#352a66,#1b1440 62%,#0c0922);overflow:hidden;cursor:pointer}.celebration .celeb-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:flex;align-items:center;justify-content:center;overflow:hidden;filter:blur(30px) brightness(.45) saturate(1.25);transform:scale(1.18);pointer-events:none}.celebration .celeb-bg .pet-sprite{width:max(100vw,100vh);height:max(100vw,100vh);flex-shrink:0}.celebration .celeb-confetti span{position:absolute;top:-30px;z-index:2;border-radius:2px;opacity:.95;animation-name:celebFall;animation-timing-function:linear;animation-iteration-count:infinite}.celebration .celeb-confetti span.round{border-radius:50%}@keyframes celebFall{0%{transform:translateY(-30px) rotate(0);opacity:1}88%{opacity:1}to{transform:translateY(108vh) rotate(560deg);opacity:.55}}.celebration .celeb-pet{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}.celebration .celeb-pet .pet-sprite{width:min(100vw,88vh);height:min(100vw,88vh);flex-shrink:0;transform:translateY(-2vh);filter:drop-shadow(0 8px 40px rgba(0,0,0,.35))}.celebration .celeb-inner{position:absolute;left:0;right:0;bottom:0;z-index:3;text-align:center;color:#fff;padding:24px 16px 22px;background:linear-gradient(to top,#090518e0,#09051880 55%,#09051800);animation:pop .42s cubic-bezier(.2,1.2,.4,1)}.celebration .celeb-badge{display:inline-block;background:linear-gradient(120deg,#ffd666,#ff9c6e);color:#7a3d00;font-weight:900;font-size:17px;letter-spacing:6px;padding:7px 24px;border-radius:999px;box-shadow:0 6px 24px #ffaa5a73;margin-bottom:8px}.celebration .celeb-title{font-size:clamp(20px,3.2vw,30px);font-weight:900;margin-top:4px;text-shadow:0 2px 18px rgba(0,0,0,.45)}.celebration .celeb-title b{color:#ffd666}.celebration .celeb-sub{margin-top:3px;font-size:clamp(13px,2vw,17px);color:#d9d2f5}.celebration .celeb-sub b{color:#7ecbff}.celebration .celeb-camera{margin-top:8px;display:inline-block;font-size:clamp(12px,1.9vw,15px);font-weight:800;color:#fff;background:#ffffff1a;border:1px dashed rgba(255,255,255,.45);border-radius:12px;padding:6px 18px}.celebration .celeb-inner .btn{margin-top:8px;font-size:15px;padding:8px 30px}