/* ===== handbook.css - 图鉴页面专属样式 ===== */
/* 包含: 技能图鉴、跟宠图鉴、资质图鉴、羁绊图鉴、天赋图鉴、
         进化图鉴、食物图鉴、装备图鉴、无尽之海航线图、
         艾芙海姆捕捉位置、数据对比、筛选排序、导航标签 */

/* --- 跟宠技能图鉴页面（header、搜索、tabs、grid、skill-card） --- */
/* ===== 跟宠技能图鉴页面 ===== */
.handbook-body {
    background: var(--bg-gradient-subtle);
    min-height: 100vh;
}

.handbook-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    text-align: center; /* 使 inline-flex 子元素（导航栏）水平居中 */
}

.handbook-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 10px;
}

.handbook-stat {
    font-size: 0.85em;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.12);
    padding: 4px 14px;
    border-radius: 12px;
}

.handbook-search-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.handbook-search-input {
    width: 100%;
    max-width: 420px;
    padding: 12px 22px;
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 0 0 2px #e5e7eb;
    border-radius: 30px;
    font-size: 0.9em;
    background: rgba(255,255,255,0.85);
    transition: all 0.3s ease;
    outline: none;
    color: #333;
    backdrop-filter: blur(4px);
}

.handbook-search-input:focus {
    box-shadow: 0 0 0 2px var(--color-primary-light), 0 0 0 4px var(--shadow-primary-subtle), 0 4px 16px var(--shadow-primary-subtle);
    background: rgba(255,255,255,1);
}

.handbook-search-input::placeholder {
    color: #bbb;
}

.handbook-tabs {
    justify-content: center;
}

.handbook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
}

.handbook-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #bbb;
}

.handbook-empty svg {
    fill: #ddd;
    margin-bottom: 12px;
}

.handbook-empty p {
    font-size: 1em;
    color: #aaa;
}

#section-pets,
#section-talents,
#section-skills,
#section-fetters {
    text-align: left;
}

/* 技能卡片 */
.skill-card {
    background: white;
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05), 0 0 0 1px #eee;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1), 0 0 0 1px #d0d5f0;
}

.skill-card.skill-unknown {
    opacity: 0.6;
}

.skill-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f2f5;
}

.skill-icon-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.skill-icon-img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.skill-icon-placeholder {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    font-weight: 700;
}

.skill-header-info {
    flex: 1;
    min-width: 0;
}

.skill-name {
    font-size: 1.05em;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.skill-element-tag {
    font-size: 0.7em;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.skill-damage-tag {
    font-size: 0.7em;
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.skill-damage-tag.damage-phys {
    background: #fff3e0;
    color: #e65100;
}

.skill-damage-tag.damage-magic {
    background: #e8eaf6;
    color: #3f51b5;
}

.skill-card-body {
    padding: 14px 18px;
    flex: 1;
}

.skill-desc-item {
    margin-bottom: 10px;
}

.skill-desc-item:last-child {
    margin-bottom: 0;
}

.skill-desc-label {
    font-size: 0.75em;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.skill-desc-text {
    font-size: 0.85em;
    color: #555;
    line-height: 1.6;
}

.skill-desc-parsed {
    color: #333;
    font-weight: 500;
}

.skill-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-top: 1px solid #f5f5f5;
    background: #fafafa;
}

.skill-cooldown {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8em;
    color: #888;
}

.skill-cooldown svg {
    fill: #aaa;
}

.skill-id-tag {
    font-size: 0.7em;
    color: #ccc;
    font-family: monospace;
}

/* 技能数值高亮 - 特殊字体标注 */
.skill-num {
    display: inline-block;
    font-weight: 800;
    font-family: 'Courier New', 'Consolas', 'Monaco', monospace;
    color: var(--color-primary);
    background: linear-gradient(135deg, rgba(138, 196, 226, 0.12), rgba(181, 219, 229, 0.08));
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.92em;
    letter-spacing: 0.2px;
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 0 0 1px var(--border-primary-light);
    line-height: 1.5;
}

.skill-desc-parsed .skill-num {
    background: linear-gradient(135deg, rgba(181, 219, 229, 0.12), rgba(138, 196, 226, 0.08));
    border-color: var(--border-primary-light);
    color: var(--color-primary-dark);
}

.skill-card-footer .skill-num {
    background: transparent;
    border: none;
    padding: 0 2px;
    color: var(--color-primary);
    font-size: 0.95em;
}

/* 技能伤害类型高亮 */
.skill-dmgtype {
    display: inline-block;
    font-weight: 700;
    font-family: 'ResourceHanRoundedCN', sans-serif;
    color: #d6336c;
    background: linear-gradient(135deg, rgba(214, 51, 108, 0.10), rgba(214, 51, 108, 0.04));
    padding: 0 5px;
    border-radius: 4px;
    font-size: 0.93em;
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 0 0 1px rgba(214, 51, 108, 0.18);
    line-height: 1.5;
}

.skill-desc-parsed .skill-dmgtype {
    color: #e65100;
    background: linear-gradient(135deg, rgba(230, 81, 0, 0.10), rgba(230, 81, 0, 0.04));
    border-color: rgba(230, 81, 0, 0.18);
}

/* 合并高亮 - 数值与伤害类型在同一背景框内 */
.skill-num-dmg {
    display: inline-block;
    font-weight: 800;
    font-family: 'Courier New', 'Consolas', monospace, 'ResourceHanRoundedCN';
    background: linear-gradient(135deg, rgba(138, 196, 226, 0.10) 0%, rgba(214, 51, 108, 0.07) 100%);
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.92em;
    letter-spacing: 0.2px;
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 0 0 1px var(--border-primary);
    line-height: 1.5;
    color: var(--text-on-light-bg);
}

.skill-desc-parsed .skill-num-dmg {
    background: linear-gradient(135deg, rgba(181, 219, 229, 0.10) 0%, rgba(230, 81, 0, 0.06) 100%);
    border-color: var(--border-primary-light);
    color: var(--color-primary-dark);
}

.skill-card-footer .skill-num-dmg {
    background: transparent;
    border: none;
    padding: 0 2px;
    color: var(--color-primary);
    font-size: 0.95em;
}

@media (max-width: 768px) {
    .handbook-container {
        padding: 20px 12px;
    }

    .handbook-grid {
        grid-template-columns: 1fr;
    }

    .skill-card-header {
        padding: 12px 14px;
        gap: 10px;
    }

    .skill-card-body {
        padding: 10px 14px;
    }

    .skill-card-footer {
        padding: 8px 14px;
    }
}

/* --- 破晓之路图鉴 - 二级导航标签 --- */
/* ===== 破晓之路图鉴 - 二级导航标签 (滑块动画风格) ===== */
.handbook-sub-tabs {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 14px;
    padding: 5px;
    box-shadow:
        0 2px 12px rgba(90, 154, 184, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 0 0 1.5px var(--border-primary-light);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: hidden;
}

.handbook-sub-tab {
    position: relative;
    flex: 1 1 0%;
    min-width: 0;
    padding: 11px 12px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
    border-radius: 10px;
    z-index: 10;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    white-space: nowrap;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
}

/* 滑块动画指示条 */
.handbook-sub-tabs .tab-animation {
    position: absolute;
    height: calc(100% - 10px);
    top: 5px;
    background: var(--gradient-primary);
    border-radius: 10px;
    z-index: 1;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 16px var(--shadow-primary),
        0 2px 6px rgba(90, 154, 184, 0.18);
}

/* 激活状态 / 悬停状态文字颜色 */
.handbook-sub-tab.active,
.handbook-sub-tab:hover {
    color: var(--text-on-gradient);
}

/* 抵消父级的 :active 缩放效果 */
.handbook-sub-tab:active {
    transform: none !important;
    opacity: 1 !important;
}


/* --- 破晓之路图鉴 - 跟宠图鉴 --- */
/* ===== 破晓之路图鉴 - 跟宠图鉴 ===== */
.handbook-pet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.handbook-pet-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px 12px 16px;
    text-align: center;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05), 0 0 0 2px transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    overflow: hidden;
}

.handbook-pet-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px var(--shadow-primary-subtle), 0 0 0 2px var(--border-primary-light);
}

.handbook-pet-card:active {
    transform: scale(0.96);
}

.h-pet-star {
    font-size: 0.85em;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.h-pet-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 8px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-pet-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h-pet-name {
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.h-pet-element {
    display: inline-block;
    font-size: 0.75em;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 500;
}


/* --- 破晓之路图鉴 - 跟宠资质图鉴 --- */
/* ===== 破晓之路图鉴 - 跟宠资质图鉴 ===== */
.handbook-talent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.handbook-talent-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 圆角边框修复：确保边框完整闭合，内容不溢出 */
    overflow: hidden;
}

.handbook-talent-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.h-talent-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f2f5;
}

.h-talent-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.h-talent-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.h-talent-info {
    flex: 1;
}

.h-talent-name {
    font-size: 1.05em;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.h-talent-elem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75em;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 500;
    flex-wrap: wrap;
}

.h-talent-trait {
    font-size: 0.9em;
    font-weight: 500;
    color: inherit;
    opacity: 0.9;
    white-space: nowrap;
    background: rgba(255,255,255,0.25);
    padding: 0 5px;
    border-radius: 4px;
}

.h-talent-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.h-talent-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.h-talent-stat-label {
    font-size: 0.78em;
    color: #888;
    min-width: 24px;
    font-weight: 500;
}

.h-talent-stat-val {
    font-size: 0.85em;
    font-weight: 700;
    color: #444;
    min-width: 24px;
    text-align: right;
}

.h-talent-stat-bar {
    flex: 1;
    min-width: 40px;
    height: 5px;
    background: #f0f0f0;
    border-radius: 3px;
    overflow: hidden;
}

.h-talent-stat-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}


