/* ═══════════════════════════════════════════
   页面样式 v2.0
   ═══════════════════════════════════════════ */

/* ── 登录页 ── */
.login-overlay{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#FFF8F0 0%,#F0E6FF 50%,#E8F4FD 100%)}
.login-overlay::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,107,157,.08) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(93,173,226,.08) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(176,124,216,.06) 0%,transparent 60%);pointer-events:none}
.login-card{background:var(--card);border-radius:24px;padding:40px;width:420px;max-width:95vw;box-shadow:0 20px 60px rgba(91,79,207,.15);animation:modalSlideIn .45s cubic-bezier(.68,-.2,.27,1.3);position:relative;overflow:hidden}
.login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--secondary),var(--accent-purple),var(--accent-blue),var(--accent-green));border-radius:24px 24px 0 0}
.login-card h2{text-align:center;font-size:28px;margin-bottom:24px;color:var(--text)}
.login-card .error-msg{text-align:center;color:var(--danger);font-size:13px;min-height:20px;margin-bottom:8px;transition:all .2s}
.login-card .switch-link{text-align:center;margin-top:18px;font-size:14px;color:var(--dim)}
.login-card .switch-link a{color:var(--accent-blue);font-weight:700;cursor:pointer;transition:color .2s}
.login-card .switch-link a:hover{color:var(--primary)}

/* ── 个人中心 ── */
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:500px){.profile-grid{grid-template-columns:1fr}}

/* ── 宠物展示卡片 ── */
.pet-egg-card,.pet-card{text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.pet-egg-card::before,.pet-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);background-size:200% 200%;opacity:0;transition:opacity .3s;pointer-events:none;z-index:1}
.pet-egg-card:hover,.pet-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(91,79,207,.18)}
.pet-egg-card:hover::before,.pet-card:hover::before{opacity:1}
.pet-egg-card:active,.pet-card:active{transform:translateY(-2px)}

.pet-display{position:relative;display:inline-block}
.pet-display .pet-avatar{font-size:100px;display:block;line-height:1.2;filter:drop-shadow(0 8px 16px rgba(0,0,0,.15));transition:filter .3s}
.pet-display .pet-glow{position:absolute;inset:-20px;background:radial-gradient(circle at 50% 40%,rgba(255,215,0,.15) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .5s}
.pet-display:hover .pet-glow{opacity:1}
.pet-display .stage-badge{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%)}

/* ── 商店 ── */
.shop-item{text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.shop-item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);pointer-events:none;opacity:0;transition:opacity .3s;z-index:1}
.shop-item:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(91,79,207,.15)}
.shop-item:hover::before{opacity:1}

/* ── 排行榜 ── */
.podium{display:flex;align-items:flex-end;justify-content:center;gap:24px;padding:32px 0 16px}
.podium-item{text-align:center;animation:slideUp .6s ease backwards}
.podium-item:nth-child(1){animation-delay:.1s;min-width:90px}
.podium-item:nth-child(2){animation-delay:.3s;min-width:90px}
.podium-item:nth-child(3){animation-delay:.5s;min-width:90px}
.podium-bar{border-radius:16px 16px 0 0;min-width:80px;padding:14px 8px;color:#fff;font-weight:900;font-size:16px;transition:height .6s cubic-bezier(.4,0,.2,1);text-shadow:0 2px 4px rgba(0,0,0,.2);position:relative;overflow:hidden}
.podium-bar::after{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:40px;height:4px;background:rgba(255,255,255,.3);border-radius:2px}
.podium-1 .podium-bar{background:linear-gradient(180deg,#ffd700,#f0c040,#e0a800);height:130px}
.podium-2 .podium-bar{background:linear-gradient(180deg,#c0c0c0,#a8a8a8,#888);height:100px}
.podium-3 .podium-bar{background:linear-gradient(180deg,#cd7f32,#a0622a,#7a4a1a);height:75px}
.rank-table td{vertical-align:middle}
.rank-badge{font-size:24px;width:44px;text-align:center}
@media(max-width:500px){.podium-bar{min-width:60px}.podium-1 .podium-bar{height:100px}.podium-2 .podium-bar{height:75px}.podium-3 .podium-bar{height:55px}}

/* ── 学生卡片 ── */
.student-card{border:2px solid var(--border);border-radius:16px;padding:18px;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1);background:var(--card);cursor:pointer;position:relative;overflow:hidden}
.student-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple));opacity:0;transition:opacity .3s}
.student-card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(91,79,207,.15)}
.student-card:hover::before{opacity:1}
.student-card.selected{border-color:var(--secondary);box-shadow:0 0 0 4px rgba(255,107,157,.2)}
.student-card .avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 10px;background:linear-gradient(135deg,rgba(255,179,71,.2),rgba(255,107,157,.15))}

/* ── 签到日历 ── */
.checkin-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:360px;margin:0 auto}
.checkin-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:13px;font-weight:600;background:var(--bg-alt);cursor:default;transition:all .2s}
.checkin-day.checked{background:linear-gradient(135deg,var(--accent-green),#3cb371);color:#fff;box-shadow:0 2px 8px rgba(88,214,141,.3)}
.checkin-day.today{border:2px solid var(--accent-blue);box-shadow:0 0 0 3px rgba(93,173,226,.2)}
.checkin-day.missed{background:#f5f5f5;color:var(--dim)}

/* ── 模板卡片 ── */
.template-card{position:relative;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}
.template-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(91,79,207,.12)}

/* ── 通知红点 ── */
.notification-dot{position:relative}
.notification-dot::after{content:'';position:absolute;top:4px;right:4px;width:10px;height:10px;border-radius:50%;background:var(--danger);border:2px solid var(--card);animation:pulse 2s infinite}