/* ═══════════════════════════════════════════
   组件样式 v2.0 - 增强微交互
   ═══════════════════════════════════════════ */

/* ── 按钮 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:25px;cursor:pointer;font-size:16px;font-weight:600;padding:10px 20px;transition:all .25s cubic-bezier(.68,-.2,.27,1.3);letter-spacing:.5px;white-space:nowrap;user-select:none;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);background-size:200% 200%;opacity:0;transition:opacity .3s}
.btn:hover::after{opacity:1;animation:shimmer .8s ease}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 8px 25px rgba(91,79,207,.2)}
.btn:active{transform:translateY(0) scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:18px}
.btn-xl{padding:16px 36px;font-size:22px;border-radius:30px}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(135deg,#5DADE2,#4a9ed8);color:#fff;box-shadow:0 3px 12px rgba(93,173,226,.3)}
.btn-primary:hover{box-shadow:0 6px 20px rgba(93,173,226,.45)}
.btn-success{background:linear-gradient(135deg,#58D68D,#3cb371);color:#fff;box-shadow:0 3px 12px rgba(88,214,141,.3)}
.btn-warning{background:linear-gradient(135deg,#FFB347,#f59e0b);color:#fff;box-shadow:0 3px 12px rgba(255,179,71,.3)}
.btn-danger{background:linear-gradient(135deg,#FF6B6B,#e74c3c);color:#fff;box-shadow:0 3px 12px rgba(255,107,107,.3)}
.btn-purple{background:linear-gradient(135deg,#B07CD8,#9333ea);color:#fff;box-shadow:0 3px 12px rgba(176,124,216,.3)}
.btn-outline{background:var(--card);border:2px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);background:rgba(91,79,207,.04)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{background:var(--bg-alt);transform:none;box-shadow:none}

/* ── 表单 ── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;font-weight:700;color:var(--text-secondary);margin-bottom:4px;letter-spacing:.3px}
.form-input,.form-select,.form-textarea{width:100%;padding:11px 16px;border:2px solid var(--border);border-radius:12px;font-size:15px;background:var(--card);color:var(--text);transition:all .2s ease}
.form-input:focus,.form-select:focus{border-color:var(--accent-blue);box-shadow:0 0 0 4px rgba(93,173,226,.12);outline:none}
.form-input:read-only,.form-input[readonly]{background:var(--bg-alt);color:var(--dim);cursor:default;border-style:dashed}
.form-input::placeholder{color:var(--dim);opacity:.6}

/* ── 网格 ── */
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid-5{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
@media(max-width:500px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}

/* ── 表格 ── */
.data-table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden}
.data-table th,.data-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}
.data-table th{background:linear-gradient(180deg,var(--bg-alt),#f8f6ff);font-weight:700;color:var(--text-secondary);white-space:nowrap;position:sticky;top:0;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.data-table tr{transition:background .15s}
.data-table tr:hover td{background:rgba(91,79,207,.04)}
.data-table .actions{display:flex;gap:6px;flex-wrap:wrap}

/* ── 徽章 ── */
.badge{display:inline-block;padding:3px 10px;border-radius:14px;font-size:11px;font-weight:700;letter-spacing:.3px}
.badge-blue{background:rgba(93,173,226,.15);color:var(--accent-blue)}
.badge-green{background:rgba(88,214,141,.15);color:#2a8a5e}
.badge-purple{background:rgba(176,124,216,.15);color:var(--accent-purple)}
.badge-pink{background:rgba(255,107,157,.12);color:var(--secondary)}
.badge-orange{background:rgba(255,179,71,.15);color:#d97706}
.badge-gold{background:rgba(240,192,64,.2);color:#b8860b}
.badge-stage{padding:5px 16px;border-radius:20px;font-size:13px;font-weight:700;background:linear-gradient(135deg,var(--accent-purple),var(--secondary));color:#fff;animation:petFloat 2.5s ease-in-out infinite;box-shadow:0 2px 10px rgba(255,107,157,.25)}

/* ── Tag选择器 ── */
.chip{display:inline-block;padding:7px 16px;border-radius:18px;background:var(--bg-alt);margin:3px;cursor:pointer;font-size:13px;font-weight:600;border:2px solid transparent;transition:all .2s ease;user-select:none}
.chip:hover{background:rgba(91,79,207,.08);transform:translateY(-1px)}
.chip.selected{background:var(--secondary);color:#fff;border-color:var(--secondary);box-shadow:0 2px 8px rgba(255,107,157,.3)}
.chip.sm{padding:4px 10px;font-size:11px;margin:2px}

/* ── Tab ── */
.tab-bar{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.tab{padding:9px 20px;border-radius:22px;cursor:pointer;font-size:14px;font-weight:700;background:var(--bg-alt);color:var(--text-secondary);transition:all .2s ease}
.tab:hover{background:rgba(91,79,207,.08)}
.tab.active{background:linear-gradient(135deg,var(--accent-blue),#3b8ec4);color:#fff;box-shadow:0 3px 12px rgba(93,173,226,.35)}

/* ── HP条 ── */
.hp-bar{width:100%;max-width:300px;height:26px;background:#eee;border-radius:14px;overflow:hidden;border:2px solid var(--border);position:relative}
.hp-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,transparent 50%,rgba(0,0,0,.08) 100%);pointer-events:none;border-radius:12px}
.hp-fill{height:100%;transition:width .5s cubic-bezier(.4,0,.2,1);border-radius:12px;position:relative}
.hp-fill.hatch{background:linear-gradient(90deg,#FF6B6B,#FFB347,#f59e0b)}
.hp-fill.growth{background:linear-gradient(90deg,#B07CD8,#5DADE2,#58D68D)}
.hp-fill.hp{background:linear-gradient(90deg,#22c55e,#4ade80,#a3e635)}
.hp-fill.hp-mid{background:linear-gradient(90deg,#f59e0b,#fbbf24,#fde68a)}
.hp-fill.hp-low{background:linear-gradient(90deg,#ef4444,#f87171,#fb923c);animation:pulse .8s infinite}

/* ── 空状态 ── */
.empty-state{text-align:center;padding:48px 24px}
.empty-state .icon{font-size:72px;margin-bottom:12px;opacity:.7;animation:petFloat 3s ease-in-out infinite}
.empty-state p{font-size:16px;color:var(--dim)}
.empty-state .action{margin-top:20px}

/* ── 模态弹窗 ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:900;animation:fadeIn .2s ease;padding:24px;backdrop-filter:blur(2px)}
.modal-box{background:var(--card);border-radius:24px;padding:32px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.2);animation:modalSlideIn .35s cubic-bezier(.68,-.2,.27,1.3)}
.modal-box h3{font-size:20px;margin-bottom:20px;display:flex;align-items:center;gap:8px}

/* ── Toast ── */
.toast-container{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:14px 28px;border-radius:20px;color:#fff;font-size:16px;font-weight:700;text-align:center;min-width:200px;animation:toastIn .5s cubic-bezier(.68,-.2,.27,1.3);pointer-events:auto;box-shadow:0 8px 24px rgba(0,0,0,.18);backdrop-filter:blur(10px)}
.toast-ok{background:linear-gradient(135deg,#58D68D,#3cb371)}
.toast-err{background:linear-gradient(135deg,#FF6B6B,#e74c3c)}
.toast-wrn{background:linear-gradient(135deg,#FFB347,#f59e0b)}
.toast-info{background:linear-gradient(135deg,#5DADE2,#3b8ec4)}

/* ── 加载 ── */
.loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.94);display:none;z-index:1100;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.loading-overlay.show{display:flex}
.loading-spinner{font-size:52px;animation:pulse 1s infinite}
.loading-text{margin-top:16px;font-size:16px;color:var(--dim);font-weight:600}
.loading-bar-wrap{width:220px;height:6px;background:#eee;border-radius:4px;margin-top:16px;overflow:hidden}
.loading-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--primary),var(--accent-blue));transition:width .3s;border-radius:4px}

/* ── 确认对话框 ── */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:900;animation:fadeIn .15s ease}
.confirm-box{background:var(--card);border-radius:24px;padding:32px;max-width:380px;width:90%;text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.2);animation:modalSlideIn .35s cubic-bezier(.68,-.2,.27,1.3)}
.confirm-box .confirm-icon{font-size:56px;margin-bottom:12px}
.confirm-box .confirm-text{font-size:17px;margin-bottom:24px;color:var(--text);line-height:1.5}
.confirm-box .confirm-actions{display:flex;gap:12px;justify-content:center}

/* ── 分隔线 ── */
.divider{height:1px;background:var(--divider);margin:16px 0}

/* ── 工具类 ── */
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-center{align-items:center;justify-content:center}.flex-between{justify-content:space-between}
.gap-xs{gap:4px}.gap-sm{gap:8px}.gap{gap:12px}.gap-lg{gap:20px}
.text-center{text-align:center}.text-dim{color:var(--dim)}.text-sm{font-size:13px}.text-xs{font-size:11px}.text-lg{font-size:22px}.text-bold{font-weight:700}
.mt{margin-top:12px}.mt-lg{margin-top:24px}.mb{margin-bottom:12px}
.hidden{display:none!important}


/* ── 图标图片（模板图片图标） ── */
.icon-img{vertical-align:middle;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.icon-emoji{line-height:1.2;display:inline-block}
/* ── 用户头像 ── */
.avatar-img{border-radius:50%;object-fit:cover;border:2px solid var(--accent);background:#fff}
.avatar-emoji{width:52px;height:52px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,179,71,.25),rgba(255,107,157,.2));line-height:1}
.pet-scene{position:relative;display:inline-block;border-radius:16px;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(255,215,0,.14) 0%,rgba(176,124,216,.10) 55%,rgba(93,173,226,.06) 100%)}
.pet-scene-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.pet-scene-pet{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:56px}
.pet-scene-pet.float{animation:petFloat 3s ease-in-out infinite}
.pet-scene-pet .icon-img,.pet-scene-pet .icon-emoji{filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.pet-scene::after{content:'';position:absolute;inset:-12px;background:radial-gradient(circle at 50% 40%,rgba(255,215,0,.18) 0%,transparent 70%);pointer-events:none;opacity:0;transition:opacity .5s}
.pet-scene:hover::after{opacity:1}
.dressup-pet .layer.base img{max-width:120px;max-height:120px}
.entity-sprite img{max-width:80px;max-height:80px}