/* --- 破晓之路图鉴 - 跟宠羁绊图鉴 --- */
/* ===== 破晓之路图鉴 - 跟宠羁绊图鉴 ===== */
.handbook-fetter-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.handbook-fetter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 18px;
}

.handbook-fetter-card {
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.05);
    border-left: 4px solid;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 圆角边框修复：确保边框完整闭合，内容不溢出 */
    overflow: hidden;
}

.handbook-fetter-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.h-fetter-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.h-fetter-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h-fetter-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
}

.h-fetter-info {
    flex: 1;
}

.h-fetter-name {
    font-size: 1.05em;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.h-fetter-type {
    display: inline-block;
    font-size: 0.75em;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 500;
}

.h-fetter-desc {
    font-size: 0.88em;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.5;
}

.h-fetter-levels {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.h-fetter-level {
    font-size: 0.85em;
    color: #555;
    display: flex;
    align-items: center;
    gap: 8px;
}

.h-fetter-lv-tag {
    background: var(--color-primary);
    color: var(--text-on-gradient);
    padding: 1px 8px;
    border-radius: 8px;
    font-size: 0.8em;
    font-weight: 600;
    min-width: 38px;
    text-align: center;
}

.h-fetter-pets {
    font-size: 0.85em;
    color: #777;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.h-fetter-pets-label {
    color: #999;
    font-size: 0.85em;
}

.h-fetter-pet-tag {
    font-size: 0.82em;
    padding: 1px 8px;
    border-radius: 8px;
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 0 0 1px currentColor;
    font-weight: 500;
}

/* ===== 破晓之路图鉴 - 响应式 ===== */
@media (max-width: 768px) {
    .handbook-pet-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 12px;
    }

    .handbook-pet-card {
        padding: 12px 8px;
    }

    .h-pet-icon {
        width: 56px;
        height: 56px;
    }

    .handbook-talent-grid {
        grid-template-columns: 1fr;
    }

    .handbook-fetter-grid {
        grid-template-columns: 1fr;
    }

    .handbook-sub-tab {
        font-size: 0.85em;
        padding: 8px 16px;
    }
}

/* --- 治疗受限提示样式 --- */
/* ===== 治疗受限提示样式 ===== */
.skill-heal-limit-hint {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed #d97706;
}

.skill-heal-limit-hint .skill-desc-label {
    color: #b45309 !important;
    font-size: 0.78em !important;
    font-weight: 400 !important;
}

.skill-heal-limit-hint .skill-desc-text {
    color: #92400e;
    background: none;
    padding: 2px 0 0;
    border-radius: 0;
    font-size: 0.78em;
    line-height: 1.5;
}

.heal-limit-trigger {
    display: inline-block;
    padding: 1px 7px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.82em;
    box-shadow: none;
    user-select: none;
    vertical-align: middle;
    margin: 0 2px;
}

.heal-limit-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45);
    background: linear-gradient(135deg, #d97706, #b45309);
}

.heal-limit-trigger:active {
    transform: scale(0.96);
}


/* --- 受愈受限提示样式 --- */
/* ===== 受愈受限提示样式 ===== */
.skill-limit-hint {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed #94a3b8;
}

.skill-limit-hint .skill-desc-text {
    color: #b45309;
    background: none;
    padding: 2px 0 0;
    border-radius: 0;
    font-size: 0.78em;
    line-height: 1.5;
}

