/* 灵宠星球 · 星穹蓝主题 v2（高饱和富色彩重设计）
   替换此前多轮近白色补丁：饱和蔚蓝渐变底、深navy玻璃侧栏、白卡片彩边、青/金/珊瑚强调色 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap');

:root{
  --blue-900:#0a2158; --blue-800:#0e2f78; --blue-700:#13459e; --blue-600:#1a5cc8;
  --blue-500:#2b7bef; --blue-400:#4f9bff; --blue-300:#8cc2ff; --blue-100:#d8eaff;
  --cyan:#19b8ff; --gold:#f5a623; --coral:#ff6b81; --violet:#7c5cff; --green:#22c58b; --orange:#ff9142;
  --ink:#10294f; --ink-soft:#3f5f8f; --ink-faint:#6d87b3;
  --card:#ffffff; --line:#c9dcf6; --line-soft:#e2eefc;
  --shadow:0 10px 30px #0a215833; --shadow-lg:0 18px 50px #0a215844;
  --radius:18px;
}
*{box-sizing:border-box}
html{scrollbar-color:#4f9bff #0a2158}
body{margin:0;font:14px 'Noto Sans SC','Microsoft YaHei',sans-serif;color:var(--ink);
  background:
    radial-gradient(1100px 520px at 85% -8%, #ffd16633, transparent 60%),
    radial-gradient(900px 480px at -10% 28%, #ffb3d92e, transparent 60%),
    radial-gradient(700px 440px at 50% 112%, #4fe3c12e, transparent 60%),
    linear-gradient(160deg,#2b7bef 0%,#4f9bff 34%,#7fb8ff 68%,#cfe7ff 100%);
    background-attachment:fixed;min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer;transition:transform .16s,box-shadow .16s,background .16s,filter .16s;border:none}
button:hover{filter:brightness(1.05);transform:translateY(-1px)}
button:disabled{opacity:.5;cursor:default;transform:none}
button:focus-visible,a:focus-visible{outline:3px solid #ffd166;outline-offset:3px}
a{color:inherit;text-decoration:none}
::selection{background:#19b8ff59}

/* ---------- 侧栏 ---------- */
.sidebar{width:232px;position:fixed;inset:0 auto 0 0;z-index:6;
  background:linear-gradient(170deg,#0c2a6cf2,#123f8ee0 60%,#0a2158f2);
  backdrop-filter:blur(14px);border-right:1px solid #57a3ff3d;
  padding:32px 20px;display:flex;flex-direction:column;color:#dceaff;
  box-shadow:14px 0 44px #0616403d}
.brand{font-size:22px;font-weight:800;letter-spacing:1px;position:relative;padding-left:46px;color:#fff;text-shadow:0 2px 12px #4f9bff66}
.brand small{font-size:9px;display:block;letter-spacing:3.3px;margin-top:4px;font-weight:500;color:#bcd8ff}
.brand>span{font-size:36px;position:absolute;left:0;top:-9px;color:#ffd166;filter:drop-shadow(0 0 10px #ffd1668c)}
.family{display:flex;align-items:center;gap:10px;margin:32px 0 24px;padding:14px 0;border-top:1px solid #57a3ff33;border-bottom:1px solid #57a3ff33}
.avatar,.profile{background:linear-gradient(135deg,#ffd166,#ff9142);color:#5b2e00;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;font-weight:bold;box-shadow:0 4px 14px #ff914259}
.family strong{font-size:12px;color:#eaf4ff}.family small{display:block;font-size:9px;color:#bcd8ff;margin-top:5px}
.family>i{margin-left:auto;width:7px;height:7px;border-radius:50%;background:#3ff0b2;box-shadow:0 0 10px #3ff0b2}
.nav-label{font-size:10px;color:#bcdbff;letter-spacing:2px;padding-left:15px;margin-bottom:14px}
nav{display:grid;gap:8px}
nav button{text-align:left;padding:14px 15px;border-radius:12px;background:transparent;color:#a9ccf5;font-size:13px;display:flex;align-items:center;gap:13px}
nav button span{font-size:21px;width:22px}
nav button:hover{background:#ffffff14;color:#fff}
nav button.active{background:linear-gradient(105deg,#19b8ff,#2b7bef);color:#fff;box-shadow:0 8px 22px #19b8ff61,inset 0 1px 0 #ffffff40}
nav i{font-style:normal;margin-left:auto;font-size:10px;border:1px solid #57a3ff59;border-radius:5px;padding:0 5px;color:#cfe6ff}
.sidebar-bottom{margin-top:auto;padding-top:30px}
.parent-promo{background:linear-gradient(150deg,#ffffff1f,#ffffff0a);border:1px solid #57a3ff3d;border-radius:14px;padding:16px}
.parent-promo>span,.parent-promo button{color:#ffd166}
.parent-promo strong{color:#fff;font-size:12px}.parent-promo p{color:#c4ddff;font-size:10px;line-height:1.7;margin:8px 0 12px}
.parent-promo button{background:#ffffff1f;border:1px solid #ffd16659;border-radius:8px;padding:7px 12px;font-size:10px;width:100%}
.quiet,.local-note{color:#bcdbff}.local-note{font-size:9px;display:block;margin-top:14px}

/* ---------- 主区 ---------- */
main{margin-left:232px;min-height:100vh;display:flex;flex-direction:column}
header{background:linear-gradient(180deg,#ffffffd9,#ffffffad);backdrop-filter:blur(12px);border-bottom:1px solid #ffffff59;height:74px;padding:0 30px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:5}
.breadcrumb{color:var(--ink-faint);font-size:11px;letter-spacing:1px}
.breadcrumb b{color:var(--ink)}.breadcrumb span{color:#9db9dd;margin:0 6px}
.header-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.date{color:var(--ink-soft);font-size:11px}
.coin{background:linear-gradient(135deg,#fff3d6,#ffe3a1);color:#8a5410;border:1px solid #f5c85f;border-radius:999px;padding:8px 15px;font-size:12px;box-shadow:0 4px 14px #f5a62333}
.coin strong{font-size:14px}
.profile{width:33px;height:33px;font-size:13px}
.content{padding:28px 32px 24px;max-width:1680px;width:100%;margin:0 auto;flex:1}
.eyebrow{color:#eaf4ff;font-weight:700;letter-spacing:2.4px;font-size:9px;text-shadow:0 1px 6px rgba(10,33,88,.6)}
.page-heading{gap:14px;margin-bottom:22px;display:flex;align-items:center}
.page-heading>div{flex:1}
.page-heading h1{font-size:27px;letter-spacing:-.6px;color:#ffffff;text-shadow:0 2px 14px rgba(10,33,88,.55)}
.page-heading p{color:#e3eeff;text-shadow:0 1px 6px rgba(10,33,88,.45)}
.page-heading .outline{margin-left:auto}

/* ---------- 按钮 ---------- */
.primary{background:linear-gradient(110deg,#1668e8,#3b8bff);color:#fff;border-radius:12px;padding:11px 18px;font-size:12px;font-weight:600;box-shadow:0 8px 22px #1668e84d,inset 0 1px 0 #ffffff4d}
.primary:hover{box-shadow:0 12px 28px #1668e866}
.outline{border:1.5px solid #8cc2ff;color:#0e56c8;background:#ffffffcc;border-radius:12px;padding:10px 16px;font-size:12px;font-weight:600;backdrop-filter:blur(6px)}
.outline:hover{border-color:#2b7bef;background:#fff}
.quiet{background:transparent;font-size:11px}
.trial-btn{white-space:nowrap;background:linear-gradient(110deg,#f5a623,#ff9142);color:#fff;padding:12px 18px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 8px 22px #f5a6234d}

/* ---------- 卡片与分区 ---------- */
.card{background:linear-gradient(180deg,#fffffff2,#ffffffd9);border:1px solid #ffffffa6;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);backdrop-filter:blur(10px);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#19b8ff,#7c5cff,#f5a623)}
.section-title{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.section-title h2{font-size:15px;color:#0d2f66;margin:0;flex:1}
.section-title small{color:var(--ink-faint);font-weight:400;font-size:10px}
.section-title button{font-size:10px;color:#0e56c8;background:#e8f3ff;border-radius:8px;padding:6px 10px}
.notice{background:linear-gradient(110deg,#e8f3ff,#dceaff);border:1px solid #b7d6fb;color:#0e56c8;border-radius:14px;padding:13px 16px;font-size:11px;margin-bottom:16px;box-shadow:var(--shadow)}
.form-note{color:var(--ink-faint);font-size:10px;line-height:1.8}
.empty{color:var(--ink-faint);text-align:center;padding:26px;font-size:11px}

/* ---------- 首页布局 ---------- */
.home-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.bottom-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;margin-top:18px}

/* ---------- 舞台 ---------- */
.stage{position:relative;border-radius:20px;overflow:hidden;height:520px;
  border:1px solid #ffffff8c;box-shadow:var(--shadow-lg),0 0 0 4px #0a21581a;
  background:linear-gradient(180deg,#142e7a,#2b63c9 45%,#8fd0ff)}
.stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0a215859 0%,transparent 19%,transparent 90%,#ffffff26 100%)}
.stage canvas{position:absolute;inset:0;display:block;cursor:grab;touch-action:none}
.stage canvas:active{cursor:grabbing}
.stage-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;color:#eaf4ff;font-size:13px;background:#0a2158b8;z-index:4;backdrop-filter:blur(4px)}
.stage-loading small{color:#a9ccf5;font-size:10px}
.loading-spinner{width:34px;height:34px;border-radius:50%;border:3px solid #ffffff40;border-top-color:#ffd166;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage-top{position:absolute;top:14px;left:16px;right:16px;display:flex;align-items:center;gap:10px;z-index:3}
.pill{background:#0a2158a6;border:1px solid #ffffff40;color:#eaf4ff;font-size:9px;letter-spacing:1.5px;border-radius:999px;padding:6px 12px;display:flex;align-items:center;gap:7px;backdrop-filter:blur(6px)}
.pill b{color:#ffd166}
.live-dot{width:7px;height:7px;border-radius:50%;background:#3ff0b2;box-shadow:0 0 8px #3ff0b2;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.4}}
.stage-tools{margin-left:auto;display:flex;gap:8px}
.stage-tools button{width:32px;height:32px;border-radius:10px;background:#0a2158a6;border:1px solid #ffffff33;color:#eaf4ff;font-size:14px;backdrop-filter:blur(6px)}
.stage-tools button:hover{background:#1a5cc8d9}
.stage-tools button.enabled{background:linear-gradient(135deg,#19b8ff,#2b7bef);color:#fff;border-color:transparent}
.battle-hud{position:absolute;top:56px;left:16px;z-index:3;background:#0a2158b3;border:1px solid #ffffff33;border-radius:12px;padding:9px 12px;width:190px;backdrop-filter:blur(6px)}
.battle-hud span{font-size:8px;letter-spacing:2px;color:#9cc8ff}
.battle-hud>div{height:8px;background:#0a215880;border-radius:99px;margin:7px 0 5px;overflow:hidden;border:1px solid #ffffff26}
.battle-hud i{display:block;height:100%;background:linear-gradient(90deg,#3ff0b2,#19b8ff);border-radius:99px;transition:width .3s}
.battle-hud small{font-size:8px;color:#cfe6ff}
.action-caption{position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:3;background:#0a2158c4;border:1px solid #ffffff40;color:#fff;font-size:11px;border-radius:999px;padding:8px 16px;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap;backdrop-filter:blur(6px)}
.action-caption.visible{opacity:1;bottom:104px}
.stage-bottom{position:absolute;left:18px;right:18px;bottom:14px;display:flex;align-items:flex-end;gap:12px;z-index:3}
.stage-bottom>div{background:#0a2158b3;border:1px solid #ffffff2e;border-radius:12px;padding:9px 14px;backdrop-filter:blur(6px)}
.form-rank{font-size:8px;letter-spacing:2px;color:#9cc8ff;display:block}
.stage-bottom strong{color:#fff;font-size:13px}
.stage-bottom strong span{color:#9cc8ff;font-weight:500;font-size:10px}
.interaction-note{margin-left:auto;font-size:9px;color:#dceaff;text-align:right;line-height:1.7;text-shadow:0 1px 6px #0a2158}
.evolution-fx{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;z-index:5;background:radial-gradient(circle at 50% 45%,#bfe4ffc4,#0a2158e0 70%);color:#fff;text-align:center}
.evolution-fx[hidden]{display:none}
.evolution-fx span{font-size:9px;letter-spacing:4px;color:#ffd166}
.evolution-fx h2{font-size:34px;margin:6px 0;text-shadow:0 4px 24px #19b8ff}
.evolution-fx p{font-size:11px;color:#cfe6ff}
.evolution-rings{position:absolute;width:340px;height:340px;border-radius:50%;border:2px solid #9adfff66;animation:ringPulse 1.6s ease-out infinite}
@keyframes ringPulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.15);opacity:0}}

/* ---------- 技能栏 ---------- */
.skill-bar{display:flex;align-items:center;gap:14px;margin-top:14px;background:linear-gradient(110deg,#fffffff2,#e8f3ffd9);border:1px solid #ffffffa6;border-radius:16px;padding:13px 16px;box-shadow:var(--shadow)}
.skill-label span{font-size:8px;letter-spacing:2px;color:#0e56c8;font-weight:700}
.skill-label strong{display:block;font-size:11px;color:var(--ink);margin-top:3px}
.skill-buttons{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.skill-buttons button{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#1668e8,#3b8bff);color:#fff;border-radius:12px;padding:9px 12px;font-size:11px;box-shadow:0 6px 16px #1668e83d}
.skill-buttons button kbd{background:#ffffff2e;border:1px solid #ffffff59;border-radius:6px;font-size:9px;padding:2px 6px;font-family:inherit}
.skill-buttons button span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}
.skill-buttons button small{font-size:8px;opacity:.85}
.skill-buttons .fire-skill{background:linear-gradient(135deg,#ff9142,#ff5722);box-shadow:0 6px 16px #ff572233}
.skill-buttons .energy-skill{background:linear-gradient(135deg,#19b8ff,#7c5cff);box-shadow:0 6px 16px #19b8ff3d}
.skill-buttons button:disabled{filter:grayscale(.6)}
/* ---------- v9：属性化技能按钮 ----------
   每个攻击技能按其属性着色（--el/--el2/--el3 由 JS 依据 skills.js 的 ELEMENTS 注入），
   右上角的小圆点 = 属性徽章，让"这条是火属性 / 冰属性"一眼可辨。 */
.skill-label small{display:block;font-size:8px;color:#4a6a90;margin-top:3px;letter-spacing:.2px}
.skill-buttons .sk-btn{position:relative;background:linear-gradient(135deg,var(--el),var(--el3));box-shadow:0 6px 16px color-mix(in srgb,var(--el) 33%,transparent);padding-right:20px}
.skill-buttons .sk-btn::after{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(160deg,#ffffff2e,transparent 46%);pointer-events:none}
.skill-buttons .sk-btn .el-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--el2);box-shadow:0 0 7px var(--el2),0 0 0 1.5px #ffffff5c}
.skill-buttons .sk-btn.sk-universal{background:linear-gradient(135deg,#5a6b82,#8b9bb0);box-shadow:0 6px 16px #5a6b8233;padding-right:12px}
.skill-buttons .sk-btn.sk-universal::after{display:none}
.skill-buttons .sk-btn.sk-universal .el-dot{display:none}
.skill-buttons .sk-btn small{opacity:.92}
/* v9 布局修复：每个角色现在有 3 个攻击技能 + 3 个通用动作 = 6 个按钮，
   原样式下 flex 容器会把按钮压扁，技能名被挤成竖排单字。
   对策：按钮内容不换行 + 允许 flex 换行成多排 + 缩窄时保留最小可读宽度。 */
.skill-buttons .sk-btn{flex:0 0 auto;white-space:nowrap}
.skill-buttons .sk-btn span{white-space:nowrap}
.skill-buttons .sk-btn small{white-space:nowrap}
/* 窄屏（≤1300px）下 .skill-buttons 会变成 justify-content:space-between + button flex:1，
   同样需要放开换行，否则 6 个按钮横向挤压导致文字竖排 */
@media(max-width:1300px){.skill-buttons button{flex:0 0 auto}.skill-buttons{justify-content:flex-start}}
@media(min-width:1600px){.skill-buttons .sk-btn{flex:1 1 auto}}

/* ---------- 照顾栏 ---------- */
.care-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.care-btn{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#fffffff2,#eaf4ffd9);border:1px solid #ffffffa6;border-radius:16px;padding:13px;text-align:left;box-shadow:var(--shadow)}
.care-btn:hover{border-color:#8cc2ff}
.care-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:linear-gradient(135deg,#e8f3ff,#dceaff);flex-shrink:0}
.care-btn strong{display:block;font-size:12px;color:var(--ink)}
.care-btn small{font-size:9px;color:var(--ink-faint)}
.daily-card{margin-top:14px;display:flex;align-items:center;gap:14px;background:linear-gradient(110deg,#fff3d6,#ffe9b8);border:1px solid #f5c85f;border-radius:16px;padding:14px 16px;box-shadow:0 8px 22px #f5a6232e}
.daily-card .sun{font-size:26px;filter:drop-shadow(0 2px 6px #f5a62366)}
.daily-card strong{font-size:12px;color:#7a4a08;display:block}
.daily-card p{font-size:10px;color:#a06a1c;margin:4px 0 0}
.daily-card .outline{margin-left:auto;border-color:#f5c85f;color:#8a5410;background:#ffffffb3;white-space:nowrap}

/* ---------- 右侧统计 ---------- */
.stats{background:linear-gradient(180deg,#0c2a6cf2,#123f8ee6);border:1px solid #57a3ff3d;border-radius:var(--radius);padding:20px;color:#dceaff;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.stats::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#19b8ff,#ffd166,#ff6b81)}
.stats .section-title h2{color:#fff}
.stats .section-title button{background:#ffffff1f;color:#cfe6ff}
.pet-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.pet-avatar{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#19b8ff55,#7c5cff55);border:1px solid #ffffff33;display:grid;place-items:center;font-size:26px}
.pet-head h3{margin:0;font-size:15px;color:#fff}
.pet-head small{font-size:9px;color:#9cc8ff}
.level-tag{margin-left:auto;background:linear-gradient(135deg,#ffd166,#ff9142);color:#5b2e00;font-size:10px;font-weight:700;border-radius:999px;padding:5px 11px}
.xp{margin-bottom:16px}
.xp-label{display:flex;justify-content:space-between;font-size:10px;color:#c4ddff;margin-bottom:6px}
.track{height:9px;background:#0a215880;border-radius:99px;overflow:hidden;border:1px solid #ffffff1f}
.track>div{height:100%;border-radius:99px;background:linear-gradient(90deg,#19b8ff,#3ff0b2);transition:width .4s}
.xp p{font-size:9px;color:#9cc8ff;margin:8px 0 0}
.metric{display:flex;align-items:center;gap:10px;margin:13px 0}
.metric span{font-size:10px;color:#cfe6ff;width:52px;flex-shrink:0}
.metric .track{flex:1}
.metric b{font-size:10px;color:#fff;width:26px;text-align:right}
.health-note{margin-top:14px;font-size:10px;color:#ffd9e0;background:#ff6b8126;border:1px solid #ff6b8140;border-radius:10px;padding:9px 11px}

/* ---------- 任务 ---------- */
.tasks-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tabs{display:flex;gap:6px;background:#ffffffb3;border:1px solid #ffffffa6;border-radius:12px;padding:5px;box-shadow:var(--shadow)}
.tabs button{border-radius:8px;padding:7px 13px;font-size:11px;background:transparent;color:var(--ink-soft)}
.tabs button.active{background:linear-gradient(110deg,#1668e8,#3b8bff);color:#fff;box-shadow:0 4px 12px #1668e840}
.task-full{margin-top:4px}
.task-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px dashed var(--line)}
.task-row:last-child{border-bottom:none}
.task-icon{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#e8f3ff,#dceaff);display:grid;place-items:center;font-size:15px;flex-shrink:0}
.task-info{flex:1;min-width:0}
.task-info strong{display:block;font-size:12px;color:var(--ink)}
.task-info small{font-size:9px;color:var(--ink-faint)}
.task-reward{font-size:11px;font-weight:700;color:#8a5410;background:linear-gradient(135deg,#fff3d6,#ffe3a1);border:1px solid #f5c85f;border-radius:999px;padding:5px 11px;white-space:nowrap}
.task-action{background:linear-gradient(110deg,#1668e8,#3b8bff);color:#fff;font-size:10px;border-radius:9px;padding:8px 13px;white-space:nowrap}
.task-action:disabled{background:#e2eefc;color:var(--ink-faint)}

/* ---------- 进化预览 ---------- */
.evo-preview{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.evo-node{background:#ffffffe0;border:1.5px solid var(--line);border-radius:14px;padding:12px 6px;display:grid;justify-items:center;gap:6px;box-shadow:var(--shadow)}
.evo-node .evo-orb{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:linear-gradient(135deg,#e2eefc,#c9dcf6);color:var(--ink-faint);border:2px solid #fff}
.evo-node strong{font-size:10px;color:var(--ink)}
.evo-node small{font-size:8px;color:var(--ink-faint)}
.evo-node.unlocked{border-color:#8cc2ff;background:linear-gradient(180deg,#fff,#eaf4ff)}
.evo-node.unlocked .evo-orb{background:linear-gradient(135deg,#19b8ff,#7c5cff);color:#fff;box-shadow:0 4px 14px #19b8ff59}
.evo-hint{font-size:9px;color:var(--ink-faint);margin-top:10px}
.evo-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(110deg,#0c2a6cf2,#123f8ee0);border:1px solid #57a3ff3d;border-radius:var(--radius);padding:18px 22px;color:#fff;margin-bottom:18px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.evo-banner::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#19b8ff,#ffd166,#ff6b81)}
.evo-banner h2{margin:0;font-size:18px}
.evo-banner p{margin:5px 0 0;font-size:10px;color:#9cc8ff}
.evo-banner .outline{margin-left:auto;border-color:#8cc2ff;color:#fff;background:#ffffff1f;white-space:nowrap}

/* ---------- 领养中心 ---------- */
.pet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pet-choice{position:relative;text-align:left;background:linear-gradient(180deg,#fffffff2,#eaf4ffd9);border:1.5px solid #ffffffa6;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow);overflow:hidden;display:grid;gap:8px}
.pet-choice::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,#19b8ff,#7c5cff)}
.pet-choice:hover{border-color:#8cc2ff;transform:translateY(-3px)}
.pet-choice.selected{border-color:#19b8ff;box-shadow:0 0 0 3px #19b8ff3d,var(--shadow)}
.selected-badge{position:absolute;top:12px;right:12px;z-index:3;background:linear-gradient(110deg,#22c58b,#3ff0b2);color:#04352a;font-size:8px;font-weight:700;border-radius:999px;padding:4px 9px;box-shadow:0 4px 12px #22c58b4d}
.specimen-preview{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:radial-gradient(circle at 50% 68%,#8cc2ff59,transparent 62%),radial-gradient(ellipse at 50% 40%,#2b7bef,#0e2f78 78%)}
.specimen-code{position:absolute;top:8px;left:8px;z-index:2;font-size:7px;letter-spacing:2px;background:#0a2158b3;color:#cfe6ff;padding:4px 7px;border-radius:5px;border:1px solid #ffffff33}
.atlas-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;
  filter:drop-shadow(0 4px 10px rgba(4,16,44,.45))}
.specimen-fallback{display:none}
.pet-choice h3{margin:0;font-size:13px;color:var(--ink)}
.pet-choice p{margin:0;font-size:9px;color:var(--ink-soft);line-height:1.7}
.pet-choice small{font-size:9px;color:#0e56c8;font-weight:600}
.upload-card{border-style:dashed;border-color:#8cc2ff;background:linear-gradient(180deg,#e8f3ffb3,#dceaff80);display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;color:var(--ink-soft)}
.upload-card .animal{font-size:30px;color:#2b7bef}
.upload-card h3{margin:0;font-size:13px}
.upload-card p{font-size:9px;line-height:1.7}

/* ---------- 进化图鉴 ---------- */
.evolution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.big-animal{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;
  background:radial-gradient(circle at 50% 70%,#8cc2ff59,transparent 60%),radial-gradient(ellipse at 50% 38%,#2b7bef,#0c2a6c 80%)}
/* 独立立绘：按该阶实际 bbox 裁切好的等比图，contain 保证不裁切、不出框。
   ⚠️ 不要再给 .big-animal 加 transform:scale() —— transform 不改变布局盒尺寸，
   只放大绘制结果，会溢出到下方的阶段名/Lv/描述文字上（把文字压住）。 */
.evo-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:5%;filter:drop-shadow(0 6px 14px rgba(4,16,44,.55))}
.big-animal>b{position:absolute;left:10px;top:8px;font-size:11px;color:#cfe6ff;z-index:2;text-shadow:0 1px 4px #0a2158}
.evolution-grid .card{padding:16px;display:grid;gap:6px;align-content:start}
.evolution-grid h3{margin:0;font-size:13px;color:var(--ink)}
.evolution-grid small{font-size:9px;color:#0e56c8;font-weight:600}
.evolution-grid p{font-size:9px;color:var(--ink-soft);line-height:1.7;min-height:32px;margin:0}
.evolution-grid button{margin-top:4px;font-size:10px;padding:9px 12px}

/* ---------- 公园 ---------- */
.park-panel{display:flex;align-items:center;gap:14px;margin-top:14px}
.park-panel p{flex:1;font-size:10px;color:var(--ink-soft);line-height:1.8;margin:0}
.park-panel .primary{white-space:nowrap}

/* ---------- 弹窗/表单 ---------- */
dialog{border:none;border-radius:20px;padding:0;max-width:560px;width:calc(100% - 40px);background:linear-gradient(180deg,#fff,#eaf4ff);box-shadow:0 30px 80px #0a215866;color:var(--ink)}
dialog::backdrop{background:#0a2158a6;backdrop-filter:blur(4px)}
.modal-head{display:flex;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.modal-head h2{margin:0;font-size:15px;color:#0d2f66;flex:1}
.modal-head button{width:32px;height:32px;border-radius:10px;background:#e8f3ff;color:var(--ink-soft);font-size:16px}
dialog .speech{display:none}
#modal-body{padding:20px 22px;max-height:70vh;overflow:auto}
.form-field{display:grid;gap:6px;font-size:10px;color:var(--ink-soft);margin-bottom:12px}
.form-field input,.form-field select{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink);background:#fff}
.form-field input:focus{outline:none;border-color:#2b7bef;box-shadow:0 0 0 3px #2b7bef26}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.parent-header{background:linear-gradient(110deg,#0c2a6cf2,#123f8ee0);color:#fff;border-radius:14px;padding:16px;margin-bottom:14px}
.parent-header strong{color:#ffd166}
.parent-header p{font-size:10px;color:#9cc8ff;margin:6px 0 0;line-height:1.7}
.pending-card{background:#fff8e8;border:1px solid #f5c85f;border-radius:14px;padding:14px;margin-bottom:12px}
.pending-card .task-info small{color:#a06a1c}
.settings-list{display:grid;gap:10px}
.settings-list .form-field{margin:0}

/* ---------- 其他 ---------- */
#toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);background:#0c2a6cf2;color:#fff;font-size:12px;padding:11px 20px;border-radius:999px;opacity:0;transition:.3s;z-index:20;border:1px solid #57a3ff59;box-shadow:var(--shadow-lg);backdrop-filter:blur(8px);pointer-events:none}
.custom-pet{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
footer{padding:18px 32px;font-size:9px;color:#15458c;display:flex;gap:14px;letter-spacing:1px;opacity:.9;text-shadow:0 1px 0 #ffffffaa}
footer span:first-child{font-weight:700;color:#b9810a}
footer span:first-child{font-weight:700}

/* ---------- 响应式 ---------- */
@media(min-width:1600px){.stage{height:600px}.home-grid{grid-template-columns:1fr 330px}.metric{margin:16px 0}.stats{padding:24px}.skill-buttons button{padding:10px 14px}.specimen-preview{height:180px}}
@media(min-width:1500px){.stage{height:520px}}
@media(max-width:1300px){.skill-label{display:none}.skill-buttons{width:100%;justify-content:space-between}.skill-buttons button{flex:1;justify-content:center;padding:9px}.stage{height:480px}.page-heading h1{font-size:24px}.content{padding:24px}.home-grid{grid-template-columns:minmax(340px,1fr) 280px;gap:14px}.metric{margin:12px 0}.action-caption{display:none}.action-caption.visible{display:block}.pet-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1180px){.sidebar{width:205px;padding:30px 17px}main{margin-left:205px}.content{padding:22px}.home-grid{grid-template-columns:minmax(300px,1fr) 260px;gap:14px}.care-btn{gap:7px;padding:12px 8px}.care-icon{width:31px;height:31px;font-size:17px}h1{font-size:22px}.stats{padding:17px}.pet-grid{grid-template-columns:repeat(2,1fr)}.evolution-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1100px){.sidebar{width:76px;padding:28px 12px}main{margin-left:76px}.brand{font-size:0;padding:0;height:40px}.brand small,.family,.nav-label,nav i,.sidebar-bottom{display:none}.brand>span{left:8px}.sidebar nav{margin-top:35px}nav button{font-size:0;padding:14px 12px}nav button span{font-size:23px}.home-grid{grid-template-columns:1fr 250px}.page-heading .outline{display:none}.trial-btn{font-size:10px;padding:10px 13px}.page-heading h1{font-size:22px}.stage-bottom .interaction-note{font-size:8px}.care-btn{padding:12px 8px}.skill-buttons button{padding:8px 6px;gap:5px}.skill-buttons span{font-size:10px}.skill-buttons small{font-size:7px}.skill-buttons kbd{width:19px;height:23px;font-size:9px}}
@media(max-width:950px){.date{display:none}.bottom-grid{gap:14px}.care-bar{grid-template-columns:repeat(2,1fr)}header{padding:0 22px}.content{padding:20px 18px}}
@media(max-width:800px){.content{padding:18px 14px}.home-grid{grid-template-columns:1fr}.stats{display:none}.bottom-grid{grid-template-columns:1fr}.stage{height:470px}.skill-label{display:block}.skill-buttons{width:auto}.pet-grid{grid-template-columns:repeat(2,1fr)}.care-bar{grid-template-columns:repeat(4,1fr)}.care-btn{display:flex;padding:12px 10px}.care-icon{margin:0}.page-heading h1{font-size:21px}.page-heading p{font-size:10px}.evolution-grid{grid-template-columns:repeat(2,1fr)}.evo-preview{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.sidebar{inset:auto 0 0;width:100%;height:65px;padding:0;z-index:8;border-right:0;border-top:1px solid #57a3ff3d;flex-direction:row}.brand{display:none}.sidebar nav{display:flex;justify-content:space-around;margin:0;height:65px;gap:0;width:100%}nav button{flex:1;display:flex;flex-direction:column;gap:0;font-size:8px;padding:7px 0;border-radius:0}nav button span{font-size:22px}main{margin-left:0;padding-bottom:65px}header{height:60px;padding:0 16px}.content{padding:18px 14px}h1{font-size:19px}.eyebrow{font-size:8px}.header-right{gap:8px}.coin{padding:7px 10px;font-size:11px}.home-grid{grid-template-columns:1fr}.stage{height:400px}.bottom-grid{grid-template-columns:1fr}.care-bar{grid-template-columns:repeat(4,1fr);gap:7px}.care-btn{display:block;text-align:center;padding:12px 4px}.care-icon{margin:0 auto 8px}.care-btn strong{font-size:11px}.care-btn small{font-size:8px}.daily-card{padding:12px}.daily-card .outline{font-size:9px}.evolution-grid .card{padding:12px}.stage-loading{z-index:4}.evolution-fx h2{font-size:26px}.battle-hud{width:150px}.stage-bottom{left:12px;right:12px;bottom:10px}.interaction-note{display:none}.task-reward{display:none}.modal-actions{flex-direction:column}.modal-actions button{width:100%}}