.skill-healed-limit-hint {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px dashed #7c3aed;
}

.skill-healed-limit-hint .skill-desc-label {
    color: #6d28d9 !important;
    font-size: 0.78em !important;
    font-weight: 400 !important;
}

.skill-healed-limit-hint .skill-desc-text {
    color: #5b21b6;
    background: none;
    padding: 2px 0 0;
    border-radius: 0;
    font-size: 0.78em;
    line-height: 1.5;
}

.healed-limit-trigger {
    display: inline-block;
    padding: 1px 7px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.82em;
    box-shadow: none;
    user-select: none;
    vertical-align: middle;
    margin: 0 2px;
}

.healed-limit-trigger:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #6d28d9, #5b21b6);
}

.healed-limit-trigger:active {
    transform: scale(0.96);
}

/* --- 跟宠数据对比功能 --- */
/* ===== 跟宠数据对比功能 ===== */

.btn-compare-toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 3px 12px var(--shadow-primary-light), 0 0 0 2px transparent;
    flex-shrink: 0;
    margin-left: auto;
    overflow: hidden;
}

.btn-compare-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px var(--shadow-primary), 0 0 0 2px rgba(255,255,255,0.3);
}

.btn-compare-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow-primary);
}

.btn-compare-toggle:active {
    transform: scale(0.95);
}

.btn-compare-toggle svg {
    fill: white;
}

.btn-compare-toggle #compareBadge {
    font-weight: 700;
    min-width: 1.2em;
    display: inline-block;
    text-align: center;
}

/* 天赋卡片上的对比按钮 */
.h-compare-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 10px;
    font-size: 0.7em;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #f0f0f0;
    color: #999;
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 0 0 1px #e0e0e0;
    z-index: 2;
    user-select: none;
    line-height: 1.5;
    overflow: hidden;
}

.h-compare-btn:hover {
    background: var(--color-primary-light);
    color: var(--text-on-gradient);
    box-shadow: 0 0 0 1px var(--color-primary-light);
    transform: scale(1.05);
}

.h-compare-btn:active {
    transform: scale(0.92);
}

.h-compare-btn.active {
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
    box-shadow: 0 2px 8px var(--shadow-primary-light), 0 0 0 1px transparent;
}

.handbook-talent-card {
    position: relative;
}

/* 对比面板浮层 */
.compare-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.compare-overlay.show {
    display: flex;
    opacity: 1;
}

.compare-panel {
    background: #ffffff;
    border-radius: 18px;
    width: 92%;
    max-width: 780px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-30px) scale(0.97);
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* 圆角边框修复：确保边框完整闭合，内容不溢出 */
    overflow: hidden;
}

.compare-overlay.show .compare-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.compare-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #eef0f2;
    flex-shrink: 0;
}

.compare-panel-header h3 {
    font-size: 1.1em;
    color: #1f2937;
    margin: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.compare-panel-header h3 svg {
    fill: #667eea;
}

.compare-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-compare-clear {
    padding: 6px 14px;
    background: #f3f4f6;
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 0 0 1px #e5e7eb;
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.8em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.btn-compare-clear:hover {
    background: #fee2e2;
    box-shadow: 0 0 0 1px #fecaca;
}

.btn-compare-clear:active {
    transform: scale(0.95);
}

.compare-panel-close {
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s;
}

.compare-panel-close:hover {
    background: #f3f4f6;
    transform: rotate(90deg);
}

.compare-panel-close svg {
    fill: #6b7280;
}

.compare-panel-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

/* 空状态 */
.compare-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    color: #bbb;
    text-align: center;
}

.compare-empty svg {
    fill: #ddd;
    margin-bottom: 14px;
}

.compare-empty p {
    font-size: 1em;
    color: #aaa;
    margin-bottom: 6px;
}

.compare-empty-hint {
    font-size: 0.85em !important;
    color: #ccc !important;
}

/* 对比内容区 */
.compare-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 宠物卡片行 */
.compare-pet-cards {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f2f5;
}

.c-pet-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 12px 12px;
    background: #f9fafb;
    border-radius: 14px;
    min-width: 90px;
    /* 使用 box-shadow 替代 border，完美跟随圆角 */
    border: none;
    box-shadow: 0 0 0 2px #e8e8e8;
    transition: all 0.2s ease;
    overflow: hidden;
}

.c-pet-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 0 0 2px #d0d0d0;
}

.c-pet-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: #ff4757;
    border: 2px solid white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
    box-shadow: 0 2px 6px rgba(255, 71, 87, 0.3);
}

.c-pet-card:hover .c-pet-remove {
    opacity: 1;
}

.c-pet-remove svg {
    fill: white;
}

.c-pet-remove:hover {
    transform: scale(1.15);
}

.c-pet-remove:active {
    transform: scale(0.9);
}

.c-pet-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
    flex-shrink: 0;
}

.c-pet-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.c-pet-name {
    font-size: 0.8em;
    font-weight: 600;
    color: #333;
    text-align: center;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.c-pet-elem {
    font-size: 0.65em;
    padding: 1px 8px;
    border-radius: 8px;
    font-weight: 500;
}

.c-pet-order {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 22px;
    height: 22px;
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
    border-radius: 50%;
    font-size: 0.7em;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 2px 6px var(--shadow-primary-light);
}

/* 数据对比区域 */
.compare-stats-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.c-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f9fafb;
    border-radius: 12px;
    padding: 12px 16px;
    /* 圆角边框修复 */
    overflow: hidden;
}

.c-stat-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #666;
    min-width: 36px;
    flex-shrink: 0;
}

.c-stat-values {
    flex: 1;
    display: flex;
    gap: 10px;
    align-items: center;
}

.c-stat-item {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.c-stat-bar-wrap {
    flex: 1;
    min-width: 0;
}

.c-stat-bar {
    height: 8px;
    background: #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}

.c-stat-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    background: var(--color-primary);
}

.c-stat-val {
    font-size: 0.8em;
    font-weight: 700;
    color: #444;
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.c-stat-rank {
    font-size: 0.7em;
    color: #999;
    min-width: 60px;
    text-align: left;
    flex-shrink: 0;
    font-weight: 500;
}

/* 响应式 */
@media (max-width: 768px) {
    .compare-panel {
        width: 96%;
        max-height: 92vh;
        border-radius: 14px;
    }

    .compare-panel-header {
        padding: 14px 16px;
    }

    .compare-panel-body {
        padding: 14px 16px;
    }

    .c-pet-card {
        min-width: 70px;
        padding: 10px 8px;
    }

    .c-pet-icon {
        width: 40px;
        height: 40px;
    }

    .c-pet-icon img {
        width: 36px;
        height: 36px;
    }

    .c-pet-name {
        font-size: 0.7em;
        max-width: 60px;
    }

    .c-stat-row {
        padding: 10px 12px;
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
    }

    .c-stat-label {
        min-width: auto;
        font-size: 0.8em;
    }

    .c-stat-values {
        width: 100%;
        flex-direction: column;
        gap: 6px;
    }

    .c-stat-item {
        width: 100%;
        gap: 4px;
    }

    .c-stat-rank {
        min-width: 50px;
        font-size: 0.65em;
    }

    .c-pet-card:hover .c-pet-remove {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .compare-pet-cards {
        gap: 8px;
    }

    .c-pet-card {
        min-width: 60px;
        padding: 8px 6px;
    }

    .c-pet-icon {
        width: 34px;
        height: 34px;
    }

    .c-pet-icon img {
        width: 30px;
        height: 30px;
    }
}

/* --- 筛选排序功能样式 --- */
/* ===== 筛选排序功能样式 ===== */

/* filter-bar 外层容器（始终可见的"筛选"按钮） */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* filter-bar 头部 */
.filter-bar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.filter-bar-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    background: #f0f0f0;
    /* 圆角边框修复：使用整数边框值避免亚像素渲染问题 */
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.82em;
    font-weight: 600;
    color: #888;
    font-family: inherit;
    transition: all 0.25s ease;
    overflow: hidden;
}

.filter-bar-toggle:hover {
    background: #e4e6ea;
    border-color: #ccc;
    color: var(--color-primary);
}

.filter-bar-toggle svg {
    fill: #999;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.filter-bar-toggle:hover svg {
    fill: #667eea;
}

.filter-bar-toggle.collapsed svg {
    transform: rotate(-90deg);
}

/* 可折叠内容区 - 内含多个分类卡片 */
.filter-bar-body {
    overflow: hidden;
    max-height: 1200px;
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease, border-width 0.3s ease;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-bar-body.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    border-width: 0;
}

/* ===== 分类卡片 ===== */
.filter-section {
    background: rgba(255,255,255,0.88);
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 14px 16px;
    backdrop-filter: blur(4px);
    transition: box-shadow 0.2s ease;
}

.filter-section:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

/* 各分类卡片左侧彩色边条 */
.filter-section-sort {
    border-left: 3.5px solid #10b981;
}

.filter-section-filter {
    border-left: 3.5px solid #f59e0b;
}

/* 分类标题行 */
.filter-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82em;
    font-weight: 700;
    color: #444;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f2f5;
}

.filter-section-title svg {
    fill: #888;
    flex-shrink: 0;
}


.filter-section-sort .filter-section-title svg {
    fill: #10b981;
}

.filter-section-filter .filter-section-title svg {
    fill: #f59e0b;
}

/* 分类内容区 */
.filter-section-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 6px;
}

/* 内容行（多行内容时的行分隔） */
.filter-row {
    display: flex;
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    flex-wrap: wrap;
    width: 100%;
}

/* 强制单行显示的筛选行 */
.filter-row-nowrap {
    flex-wrap: nowrap !important;
}

/* 筛选内联搜索框 */
.hb-search-inline {
    flex: 1;
    min-width: 120px;
    max-width: 260px;
    padding: 4px 12px;
    /* 圆角边框修复：使用整数边框值避免亚像素渲染问题 */
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    font-size: 0.78em;
    font-family: inherit;
    color: #555;
    outline: none;
    transition: border-color 0.2s;
    background: #fafafa;
}

.hb-search-inline:focus {
    border-color: #667eea;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.08);
}

.hb-search-inline::placeholder {
    color: #bbb;
}

/* 元素标签容器 */
.filter-element-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
}

.filter-element-tabs .element-tab {
    padding: 0 10px;
    font-size: 0.78em;
    margin: 0;
    line-height: 2;
    border: none !important;
    transform: none !important;
}

.filter-element-tabs .element-tab:hover {
    transform: none !important;
}

/* 通用筛选控件 */
.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-label {
    font-size: 0.78em;
    font-weight: 600;
    color: #888;
    white-space: nowrap;
    min-width: 48px;
    flex-shrink: 0;
    line-height: 2;
}

.filter-sub-label {
    font-size: 0.72em;
    font-weight: 500;
    color: #aaa;
    white-space: nowrap;
}

.filter-options {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 4px 12px;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f0f0f0;
    color: #999;
    /* 圆角边框修复：使用整数边框值避免亚像素渲染问题 */
    border: 1px solid #e0e0e0;
    user-select: none;
    line-height: 1.5;
    font-family: inherit;
    overflow: hidden;
}

.filter-btn:hover {
    background: #e8e8e8;
    color: var(--color-primary);
    border-color: #d0d0d0;
    transform: translateY(-1px);
}

.filter-btn:active {
    transform: scale(0.95);
}

.filter-btn.active {
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
    border-color: transparent;
    box-shadow: 0 2px 8px var(--shadow-primary-light);
}

.filter-btn.icon-btn {
    padding: 4px 8px;
    min-width: 26px;
    text-align: center;
    font-size: 0.8em;
}

.filter-btn.icon-btn.active {
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
    border-color: transparent;
}

.dir-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dir-toggle .dir-arrow {
    display: block;
    fill: currentColor;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dir-toggle.is-asc .dir-arrow {
    transform: rotate(180deg);
}

.filter-select {
    padding: 4px 10px;
    font-size: 0.78em;
    /* 圆角边框修复：使用整数边框值避免亚像素渲染问题 */
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: white;
    color: #555;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.2s;
    outline: none;
    max-width: 100px;
}

.filter-select:focus {
    border-color: var(--color-primary-light);
}

/* 属性排序组合 - 横向紧凑排列 */
.filter-sort-group {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

/* 区间数值网格 */
.filter-range-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 16px;
    width: 100%;
}

.range-item {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72em;
    color: #888;
    font-weight: 500;
    white-space: nowrap;
}

.range-input {
    width: 55px;
    padding: 3px 6px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.75em;
    font-family: inherit;
    color: #555;
    outline: none;
    transition: border-color 0.2s;
    text-align: center;
}

.range-input:focus {
    border-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px var(--shadow-primary-subtle);
}

.range-input::placeholder {
    color: #ccc;
}

.range-sep {
    font-size: 0.78em;
    color: #bbb;
}

/* 隐藏 number 输入框的上下箭头 */
.range-input::-webkit-outer-spin-button,
.range-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.range-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.filter-count {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(138, 196, 226, 0.08);
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
}

.filter-reset {
    padding: 4px 14px;
    font-size: 0.75em;
    font-weight: 500;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: #ef4444;
    /* 圆角边框修复：使用整数边框值避免亚像素渲染问题 */
    border: 1px solid #fecaca;
    user-select: none;
    font-family: inherit;
    flex-shrink: 0;
    overflow: hidden;
}

.filter-reset:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    transform: translateY(-1px);
}

.filter-reset:active {
    transform: scale(0.95);
}

/* 响应式 */
@media (max-width: 768px) {
    .filter-range-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px 12px;
    }

    .filter-section {
        padding: 12px;
    }

    .filter-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .filter-row-nowrap {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .filter-label {
        min-width: auto;
    }

    .filter-sort-group {
        width: 100%;
    }

    .filter-select {
        max-width: 80px;
        font-size: 0.72em;
    }

    .range-input {
        width: 50px;
    }
}

/* --- 破晓之路图鉴 - 三级导航（其他图鉴子标签） --- */
/* ===== 破晓之路图鉴 - 三级导航（其他图鉴子标签） ===== */
.fetter-sub-nav {
    position: relative;
    display: flex;
    align-items: center;
    margin: 8px 0 14px;
    user-select: none;
}

.fetter-sub-inner {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 8px;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.fetter-sub-inner::-webkit-scrollbar {
    display: none;
}

.fetter-sub-inner-track {
    display: flex;
    gap: 1px;
    width: fit-content;
    min-width: 100%;
    margin: 0 auto;
    justify-content: center;
}

.fetter-sub-tab {
    flex: 0 0 auto;
    min-width: 54px;
    padding: 7px 12px;
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px;
    background: transparent;
    border: none;
    transition: color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-x;
}

.fetter-sub-tab:hover {
    color: var(--color-primary);
}

.fetter-sub-tab.active {
    color: var(--color-primary);
    font-weight: 700;
}

/* 底部短下划线指示器 — 宽度40%，3px厚，品牌色，居中 */
.fetter-sub-indicator {
    position: absolute;
    bottom: 8px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-primary);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
    will-change: left, width;
    box-shadow: 0 1px 4px rgba(90, 154, 184, 0.3);
}

/* 左右渐变遮罩 — 暗示可横向滚动 */
.fetter-sub-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.fetter-sub-fade-l {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}
.fetter-sub-fade-r {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}
.fetter-sub-fade.visible {
    opacity: 1;
}

/* 子内容面板容器 */
.fetter-sub-panels {
    position: relative;
    min-height: 100px;
}

.fetter-sub-panel {
    display: block;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .fetter-sub-tab {
        min-width: 48px;
        padding: 6px 10px;
        font-size: 0.78em;
    }
    .fetter-sub-inner {
        padding: 4px 0 8px;
    }
    .fetter-sub-inner-track {
        gap: 1px;
    }
    .fetter-sub-indicator {
        bottom: 8px;
        height: 3px;
    }
}

@media (max-width: 480px) {
    .fetter-sub-nav {
        margin: 6px 0 10px;
    }
    .fetter-sub-tab {
        min-width: 42px;
        padding: 5px 8px;
        font-size: 0.74em;
    }
    .fetter-sub-fade {
        width: 20px;
    }
}


/* --- 三级导航内置筛选器 --- */
/* ===== 三级导航内置筛选器（紧凑行内式，独立于全局 .filter-bar） ===== */
.fsub-filter {
    margin: 10px 0 14px;
    padding: 0;
}

.fsub-filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    border: 1.5px solid var(--border-primary-light);
}

.fsub-filter-lbl {
    display: none;
}

.fsub-filter-tabs {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.fsub-filter-tab {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 0.76em;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.fsub-filter-tab:hover {
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1.5px var(--border-primary-light);
}

.fsub-filter-tab.active {
    color: var(--text-on-gradient);
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 2px 8px var(--shadow-primary);
}

.fsub-filter-count {
    font-size: 0.72em;
    color: var(--text-secondary);
    white-space: nowrap;
    margin-left: auto;
    padding-right: 4px;
}



/* 面板空状态占位 */
.fsub-empty {
    text-align: center;
    color: #bbb;
    padding: 40px 16px;
    font-size: 0.85em;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .fsub-filter-row {
        padding: 6px 10px;
        gap: 4px;
    }
    .fsub-filter-tab {
        padding: 3px 8px;
        font-size: 0.72em;
    }
    .fsub-filter-lbl {
        font-size: 0.72em;
    }
    .fsub-filter-count {
        font-size: 0.68em;
    }
}

@media (max-width: 480px) {
    .fsub-filter {
        margin: 6px 0 10px;
    }
    .fsub-filter-row {
        padding: 5px 8px;
        border-radius: 8px;
    }
}

/* --- 关系图鉴 - 卡片 --- */
/* ===== 关系图鉴 - 卡片 ===== */

.counter-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0 12px;
}

.counter-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.counter-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 0;
}

.counter-card-icon {
    width: 36px;
    height: 42px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.counter-card-name {
    font-size: 1.08em;
    font-weight: 700;
    line-height: 1.3;
}

.counter-card-body {
    padding: 10px 16px 14px;
}

.counter-relation-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.counter-relation-row:first-child {
    margin-top: 0;
}

.counter-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72em;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
    flex-shrink: 0;
}

.counter-tag-strong {
    color: #2e7d32;
    background: rgba(76, 175, 80, 0.12);
}

.counter-tag-weak {
    color: #c62828;
    background: rgba(244, 67, 54, 0.12);
}

.counter-target-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0,0,0,0.03);
    border: 1.5px solid var(--elem-color, #e0e0e0);
}

.counter-target-icon {
    width: 24px;
    height: 28px;
    border-radius: 5px;
    object-fit: contain;
    flex-shrink: 0;
}

.counter-target-name {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
}

.counter-note {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(178, 190, 195, 0.15);
    color: #7f8c8d;
    font-size: 0.78em;
    font-weight: 500;
    text-align: center;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .counter-card-icon {
        width: 32px;
        height: 37px;
    }
    .counter-card-header {
        padding: 12px 14px 0;
    }
    .counter-card-body {
        padding: 8px 14px 12px;
    }
    .counter-target-icon {
        width: 22px;
        height: 26px;
    }
    .counter-target-item {
        padding: 1px 5px;
    }
}

@media (max-width: 480px) {
    .counter-grid {
        gap: 10px;
    }
    .counter-card-icon {
        width: 28px;
        height: 33px;
    }
    .counter-card-header {
        padding: 10px 12px 0;
    }
    .counter-card-body {
        padding: 6px 12px 10px;
    }
    .counter-tag {
        font-size: 0.68em;
        padding: 1px 6px;
    }
    .counter-target-icon {
        width: 20px;
        height: 23px;
    }
    .counter-target-name {
        font-size: 0.68em;
    }
    .counter-note {
        font-size: 0.72em;
        padding: 6px 10px;
    }
}

/* --- 天赋图鉴 - 分组 & 卡片 --- */
/* ===== 天赋图鉴 - 分组 & 卡片 ===== */
.talent-list {
    padding: 4px 0 12px;
}

.talent-group {
    margin-bottom: 14px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
    overflow: hidden;
}

.talent-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, #f8f9fc, #f0f2f5);
    border-bottom: 1px solid #eef0f4;
    transition: background 0.2s;
}
.talent-group-header:hover {
    background: linear-gradient(135deg, #f0f2f7, #e8ebf0);
}

.talent-group-arrow {
    font-size: 0.7em;
    color: #999;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.talent-group-title {
    font-size: 0.92em;
    font-weight: 700;
    color: #333;
    flex: 1;
}

.talent-group-count {
    font-size: 0.75em;
    color: #999;
    background: #eef0f4;
    padding: 1px 8px;
    border-radius: 10px;
}

.talent-group-body {
    padding: 10px 14px 14px;
}

/* 天赋卡片 */
.talent-card {
    padding: 10px 0;
    border-bottom: 1px solid #f2f4f8;
}
.talent-card:last-child {
    border-bottom: none;
}

.talent-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.talent-card-name {
    font-size: 0.92em;
    font-weight: 700;
    color: #333;
}

.talent-card-type {
    font-size: 0.68em;
    color: #888;
    background: #f0f2f5;
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.talent-card-desc {
    font-size: 0.78em;
    color: #999;
    margin-bottom: 8px;
}

/* 等级行 - 5列等距 */
.talent-card-levels {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
    margin-bottom: 2px;
}
.talent-lv-roman {
    font-size: 0.7em;
    color: #bbb;
    font-weight: 500;
}

/* 数值行 - 5列等距 */
.talent-card-values {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    text-align: center;
}
.talent-lv-val {
    font-size: 0.92em;
    font-weight: 800;
    color: #222;
    font-family: 'Courier New', 'Consolas', monospace, 'ResourceHanRoundedCN';
}

/* 移动端适配 */
@media (max-width: 480px) {
    .talent-group-body {
        padding: 8px 12px 12px;
    }
    .talent-card {
        padding: 8px 0;
    }
    .talent-card-name {
        font-size: 0.88em;
    }
    .talent-lv-val {
        font-size: 0.85em;
    }
}

/* --- 进化图鉴 - 材料卡片 --- */
/* ===== 进化图鉴 - 材料卡片 ===== */
.evolve-material-list {
    padding: 4px 0 12px;
}

.evolve-element-group {
    margin-bottom: 12px;
}

.evolve-element-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 8px;
    font-size: 0.85em;
    font-weight: 700;
    font-family: 'ResourceHanRoundedCN', 'Microsoft YaHei', sans-serif;
    color: var(--text-primary);
    border-left: 3px solid var(--color-primary);
    padding-left: 10px;
    margin-bottom: 6px;
}

.evolve-element-count {
    font-size: 0.82em;
    font-weight: 400;
    font-family: 'ResourceHanRoundedCN', 'Microsoft YaHei', sans-serif;
    color: var(--text-secondary);
}

/* 材料卡片网格 - 手机4列 / 平板5列 / 桌面宽松 */
.evolve-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (min-width: 540px) {
    .evolve-cards {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }
}

/* 单个材料卡片 */
.evolve-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.evolve-card:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* 图片容器（徽章锚点） */
.evolve-card-img-wrap {
    position: relative;
    background: var(--bg-gradient-subtle);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evolve-card-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* 等级徽章（T2~T8） */
.evolve-tier-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.6em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.5;
    pointer-events: none;
}

.evolve-tier-t1 {
    background: #e8e8e8;
    color: #666;
}

.evolve-tier-t2 {
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
}

.evolve-tier-t3 {
    background: #a8d5ba;
    color: #2d6a4f;
}

.evolve-tier-t4 {
    background: #a8c8e8;
    color: #2c5282;
}

.evolve-tier-t5 {
    background: #d4b8e0;
    color: #553c7b;
}

.evolve-tier-t6 {
    background: #f0d4a8;
    color: #8b6914;
}

.evolve-tier-t7 {
    background: #f0a8a8;
    color: #9b2c2c;
}

.evolve-tier-t8 {
    background: #f0a8c8;
    color: #97266d;
}

/* 材料名称 */
.evolve-card-info {
    padding: 6px 8px 8px;
    text-align: center;
    font-size: 0.78em;
    font-weight: 600;
    font-family: 'ResourceHanRoundedCN', 'Microsoft YaHei', sans-serif;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 食物图鉴 - 食物卡片 --- */
/* ===== 食物图鉴 - 食物卡片 ===== */
.food-list {
    padding: 4px 0 12px;
}

.food-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (min-width: 540px) {
    .food-cards {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }
}

@media (min-width: 1024px) {
    .food-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0 20px;
    }
    .food-list > .evolve-element-group {
        flex: 0 0 calc(50% - 10px);
    }
    .food-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
}

.food-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.food-card-img-wrap {
    position: relative;
    background: var(--bg-gradient-subtle);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.food-card-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.food-card-info {
    padding: 6px 8px 8px;
    text-align: center;
    font-size: 0.76em;
    font-weight: 600;
    font-family: 'ResourceHanRoundedCN', 'Microsoft YaHei', sans-serif;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 饥饿值徽章 */
.food-hunger-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.55em;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 6px;
    line-height: 1.6;
    pointer-events: none;
}

.food-hunger-100 {
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
}

.food-hunger-200 {
    background: #a8d5ba;
    color: #2d6a4f;
}

.food-hunger-400 {
    background: #f0d4a8;
    color: #8b6914;
}

.food-hunger-1000 {
    background: #f0a8a8;
    color: #9b2c2c;
}

/* --- 无尽之海航线图 --- */
/* ===== 无尽之海航线图 ===== */

/* 元素筛选行（无尽之海模式下显示） */
.voyage-element-row {
    border-top: 1px solid var(--border-primary-light);
    margin-top: 0;
}

.voyage-element-scroll {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0;
    scrollbar-width: none;
}
.voyage-element-scroll::-webkit-scrollbar { display: none; }

.voyage-el-chip {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 0.76em;
    font-weight: 700;
    font-family: inherit;
    border-radius: 8px;
    border: 1.5px solid var(--el-color, #999) !important;
    color: var(--el-color, #999) !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.voyage-el-chip.active {
    background: var(--el-color, #999) !important;
    color: #fff !important;
    border-color: var(--el-color, #999) !important;
}

/* 航线图容器 */
.voyage-container {
    padding: 8px 0 12px;
}

/* 阶段横滑容器 */
.voyage-stages-scroll {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 8px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.voyage-stages-scroll::-webkit-scrollbar { display: none; }

/* 单个阶段列 */
.voyage-stage-col {
    flex: 0 0 160px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.voyage-stage-header {
    text-align: center;
    font-size: 0.82em;
    font-weight: 700;
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
    padding: 6px 0;
    border-radius: 10px;
    letter-spacing: 2px;
    box-shadow: 0 2px 8px var(--shadow-primary);
}

.voyage-stage-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 60px;
}

.voyage-stage-footer {
    text-align: center;
    font-size: 0.65em;
    color: var(--text-secondary);
    padding: 3px 0;
    border-top: 1px dashed var(--border-primary-light);
    margin-top: 2px;
}

/* 品质角标图片（全尺寸叠加在装备图片上方） */
.equip-quality-corner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
}


/* --- 装备详情弹窗 --- */
/* ===== 装备详情弹窗 ===== */
.equip-detail-body {
    padding: 4px 0;
}

.equip-detail-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--border-primary-light, #e8e8e8);
    margin-bottom: 14px;
}

.equip-detail-img-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    background: var(--bg-gradient-subtle);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.equip-detail-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.equip-detail-name {
    font-size: 1em;
    font-weight: 700;
    font-family: 'ResourceHanRoundedCN', 'Microsoft YaHei', sans-serif;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.equip-detail-effect {
    font-size: 0.82em;
    font-weight: 400;
    color: var(--text-secondary);
}

/* 商店出现信息区 */
.equip-detail-shops-title {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--text-primary);
    padding: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.equip-detail-shops-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: var(--color-primary);
    border-radius: 2px;
}

.equip-shop-group {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.equip-shop-title {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.equip-shop-refresh {
    font-size: 0.7em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.equip-shop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78em;
}

.equip-shop-table th {
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 6px 4px 4px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.85em;
}

.equip-shop-table td {
    padding: 6px 4px;
    border-bottom: 1px solid #eee;
    color: var(--text-primary);
}

.equip-shop-table tbody tr:last-child td {
    border-bottom: none;
}

/* 货币消耗标签 */
.equip-cost-badge {
    display: inline-block;
    font-size: 0.88em;
    font-weight: 600;
    white-space: nowrap;
}

.equip-cost-normal {
    color: var(--color-primary);
}

.equip-cost-pink {
    color: #e91e8c;
}

.equip-cost-blue {
    color: #7c3aed;
}

.equip-shop-none {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px 0;
    font-size: 0.82em;
}

/* 阶段间箭头 */
.voyage-stage-arrow {
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-light);
    font-size: 1.2em;
    font-weight: 700;
    opacity: 0.5;
}

/* 岛屿卡片 */
.voyage-island-card {
    background: #fff;
    border-radius: 10px;
    padding: 6px 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1.5px solid transparent;
    transition: all 0.25s ease;
}
.voyage-island-card.voyage-island-dimmed {
    opacity: 0.25;
    transform: scale(0.95);
}
.voyage-island-card.voyage-island-highlighted {
    border-color: var(--el-color, #ffd700);
    box-shadow: 0 0 0 2px var(--el-color, #ffd700), 0 2px 10px rgba(0,0,0,0.1);
    transform: scale(1.02);
    background: #fffef5;
}

.voyage-island-name {
    font-size: 0.76em;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
}

.voyage-island-el-list {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-top: 3px;
    flex-wrap: wrap;
}

.voyage-el-badge {
    font-size: 0.6em;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 5px;
    line-height: 1.5;
}

.voyage-dock-label {
    font-size: 0.6em;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 2px;
    font-weight: 600;
}

.voyage-dock-coords {
    font-size: 0.55em;
    color: var(--color-primary-light);
    text-align: center;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* 1阶码头卡片 */
.voyage-dock-card {
    padding: 8px 8px 6px;
}

.voyage-dock-islands {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
}

.voyage-dock-island {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 6px;
    background: #f8faff;
    border-radius: 8px;
    transition: all 0.25s ease;
}
.voyage-dock-island .voyage-island-name {
    font-size: 0.74em;
}
.voyage-dock-island .voyage-island-el-list {
    margin-top: 0;
}

.voyage-inner-dimmed {
    opacity: 0.3;
}

/* 滑动提示 */
.voyage-scroll-hint {
    text-align: center;
    font-size: 0.68em;
    color: var(--text-secondary);
    padding: 2px 0 8px;
    opacity: 0.6;
    letter-spacing: 1px;
}

/* 航线指引摘要 */
.voyage-route-summary {
    margin: 8px 10px 4px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

.voyage-summary-header {
    text-align: center;
    padding: 8px 0;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 1px;
}

.voyage-summary-body {
    background: #fff;
    padding: 6px 10px;
}

.voyage-summary-item {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}
.voyage-summary-item:last-child {
    border-bottom: none;
}

.voyage-summary-island {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.voyage-summary-stage {
    font-size: 0.62em;
    font-weight: 700;
    background: var(--gradient-primary);
    color: var(--text-on-gradient);
    padding: 1px 6px;
    border-radius: 6px;
    line-height: 1.6;
    flex: 0 0 auto;
}

.voyage-summary-name {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--text-primary);
}

.voyage-summary-route {
    font-size: 0.7em;
    color: var(--text-secondary);
    line-height: 1.5;
    padding-left: 2px;
}


/* --- 艾芙海姆捕捉位置 --- */
/* ===== 艾芙海姆捕捉位置 ===== */

.catch-normal-container {
    padding: 6px 10px 12px;
}

.catch-normal-notice {
    text-align: center;
    font-size: 0.72em;
    color: #e67e22;
    background: #fef9e7;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-weight: 600;
    border: 1px solid #fce4b4;
}

.catch-normal-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.catch-normal-card {
    display: flex;
    align-items: stretch;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    overflow: hidden;
}

.catch-normal-el {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 800;
    letter-spacing: 2px;
}

.catch-normal-body {
    flex: 1;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.catch-normal-region {
    font-size: 0.78em;
    font-weight: 700;
    color: var(--text-primary);
}

.catch-normal-example {
    font-size: 0.7em;
    color: var(--text-secondary);
    line-height: 1.5;
}

@media (max-width: 480px) {
    .catch-normal-el {
        flex: 0 0 38px;
        font-size: 1em;
    }
    .catch-normal-body {
        padding: 6px 8px;
    }
}

/* --- 无尽之海航线图 - 移动端适配 --- */
/* ===== 无尽之海航线图 - 移动端适配 ===== */
@media (max-width: 768px) {
    .voyage-stage-col {
        flex: 0 0 140px;
    }
    .voyage-stage-arrow {
        flex: 0 0 22px;
        font-size: 1em;
    }
    .voyage-element-scroll {
        gap: 3px;
    }
    .voyage-el-chip {
        padding: 3px 8px;
        font-size: 0.72em;
    }
}

@media (max-width: 480px) {
    .voyage-stage-col {
        flex: 0 0 130px;
    }
    .voyage-stage-arrow {
        flex: 0 0 18px;
        font-size: 0.9em;
    }
    .voyage-island-card {
        padding: 5px 6px;
    }
    .voyage-island-name {
        font-size: 0.72em;
    }
    .voyage-el-badge {
        font-size: 0.55em;
    }
}

/* --- 装备图鉴 - 卡片 --- */
/* ===== 装备图鉴 - 卡片 ===== */
.equip-list {
    padding: 4px 0 12px;
}

.equip-group {
    margin-bottom: 12px;
}

.equip-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 8px;
    font-size: 0.85em;
    font-weight: 700;
    font-family: 'ResourceHanRoundedCN', 'Microsoft YaHei', sans-serif;
    color: var(--text-primary);
    border-left: 3px solid var(--color-primary);
    padding-left: 10px;
    margin-bottom: 6px;
}

.equip-group-count {
    font-size: 0.82em;
    font-weight: 400;
    color: var(--text-secondary);
}

/* 卡片网格 - 手机4列 / 桌面8列 */
.equip-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (min-width: 1024px) {
    .equip-cards {
        grid-template-columns: repeat(8, 1fr);
        gap: 10px;
    }
}

/* 单张装备卡片 */
.equip-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease;
}

.equip-card:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* 图片容器 */
.equip-card-img-wrap {
    position: relative;
    background: var(--bg-gradient-subtle);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equip-card-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* 品质等级徽章 */
.equip-tier-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.6em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.5;
    pointer-events: none;
}

.equip-tier-t1 {
    background: var(--color-primary-lightest);
    color: var(--color-primary-dark);
}

.equip-tier-t2 {
    background: #a8d5ba;
    color: #2d6a4f;
}

.equip-tier-t3 {
    background: #a8c8e8;
    color: #2c5282;
}

.equip-tier-t4 {
    background: #d4b8e0;
    color: #553c7b;
}

/* 卡片信息区 */
.equip-card-info {
    padding: 6px 8px 8px;
    text-align: center;
}

.equip-card-name {
    font-size: 0.78em;
    font-weight: 500;
    font-family: 'ResourceHanRoundedCN', 'Microsoft YaHei', sans-serif;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equip-card-effect {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

/* --- 跟宠详情模态框（面板图鉴内使用） --- */
/* ===== 跟宠详情模态框 - 数值编辑面板 ===== */
.stats-edit-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    border-radius: 12px;
    border: none;
    box-shadow: 0 0 0 1px #e5e7eb;
    padding: 12px;
}

.stats-pet-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px;
}

.stats-pet-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: white;
    border: none;
    box-shadow: 0 0 0 2px #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stats-pet-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.stats-pet-info {
    flex: 1;
}

.stats-pet-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.stats-pet-level {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stats-pet-level select {
    padding: 3px 6px;
    border: none;
    box-shadow: 0 0 0 1px #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    color: #374151;
    background: white;
    cursor: pointer;
    font-family: inherit;
}

.stats-pet-level select:focus {
    outline: none;
    box-shadow: 0 0 0 1px var(--color-primary-light);
}

.stats-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: white;
    border-radius: 8px;
    border: none;
    box-shadow: 0 0 0 1px #e5e7eb;
}

.stats-item-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-item-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.stats-item-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.stats-item-label {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    flex-shrink: 0;
    min-width: 24px;
}

.stats-item-value {
    width: 42px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
    border-radius: 4px;
    padding: 2px 4px;
}

.stats-item-value:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.stats-item-value:active {
    transform: scale(0.95);
}

.stats-item-bar {
    flex: 1;
    display: flex;
    gap: 4px;
    height: 18px;
}

.bar-segment {
    width: 16px;
    height: 100%;
    background-image: url('/%E7%8E%A9%E5%AE%B6%E8%B7%9F%E5%AE%A0%E9%9D%A2%E6%9D%BF/%E7%A9%BA%E8%BF%9B%E5%BA%A6%E6%9D%A1.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    transition: transform 0.1s;
    border-radius: 2px;
    flex-shrink: 0;
}

.bar-segment:hover {
    transform: scaleY(1.1);
}

.bar-segment.filled {
    background-image: url('/%E7%8E%A9%E5%AE%B6%E8%B7%9F%E5%AE%A0%E9%9D%A2%E6%9D%BF/%E5%AE%9E%E8%BF%9B%E5%BA%A6%E6%9D%A1.webp');
}

/* --- 跟宠详情模态框 - 羁绊 & 进化 & 特性 --- */
/* ===== 跟宠详情模态框 - 附属信息 ===== */
.stats-pet-name .hb-pet-trait,
.hb-pet-trait {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-on-gradient);
    background: var(--gradient-primary);
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.hb-pet-fetters {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 2px;
    width: 100%;
    box-sizing: border-box;
}

.hb-pet-evolution-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.hb-pet-evolution-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: contain;
}

.hb-pet-evolution-name {
    font-size: 11px;
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
}

.hb-pet-fetters-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.hb-pet-fetter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hb-pet-fetter-icon {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.hb-pet-fetter-icon:hover {
    transform: scale(1.25);
}

.hb-fetters-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

.hb-pet-fetter-name {
    font-size: 9px;
    color: #9ca3af;
    white-space: nowrap;
    line-height: 1;
}

/* 跟宠详情模态框 - 响应式 */
@media (max-width: 500px) {
    .stats-item-content {
        flex-wrap: wrap;
    }
    .stats-item-bar {
        width: 100%;
        order: 3;
    }
    .hb-pet-fetters {
        flex-wrap: wrap;
        gap: 8px;
    }
    .hb-pet-fetters-right {
        margin-left: 0;
        flex-wrap: wrap;
    }
}