/* ===== 全局重置 ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== 主题变量（暗色为默认） ===== */
:root {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: #16213e;
    --bg-card-hover: #1c2a4a;
    --border: rgba(255, 255, 255, 0.08);
    --text-primary: #e8e8f0;
    --text-secondary: #8888a8;
    --accent: #6366f1;
    --accent-light: #818cf8;
}

/* 亮色主题覆盖 */
body.light {
    --bg-primary: #f5f5fa;
    --bg-secondary: #eaeaf2;
    --bg-card: #ffffff;
    --bg-card-hover: #e0e8ff;
    --border: rgba(0, 0, 0, 0.1);
    --text-primary: #1a1a2e;
    --text-secondary: #666680;
    --accent: #6366f1;
    --accent-light: #818cf8;
}

/* ===== 基础样式 ===== */
html, body {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--app-height, 100vh);
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin: 0;
    overflow-x: hidden;
    line-height: 1.6;
}

/* ===== Toast 提示 ===== */
.app-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    z-index: 10000;
    padding: 12px 24px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    white-space: nowrap;
}
.app-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.app-toast-success {
    background: #16a34a;
}
.app-toast-error {
    background: #dc2626;
}

.app-toast-warning {
    background: #ea580c;
}

/* ===== 导航栏 ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(15, 15, 26, 0.8);
    z-index: 1000;
    border-bottom: 1px solid var(--border);
}

body.light .navbar {
    background: rgba(245, 245, 250, 0.85);
}


.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 32px;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
}

.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
}

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.nav-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.nav-link.active {
    background: var(--bg-secondary);
    color: var(--accent-light);
}

/* 汉堡菜单按钮（竖屏显示） */
.nav-hamburger {
    display: none;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    transition: background 0.2s;
}

.nav-hamburger svg {
    width: 22px;
    height: 22px;
}

.nav-hamburger:hover {
    background: var(--bg-secondary);
}

/* 竖屏下拉菜单 */
.nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 8px 0;
}

.nav-dropdown.open {
    display: block;
}

.nav-dropdown-link {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.nav-dropdown-link:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.nav-dropdown-link.active {
    color: var(--accent-light);
    background: var(--bg-secondary);
}

/* 工具内嵌页面 */
.tool-embed-wrap {
    width: 100%;
    height: calc(100vh - 180px);
    min-height: 400px;
}

.tool-embed-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
    background: var(--bg-secondary);
}

.theme-toggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

/* 功能按钮行 */
.sim-action-row {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: space-evenly;
    padding: 4px 0;
}

.sim-btn-action {
    flex: 1;
    max-width: 160px;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 12px;
    background: #fff;
    color: #333;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    height: 36px;
    line-height: 36px;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* 亮色主题：按钮边框改为深色 */
body.light .sim-btn-action {
    border-color: rgba(0,0,0,0.2);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

.sim-btn-fill {
    background: #22c55e;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
    font-size: 25.2px; /* 按钮高度36px*70% */
}

/* 清空属性态：红色背景 */
.sim-btn-fill.active {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

body.light .sim-btn-fill {
    border-color: rgba(0,0,0,0.2);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

.sim-btn-dungeon {
    border-color: rgba(255,255,255,0.35);
    color: #000;
    font-weight: 400;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}

body.light .sim-btn-dungeon {
    border-color: rgba(0,0,0,0.2);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

/* 普通冒险激活态（泰坦之塔/墓） */
.sim-btn-dungeon.active {
    border-color: rgb(79, 70, 229);
    color: rgb(79, 70, 229);
    font-weight: 700;
    background: #f3f4f6;
}

.sim-btn-equip {
    background: #6366f1;
    color: #fff;
    border-color: rgba(255,255,255,0.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
    font-size: 25.2px; /* 按钮高度36px*70% */
}

body.light .sim-btn-equip {
    border-color: rgba(0,0,0,0.2);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

.sim-btn-equip.active {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}

.theme-toggle:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

/* 主题切换图标：根据当前主题显示对应图标 */
.theme-icon-dark,
.theme-icon-light {
    display: block;
}

body.light .theme-icon-dark {
    display: none;
}

body:not(.light) .theme-icon-light {
    display: none;
}

/* ===== 主内容区 ===== */
.main-content {
    padding: 100px 32px 32px;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

/* ===== 页面切换 ===== */
.page {
    display: none;
}

.page.active {
    display: block;
}

/* ===== 页面标题 ===== */
.platform-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.platform-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.unsaved-hint {
    font-size: 14px;
    color: #f59e0b;
    white-space: nowrap;
}

/* ===== 体系管理 ===== */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* 体系管理右侧按钮：任何视口都保持一行不换行（!important 强制覆盖） */
.section-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    flex-wrap: nowrap !important;
}

.section-actions .btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
}

/* 体系管理按钮文字：默认显示完整文字，竖屏显示短文字（避免按钮换行） */
.btn-text-short { display: none; }
@media (max-width: 768px) {
    .btn-text-wide { display: none; }
    .btn-text-short { display: inline; }
}

/* 让导航栏的z-index高于overlay */
.navbar {
    z-index: 2002;
}

.nav-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 32px;
    border-top: 1px solid var(--border);
}

.nav-sub-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-sub-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* overlay全屏遮住，导航栏因更高z-index保持在上方 */
.modal-overlay {
    top: 0;
}

/* ===== Tab组（Segment Control 胶囊样式） ===== */
.tab-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tab-group {
    display: inline-flex;
    gap: 0;
    background: var(--bg-secondary, #16213e);
    border-radius: 24px;
    padding: 3px;
}

.tab-btn {
    padding: 6px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    background: #5B5FC7;
    color: #fff;
    box-shadow: 0 2px 6px rgba(91, 95, 199, 0.25);
}

/* 技能弹窗筛选按钮改为独立按钮样式 */
#skillPickerFilter.tab-group-sm {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: none;
    border-radius: 0;
    padding: 0;
}

#skillPickerFilter.tab-group-sm .tab-btn {
    padding: 5px 14px;
    font-size: 13px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

#skillPickerFilter.tab-group-sm .tab-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

#skillPickerFilter.tab-group-sm .tab-btn.active {
    background: #5B5FC7;
    border-color: #5B5FC7;
    color: #fff;
    box-shadow: 0 2px 6px rgba(91, 95, 199, 0.25);
}

/* 其他 tab-group-sm 保持原样式 */
.tab-group-sm .tab-btn {
    padding: 5px 14px;
    font-size: 13px;
}

/* ===== Tab内容 ===== */
.tab-content {
    margin-bottom: 24px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* ===== 体系卡片网格 ===== */
.build-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ===== 体系卡片 ===== */
.build-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px 20px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    position: relative;
}

.build-card:hover {
    border-color: var(--text-secondary);
}

.build-card.active {
    border-color: var(--accent-light);
    box-shadow: 0 0 0 1px var(--accent-light), 0 4px 12px rgba(99, 102, 241, 0.15);
}

.build-card-name,
.build-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 4px;
}

.build-card-note,
.build-note {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    text-align: center;
}

.build-card-footer,
.build-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
    flex-wrap: wrap;
}

/* 删除按钮：右上角红色X */
.build-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    z-index: 2;
}

.build-delete svg {
    width: 14px;
    height: 14px;
}

.build-card-stats,
.build-stats {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.build-card-actions,
.build-actions {
    display: flex;
    gap: 6px;
}

/* ===== 通用按钮系统 ===== */
.btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

/* 按钮内 SVG 图标：固定尺寸，避免竖屏下 SVG 渲染为 0 宽导致文字偏右 */
.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-primary {
    background: #6366f1;
    color: #fff;
}

.btn-success {
    background: #22c55e;
    color: #fff;
}

.btn-indigo {
    background: #4f46e5;
    color: #fff;
}

.btn-purple {
    background: #a855f7;
    color: #fff;
}

.btn-green-solid {
    background: #16a34a;
    color: #fff;
}

.btn-danger {
    background: #ef4444;
    color: #fff;
}

.btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: var(--bg-secondary);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
}

/* ===== 空状态 ===== */
.empty-state {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

/* ===== 勇士阵容区域 ===== */
.warrior-section {
    margin-bottom: 24px;
}

.warrior-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 16px 24px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.warrior-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.warrior-top-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.warrior-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.warrior-desc {
    font-size: 13px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.warrior-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.warrior-item {
    position: relative;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.warrior-item:hover {
    transform: scale(1.1);
}

.warrior-item[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.6;
}

.warrior-icon-wrap {
    position: relative;
    display: inline-block;
}

.warrior-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

.warrior-name {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.element-icon {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 28px;  /* 横屏：角色图片56px的1/2 */
    height: 28px; /* 横屏：角色图片56px的1/2 */
    pointer-events: none;
}

/* ===== 英雄阵容区域 ===== */
.roster-section {
    margin-bottom: 24px;
}

.roster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}

.roster-title-area {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.roster-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 4px 0;
}

.roster-count {
    font-size: 14px;
    color: var(--text-secondary);
}

.roster-desc {
    font-size: 13px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.roster-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.roster-sort-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.roster-btn-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.roster-body {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== 冒险任务区域 ===== */
.quest-section {
    margin-bottom: 24px;
}

.quest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.quest-title-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quest-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.quest-count {
    font-size: 14px;
    color: var(--text-secondary);
}

.quest-desc {
    font-size: 13px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 16px;
}

.quest-body {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== 冒险任务分组 ===== */
.quest-group {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 12px;
    background: rgba(99, 102, 241, 0.03);
    display: flex;
    flex-direction: column;
}

.quest-group-body {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
    align-content: stretch;
}

/* ===== 冒险任务卡片 ===== */
.quest-task-card {
    width: calc((100% - 36px) / 4);
    height: 300px;
    background: linear-gradient(135deg, #fef2f2, #f0fdf4, #e0f2fe);
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: grab;
}

.quest-task-card:hover {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
    border-color: var(--accent-light);
}

.quest-task-card:active {
    cursor: grabbing;
}

.quest-task-card.dragging {
    opacity: 0.5;
}

/* 卡片顶部 */
.quest-task-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.quest-task-info {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.quest-task-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
    align-self: center;
}

.quest-task-avatar:hover {
    opacity: 0.8;
}

.quest-task-info-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.quest-task-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex-wrap: wrap;
}

.quest-task-name {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quest-task-diff {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* 泰坦塔难度显示（背景图+图标，复刻冒险大全样式） */
.quest-task-diff-titan {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

/* 背景图为正方形(67x67px)，容器也用正方形避免两侧空白 */
.quest-task-diff-titan-imgwrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 0;
}

.quest-task-diff-titan-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    display: block;
}

.quest-task-diff-titan-icon {
    position: relative;
    z-index: 10;
    width: 15px;
    height: 15px;
    display: block;
}

.quest-task-diff-titan-text {
    font-size: 9px;
    color: var(--text-secondary);
    line-height: 1;
    margin-top: 1px;
    white-space: nowrap;
}

/* 元素屏障显示（右侧，靠右） */
.quest-task-barrier-display {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.quest-task-barrier-icon {
    width: 14px;
    height: 14px;
}

.quest-task-barrier-val {
    font-size: 11px;
    color: #dc2626;
    white-space: nowrap;
}

.quest-task-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-items: center;
}

/* 泰坦之墓楼层控制 */
.quest-task-muxue-floor-label {
    font-size: 12px;
    color: #000;
    white-space: nowrap;
}

.quest-task-muxue-floor-input {
    width: 40px;
    height: 22px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
    padding: 0 2px;
    -moz-appearance: textfield;
}

.quest-task-muxue-floor-input::-webkit-inner-spin-button,
.quest-task-muxue-floor-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quest-task-muxue-floor-input:focus {
    outline: none;
    border-color: #3b82f6;
}

/* 泰坦之墓楼层增益悬浮面板 */
.muxue-floor-bonus-panel {
    background: rgba(0, 0, 0, 0.85);
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
}

.muxue-floor-bonus-row {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.muxue-floor-bonus-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.muxue-floor-bonus-label {
    color: #ccc;
    font-size: 12px;
}

.muxue-floor-bonus-val {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    margin-left: 2px;
}

.quest-task-muxue-floor-btn {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.quest-task-muxue-floor-btn:hover:not(:disabled) {
    background: var(--bg-card-hover);
}

.quest-task-muxue-floor-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.quest-task-clone {
    padding: 2px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.75);
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.quest-task-clone:hover {
    background: #fff;
    color: #4338ca;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.quest-task-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.quest-task-elements {
    display: flex;
    gap: 2px;
}

.quest-task-element {
    width: 16px;
    height: 16px;
}

.quest-task-power {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.quest-task-del {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

.quest-task-del:hover {
    background: #dc2626;
}

/* 英雄槽位（与线上平台一致：无背景、无内边距、居中弹性布局） */
/* min-height与英雄卡片实际高度一致：40px图片+4px间距+19.2px行高≈63.2px */
.quest-task-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    min-height: 63.2px;
}

/* 整个任务卡片作为拖拽放置区域 */
.quest-task-card.drag-over {
    outline: 2px dashed #3b82f6;
    outline-offset: -2px;
    background: rgba(59, 130, 246, 0.05);
}

.quest-task-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.quest-task-hero-img-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: visible;
}

.quest-task-hero-img {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.quest-task-hero-img:hover {
    opacity: 0.8;
}

.quest-task-hero-elem {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 50%;
    height: 50%;
    pointer-events: none;
}

.quest-task-hero-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    z-index: 1;
}

.quest-task-hero-name {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin-top: 4px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #374151;
    line-height: 1.6;
    min-height: 19.2px; /* 12px * 1.6 = 19.2px，确保空状态( )与有角色时高度一致 */
}

.quest-task-add-hero {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 2px dashed #d1d5db;
    background: transparent;
    color: #9ca3af;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.quest-task-add-hero:hover {
    border-color: #9ca3af;
    color: #4b5563;
}

/* 底部配置行（单独一行，带顶部分隔线） */
.quest-task-config-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    position: relative;
    z-index: 20;
}

.quest-task-config {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    overflow: visible;
}

.quest-task-config-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.quest-task-config-label {
    font-size: 12px;
    color: #4b5563;
    margin-bottom: 2px;
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
}

.quest-task-config-btn {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    text-align: center;
}

.quest-task-config-btn:hover {
    border-color: #9ca3af;
}

/* 强化道具按钮（44x44方形，与线上平台一致） */
.quest-task-config-booster {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    overflow: hidden;
}

.quest-task-config-booster-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    pointer-events: none;
}

/* 公会+活动强化按钮 - 单选模式（完整图片 + 右上角角标） */
.quest-task-config-guild-activity.ga-single-mode {
    position: relative;
    padding: 0;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #d1d5db;
}

.quest-task-config-guild-activity.ga-single-mode .ga-single-layout {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quest-task-config-guild-activity.ga-single-mode .ga-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.quest-task-config-guild-activity.ga-single-mode .ga-count-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    background: #ff4757;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
}

/* 百分比角标样式（同ga-count-badge但更宽以适应%） */
.quest-task-config-guild-activity.ga-single-mode .ga-pct-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 28px;
    height: 16px;
    padding: 0 4px;
    background: #ff4757;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    white-space: nowrap;
}

/* 公会+活动强化按钮 - 双选分割布局 */
.quest-task-config-guild-activity.ga-split-mode {
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
}

.quest-task-config-guild-activity.ga-split-mode .ga-split-layout {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 右上角区域：经验 - 使用 clip-path 裁剪为右上角三角形 */
.quest-task-config-guild-activity.ga-split-mode .ga-exp-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #d1d5db;
}

/* 左下角区域：休息时间 - 使用 clip-path 裁剪为左下角三角形 */
.quest-task-config-guild-activity.ga-split-mode .ga-rest-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #d1d5db;
}

/* 图片填满整个区域，被 clip-path 裁剪后只显示对应三角形内的部分 */
.quest-task-config-guild-activity.ga-split-mode .ga-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* 经验图片：在右上角三角形内显示 */
.quest-task-config-guild-activity.ga-split-mode .ga-exp-icon {
    position: absolute;
    top: 2px;
    right: 2px;
}

/* 休息时间图片：在左下角三角形内显示 */
.quest-task-config-guild-activity.ga-split-mode .ga-rest-icon {
    position: absolute;
    bottom: 2px;
    left: 2px;
}

/* 计数角标 */
.quest-task-config-guild-activity.ga-split-mode .ga-count-badge {
    position: absolute;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: #ff4757;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
}

/* 百分比角标样式（双选分割布局） */
.quest-task-config-guild-activity.ga-split-mode .ga-pct-badge {
    position: absolute;
    min-width: 24px;
    height: 14px;
    padding: 0 3px;
    background: #ff4757;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    white-space: nowrap;
}

.quest-task-config-guild-activity.ga-split-mode .ga-exp-badge {
    top: 0;
    right: 0;
}

.quest-task-config-guild-activity.ga-split-mode .ga-rest-badge {
    bottom: 0;
    left: 0;
}

/* 分界线：从左上角到右下角 */
.quest-task-config-guild-activity.ga-split-mode .ga-diagonal-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 142%;
    height: 1px;
    background: var(--border-color, #999);
    transform-origin: 0 0;
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 5;
}

/* 词条按钮（与线上平台一致） */
.quest-task-config-entry {
    width: 56px;
    height: 32px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* 精英怪/元素屏障下拉按钮（固定宽度，与线上平台一致） */
.quest-task-config-dropdown {
    width: 72px;
    height: 32px;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 泰坦之墓奇异难度：固定元素屏障图标选择 */
.quest-task-muxue-barrier-item {
    flex-direction: column;
    align-items: center;
}

.quest-task-muxue-barrier-icons {
    display: flex;
    align-items: center;
    gap: 3px;
}

.quest-task-muxue-barrier-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 0.2s;
    opacity: 0.5;
}

.quest-task-muxue-barrier-icon:hover {
    opacity: 0.8;
}

.quest-task-muxue-barrier-icon.active {
    opacity: 1;
    border-color: #3b82f6;
}

.quest-task-muxue-barrier-none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    border: 2px solid transparent;
    transition: all 0.2s;
    opacity: 0.5;
}

.quest-task-muxue-barrier-none:hover {
    opacity: 0.8;
}

.quest-task-muxue-barrier-none.active {
    opacity: 1;
    border-color: #3b82f6;
    color: var(--text-primary);
}

/* 测试冒险行（单独一行，带顶部分隔线） */
.quest-task-test-row {
    margin-top: auto; /* 推到卡片底部：与上方分界线之间距离对称 */
    padding: 10px 0;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.quest-task-sim-result {
    display: flex;
    align-items: center;
    gap: 6px;
}

.quest-task-sim-face-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.quest-task-sim-face {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.quest-task-sim-face-S { background: #10b981; }
.quest-task-sim-face-A { background: #3b82f6; }
.quest-task-sim-face-B { background: #f59e0b; }
.quest-task-sim-face-C { background: #f97316; }
.quest-task-sim-face-D { background: #ef4444; }

.quest-task-sim-rate {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.quest-task-test-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.quest-task-detail-btn {
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    background: #4b5563;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.quest-task-detail-btn:hover {
    background: #374151;
}

.quest-task-test {
    position: relative;
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.quest-task-test:hover {
    background: #1d4ed8;
}

.quest-task-test-loading {
    background: #9ca3af;
    cursor: not-allowed;
}

.quest-task-test-progress {
    position: absolute;
    inset: 0;
    background: #22c55e;
    transition: width 0.3s ease-out;
    z-index: 0;
}

.quest-task-test-text {
    position: relative;
    z-index: 1;
}

/* ===== 冒险模拟详情弹窗（复刻线上平台 QuestSimulationDetailModal 布局） ===== */
.quest-sim-detail {
    padding: 4px;
}

@media (min-width: 769px) {
    .quest-sim-detail {
        padding: 12px 24px;
    }
}

/* --- 1. 冒险信息区域（渐变背景） --- */
.qsd-adv-info {
    background: linear-gradient(135deg, #fef2f2, #f0fdf4, #f0f9ff);
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 4px 8px;
    margin-bottom: 12px;
}

@media (min-width: 769px) {
    .qsd-adv-info {
        padding: 8px 24px;
    }
}

.qsd-adv-info-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

@media (min-width: 769px) {
    .qsd-adv-info-inner {
        flex-direction: row;
        align-items: center;
        gap: 0;
    }
}

.qsd-adv-left {
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (min-width: 769px) {
    .qsd-adv-left {
        gap: 8px;
    }
}

.qsd-adv-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-adv-icon {
        width: 80px;
        height: 80px;
    }
}

.qsd-adv-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (min-width: 769px) {
    .qsd-adv-name-row {
        gap: 8px;
    }
}

.qsd-adv-name {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .qsd-adv-name {
        font-size: 30px;
    }
}

.qsd-diff-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

@media (min-width: 769px) {
    .qsd-diff-icon {
        width: 32px;
        height: 32px;
    }
}

/* 泰坦塔难度（背景+图标叠加） */
.qsd-diff-titan {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 0;
}

@media (min-width: 769px) {
    .qsd-diff-titan {
        width: 32px;
        height: 32px;
    }
}

.qsd-diff-titan-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.qsd-diff-titan-icon {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* 右侧信息区域 */
.qsd-adv-right {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

@media (min-width: 769px) {
    .qsd-adv-right {
        gap: 24px;
        width: auto;
        justify-content: flex-end;
    }
}

.qsd-adv-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

@media (min-width: 769px) {
    .qsd-adv-item {
        gap: 8px;
    }
}

.qsd-adv-item-label {
    font-size: 10px;
    color: #6b7280;
    text-align: center;
    margin-bottom: 2px;
}

@media (min-width: 769px) {
    .qsd-adv-item-label {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

.qsd-adv-item-val {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.qsd-adv-item-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

@media (min-width: 769px) {
    .qsd-adv-item-icon {
        width: 28px;
        height: 28px;
    }
}

.qsd-adv-item-text {
    font-size: 10px;
    color: #374151;
    text-align: center;
    margin-top: 2px;
}

@media (min-width: 769px) {
    .qsd-adv-item-text {
        font-size: 14px;
        margin-top: 4px;
    }
}

/* 元素屏障上下两部分样式 */
.qsd-barrier-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.qsd-barrier-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.qsd-barrier-bottom {
    text-align: center;
}

.qsd-barrier-val {
    font-size: 10px;
    font-weight: 700;
    color: #374151;
}

@media (min-width: 769px) {
    .qsd-barrier-val {
        font-size: 14px;
    }
}

/* 破盾状态：绿色文字+已破盾标识 */
.qsd-barrier-broken .qsd-barrier-val {
    color: #10b981;
}

.qsd-barrier-broken-text {
    color: #10b981;
    font-weight: bold;
    margin-left: 4px;
    font-size: 10px;
}

@media (min-width: 769px) {
    .qsd-barrier-broken-text {
        font-size: 14px;
    }
}

/* 词条列表样式（一行一词条名称） */
.qsd-adv-entries {
    text-align: left;
}

.qsd-entry-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qsd-entry-name-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.qsd-entry-name-row .rank-card-nullify-element {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

.qsd-entry-name-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    object-fit: contain;
}

.qsd-entry-name-text {
    font-size: 10px;
    color: #374151;
}

@media (min-width: 769px) {
    .qsd-entry-name-icon {
        width: 20px;
        height: 20px;
    }
    .qsd-entry-name-text {
        font-size: 14px;
    }
}

/* --- 2. 总体统计区域（有第二次尝试时显示） --- */
.qsd-overall-rate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (min-width: 769px) {
    .qsd-overall-rate {
        gap: 12px;
    }
}

.qsd-overall-face {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-overall-face {
        width: 48px;
        height: 48px;
    }
}

.qsd-overall-rate-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.qsd-overall-rate-val {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

@media (min-width: 769px) {
    .qsd-overall-rate-val {
        font-size: 24px;
    }
}

.qsd-overall-survival {
    width: 100%;
}

.qsd-overall-survival-title {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    margin-bottom: 8px;
}

@media (min-width: 769px) {
    .qsd-overall-survival-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
}

.qsd-overall-survival-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

@media (min-width: 769px) {
    .qsd-overall-survival-list {
        gap: 24px;
    }
}

.qsd-overall-member {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 50%;
    padding: 0 2px;
}

@media (min-width: 769px) {
    .qsd-overall-member {
        gap: 8px;
        width: auto;
    }
}

/* 左侧：图片（上）+ 名字（下） */
.qsd-overall-member-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* 右侧：存活率图标（左）+ 数据（右） */
.qsd-overall-member-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

@media (min-width: 769px) {
    .qsd-overall-member-right {
        gap: 4px;
    }
}

.qsd-overall-member-avatar {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

@media (min-width: 769px) {
    .qsd-overall-member-avatar {
        width: 48px;
        height: 48px;
    }
}

.qsd-overall-member-name {
    font-size: 8px;
    font-weight: 500;
    text-align: center;
    color: #1f2937;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .qsd-overall-member-name {
        font-size: 12px;
    }
}

.qsd-overall-member-rate-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-overall-member-rate-icon {
        width: 24px;
        height: 24px;
    }
}

.qsd-overall-member-rate {
    font-size: 8px;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .qsd-overall-member-rate {
        font-size: 14px;
    }
}

/* --- 3. 单次尝试统计区域 --- */
.qsd-attempt {
    margin-bottom: 12px;
}

@media (min-width: 769px) {
    .qsd-attempt {
        margin-bottom: 24px;
    }
}

.qsd-attempt-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: center;
}

@media (min-width: 769px) {
    .qsd-attempt-title {
        font-size: 18px;
        margin-bottom: 12px;
    }
}

/* 尝试卡片容器（统计栏+成员统计在同一卡片内，兼容暗色主题） */
.qsd-attempt-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 8px;
    border: 1px solid var(--border);
}

@media (min-width: 769px) {
    .qsd-attempt-card {
        padding: 16px;
    }
}

/* 尝试次数行与角色存活数据行之间的分界线 */
.qsd-attempt-divider {
    border-top: 1px solid var(--border);
    margin: 8px 0;
}

@media (min-width: 769px) {
    .qsd-attempt-divider {
        margin: 12px 0;
    }
}

/* 冒险配置信息卡片内的分界线 */
.qsd-adv-divider {
    border-top: 1px solid #e5e7eb;
    margin: 8px 0;
}

@media (min-width: 769px) {
    .qsd-adv-divider {
        margin: 12px 0;
    }
}

/* 统计栏：grid 平均分配宽度（横屏 6 列一行；竖屏 3 列两行），各区域左右居中 */
.qsd-attempt-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    align-items: center;
    gap: 6px 8px;
}

@media (min-width: 769px) {
    .qsd-attempt-stats {
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .qsd-attempt-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px 8px;
    }
}

.qsd-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 0;
}

.qsd-stat-label {
    font-size: 9px;
    color: #6b7280;
    text-align: center;
}

@media (min-width: 769px) {
    .qsd-stat-label {
        font-size: 14px;
    }
}

.qsd-stat-value {
    font-size: 10px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
}

@media (min-width: 769px) {
    .qsd-stat-value {
        font-size: 20px;
    }
}

/* 尝试卡片内统计文字颜色兼容暗色主题 */
.qsd-attempt-card .qsd-stat-label {
    color: var(--text-secondary);
}

.qsd-attempt-card .qsd-stat-value {
    color: var(--text-primary);
}

/* 成功率数字颜色与尝试次数数字一致（覆盖 .qsd-stat-rate .qsd-stat-value 的蓝色） */
.qsd-attempt-card .qsd-stat-rate .qsd-stat-value {
    color: var(--text-primary);
}

.qsd-attempt-card .qsd-stat-minor .qsd-stat-label {
    color: var(--text-secondary);
}

.qsd-attempt-card .qsd-stat-minor .qsd-stat-value {
    color: var(--text-secondary);
}

.qsd-stat-rate {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

@media (min-width: 769px) {
    .qsd-stat-rate {
        gap: 8px;
    }
}

/* 成功率文字容器（标签在上，数值在下） */
.qsd-stat-rate-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.qsd-stat-rate .qsd-stat-value {
    color: #2563eb;
}

.qsd-stat-face {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

@media (min-width: 769px) {
    .qsd-stat-face {
        width: 32px;
        height: 32px;
    }
}

.qsd-stat-minor .qsd-stat-label {
    font-size: 8px;
    color: #9ca3af;
}

@media (min-width: 769px) {
    .qsd-stat-minor .qsd-stat-label {
        font-size: 12px;
    }
}

.qsd-stat-minor .qsd-stat-value {
    font-size: 10px;
    color: #6b7280;
}

@media (min-width: 769px) {
    .qsd-stat-minor .qsd-stat-value {
        font-size: 16px;
    }
}

/* 成员统计网格 */
.qsd-attempt-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}

@media (min-width: 769px) {
    .qsd-attempt-members {
        gap: 24px;
    }
}

/* 单个成员：竖屏垂直布局（4列），横屏水平布局 */
.qsd-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    padding: 0 2px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-member {
        flex-direction: row;
        align-items: center;
        width: auto;
        padding: 0;
        gap: 12px;
    }
}

/* 左侧：头像+名称（垂直排列） */
.qsd-member-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.qsd-member-avatar-wrap {
    position: relative;
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
    overflow: visible;
}

@media (min-width: 769px) {
    .qsd-member-avatar-wrap {
        width: 48px;
        height: 48px;
        margin-bottom: 4px;
    }
}

.qsd-member-avatar {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qsd-member-elem {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 50%;
    height: 50%;
}

@media (min-width: 769px) {
    .qsd-member-elem {
        top: -4px;
        left: -4px;
        width: 50%;
        height: 50%;
    }
}

.qsd-member-name {
    font-size: 8px;
    font-weight: 500;
    text-align: center;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

@media (min-width: 769px) {
    .qsd-member-name {
        font-size: 12px;
        max-width: 80px;
    }
}

/* 右侧：统计（竖屏居中，横屏左对齐） */
.qsd-member-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}

@media (min-width: 769px) {
    .qsd-member-stats {
        align-items: flex-start;
        gap: 4px;
    }
}

.qsd-member-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (min-width: 769px) {
    .qsd-member-stat {
        gap: 4px;
    }
}

/* 存活率图标（较大） */
.qsd-member-stat-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-member-stat-icon {
        width: 24px;
        height: 24px;
    }
}

/* 攻击/生命图标（较小） */
.qsd-member-stat-icon-sm {
    width: 10px;
    height: 10px;
}

@media (min-width: 769px) {
    .qsd-member-stat-icon-sm {
        width: 20px;
        height: 20px;
    }
}

.qsd-member-stat-val {
    font-size: 8px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

@media (min-width: 769px) {
    .qsd-member-stat-val {
        font-size: 12px;
    }
}

.qsd-member-stat-bold {
    font-weight: 700;
}

.qsd-member-stat-val em {
    color: var(--text-secondary);
    font-style: normal;
    font-size: 8px;
}

@media (min-width: 769px) {
    .qsd-member-stat-val em {
        font-size: 12px;
    }
}

/* ===== 提示横幅（复刻线上平台） ===== */
.qsd-tip-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    background: linear-gradient(to right, rgba(224, 231, 255, 0.9), rgba(237, 233, 254, 0.9), rgba(245, 243, 255, 0.9));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 14px -4px rgba(79,70,229,0.18);
    font-size: 9px; /* 竖屏：缩小字体避免【点击英雄卡片导出配置码，在英雄体系搭配平台导入使用】换行 */
    font-weight: 500;
    color: rgba(49, 46, 129, 0.9);
    text-align: center;
    line-height: 1.4;
    white-space: nowrap; /* 单行显示 */
}

.qsd-tip-icon {
    color: rgba(99, 102, 241, 0.9);
}

.qsd-tip-icon-r {
    color: rgba(139, 92, 246, 0.9);
}

@media (min-width: 769px) {
    .qsd-tip-banner {
        font-size: 14px;
        padding: 8px 20px;
        margin-bottom: 12px;
    }
}

/* ===== 怪物属性卡片 ===== */
.qsd-enemy-card {
    background: linear-gradient(to bottom right, rgba(30, 30, 50, 0.8), rgba(22, 33, 62, 0.8), rgba(30, 20, 40, 0.8));
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}

body.light .qsd-enemy-card {
    background: linear-gradient(to bottom right, rgba(254, 252, 232, 0.8), rgba(249, 250, 251, 0.8), rgba(254, 242, 242, 0.8));
}

@media (min-width: 769px) {
    .qsd-enemy-card {
        padding: 16px;
        margin-bottom: 16px;
    }
}

.qsd-enemy-card-title {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

@media (min-width: 769px) {
    .qsd-enemy-card-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
}

.qsd-enemy-card-body {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

@media (min-width: 769px) {
    .qsd-enemy-card-body {
        gap: 16px;
    }
}

/* 左侧：敌人属性信息 */
.qsd-enemy-attr-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

@media (min-width: 769px) {
    .qsd-enemy-attr-section {
        gap: 8px;
    }
}

.qsd-enemy-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    padding: 4px 0;
}

@media (min-width: 769px) {
    .qsd-enemy-name {
        font-size: 16px;
        padding: 8px 0;
    }
}

/* 常规属性/首回合属性切换按钮 */
.qsd-enemy-attr-toggle {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}

.qsd-enemy-attr-toggle-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.qsd-enemy-attr-toggle-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--text-primary);
}

@media (min-width: 769px) {
    .qsd-enemy-attr-toggle-btn {
        font-size: 13px;
        padding: 6px 16px;
    }
}

.qsd-enemy-attr-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

@media (min-width: 769px) {
    .qsd-enemy-attr-list {
        gap: 4px;
    }
}

/* 竖屏：上=副本名+属性栏（7项一行一属性），下=战斗增益与减益 */
@media (max-width: 768px) {
    .qsd-enemy-card-body {
        flex-direction: column; /* 上下排：属性区在上，战斗增益在下 */
        gap: 6px;
    }
    /* 属性栏改回一行一属性（单列竖排）：用户要求不用 grid 2 列 */
    .qsd-enemy-attr-list {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
}

.qsd-enemy-attr-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-primary);
}

.qsd-enemy-attr-row img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.qsd-enemy-attr-label {
    min-width: 28px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-enemy-attr-row {
        font-size: 14px;
        gap: 8px;
    }
    .qsd-enemy-attr-row img {
        width: 20px;
        height: 20px;
    }
    .qsd-enemy-attr-label {
        min-width: 36px;
    }
}

.qsd-enemy-attr-val {
    font-weight: 600;
    margin-left: auto;
}

/* 右侧：敌人增益与减益信息 */
.qsd-enemy-buff-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border, #e5e7eb);
    padding-left: 8px;
    min-width: 0;
    overflow: hidden;
}

@media (min-width: 769px) {
    .qsd-enemy-buff-section {
        padding-left: 16px;
    }
}

/* 竖屏重构：战斗增益区在属性区下方，顶部横线分隔（无左侧竖线）——必须定义在 base 规则之后才生效 */
@media (max-width: 768px) {
    .qsd-enemy-buff-section {
        border-left: none;
        border-top: 1px solid var(--border, #e5e7eb);
        padding-left: 0;
        padding-top: 6px;
    }
}

/* 增益与减益标题 */
.qsd-enemy-buff-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 4px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-enemy-buff-title {
        font-size: 16px;
        margin-bottom: 8px;
    }
}

/* 增益与减益列表：优先竖向排列，高度不够则换列 */
.qsd-enemy-buff-list {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 2px 12px;
    flex: 1;
    overflow: hidden;
    align-content: flex-start;
}

@media (min-width: 769px) {
    .qsd-enemy-buff-list {
        gap: 4px 16px;
    }
}

/* 暴击属性行：可交互样式 */
.qsd-enemy-attr-crit {
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}

.qsd-enemy-attr-crit:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* 暴击tooltip：黑色背景白色字体 */
.qsd-enemy-crit-tooltip {
    position: fixed;
    z-index: 10000;
    background: #000000;
    color: #ffffff;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (min-width: 769px) {
    .qsd-enemy-crit-tooltip {
        font-size: 14px;
        padding: 8px 16px;
    }
}

/* ===== 角色配装详情网格（复刻线上平台：横屏2列，竖屏1列） ===== */
.qsd-char-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 769px) {
    .qsd-char-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* ===== 角色配装详情卡片 ===== */
.qsd-char-card {
    background: linear-gradient(to bottom right, rgba(30, 30, 50, 0.8), rgba(22, 33, 62, 0.8), rgba(30, 20, 40, 0.8));
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}

/* 亮色主题：角色卡片使用浅色渐变背景 */
body.light .qsd-char-card {
    background: linear-gradient(to bottom right, rgba(254, 252, 232, 0.8), rgba(249, 250, 251, 0.8), rgba(254, 242, 242, 0.8));
}

@media (min-width: 769px) {
    .qsd-char-card {
        padding: 16px;
        margin-bottom: 16px;
    }
}

/* 角色头部区域：上下两部分（上=图片名称+技能，下=信息行） */
.qsd-char-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    gap: 4px;
    position: relative;
    perspective: 1000px;
}

@media (min-width: 769px) {
    .qsd-char-header {
        margin-bottom: 16px;
        padding-bottom: 16px;
        gap: 16px;
    }
}

/* 左列：图片+名称 */
.qsd-char-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-char-left {
        width: 100px;
    }
}

/* 右列：勇士之魂/技能 + 信息行 */
.qsd-char-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

@media (min-width: 769px) {
    .qsd-char-right {
        gap: 8px;
    }
}

/* 翻转后（背面状态）：flexbox 自然按内容排列 */
/* 竖屏：正面内容高度不固定（67px~91px），背面需 84px（标题14 + 4项×16 + gap6）；
   翻转时撑高 header，让 back(height:100%) 装下标题+4行属性，避免背面内容溢出到卡片下方 */
@media (max-width: 768px) {
    .qsd-char-header.qsd-char-header-flipped {
        min-height: 92px; /* 竖屏翻转：容纳单次受伤标题+4行（84px）+ back padding-top 3px + 余量；避免底部大空白 */
    }
}

/* 角色头像+名称（在左列内） */
.qsd-char-avatar-wrap {
    position: relative;
    width: 36px;
    height: 36px;
    overflow: visible;
}

@media (min-width: 769px) {
    .qsd-char-avatar-wrap {
        width: 64px;
        height: 64px;
    }
}

.qsd-char-avatar {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
}

.qsd-char-elem {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 50%;
    height: 50%;
    pointer-events: none;
}

@media (min-width: 769px) {
    .qsd-char-elem {
        top: -4px;
        left: -4px;
        width: 50%;
        height: 50%;
    }
}

.qsd-char-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary, #374151);
    margin-top: 2px;
    text-align: center;
}

@media (min-width: 769px) {
    .qsd-char-name {
        font-size: 18px;
        margin-top: 4px;
    }
}

/* 角色信息（等级/阶数/种子/卡牌）- 下半部分信息行 */
.qsd-char-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--text-primary, #374151);
    flex-shrink: 0;
    padding-top: 4px;
    border-top: 1px dashed var(--border, #e5e7eb);
}

@media (min-width: 769px) {
    .qsd-char-info {
        gap: 16px;
        font-size: 14px;
    }
}

/* 英雄配置信息横向排布（下半部分信息行） */
.qsd-char-info-horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 10px;
    color: var(--text-primary, #374151);
    padding-top: 0;
    border-top: none;
}

@media (min-width: 769px) {
    .qsd-char-info-horizontal {
        gap: 16px;
        font-size: 14px;
    }
}

.qsd-char-info-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

@media (min-width: 769px) {
    .qsd-char-info-row {
        gap: 8px;
    }
}

.qsd-char-info-val {
    font-weight: 700;
}

/* 勇士之魂 */
.qsd-char-soul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    flex-shrink: 0;
}

/* 勇士之魂+技能区域（在右列内） */
.qsd-char-soul-skill {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    flex-shrink: 0;
    min-width: 0;
    overflow: hidden;
}

@media (min-width: 769px) {
    .qsd-char-soul-skill {
        gap: 8px;
    }
}

/* ===== 勇士卡片专用布局 ===== */
/* 竖屏：上半部分（图片名称+技能）横向排列，下半部分信息行 */
.qsd-char-header.qsd-char-header-warrior {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px;
}

.qsd-char-header.qsd-char-header-warrior > .qsd-char-left {
    grid-column: 1;
    grid-row: 1;
}

.qsd-char-header.qsd-char-header-warrior > .qsd-char-soul-skill {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: visible;
}

.qsd-char-header.qsd-char-header-warrior > .qsd-char-info {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 0;
    border-top: none;
}

/* 横屏：三列布局（图片名称 | 信息行纵向排列 | 技能占满剩余宽度） */
@media (min-width: 769px) {
    .qsd-char-header.qsd-char-header-warrior {
        grid-template-columns: auto auto 1fr;
        grid-template-rows: auto;
        gap: 16px;
    }

    .qsd-char-header.qsd-char-header-warrior > .qsd-char-left {
        grid-column: 1;
        grid-row: 1;
    }

    .qsd-char-header.qsd-char-header-warrior > .qsd-char-info {
        grid-column: 2;
        grid-row: 1;
        padding-top: 0;
        border-top: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 2px;
        align-self: center;
    }

    .qsd-char-header.qsd-char-header-warrior > .qsd-char-soul-skill {
        grid-column: 3;
        grid-row: 1;
        width: 100%;
    }

    .qsd-char-header.qsd-char-header-warrior > .qsd-char-soul-skill > .qsd-char-soul {
        width: 100%;
    }

    .qsd-char-header.qsd-char-header-warrior > .qsd-char-soul-skill > .qsd-char-skills {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .qsd-char-soul {
        gap: 8px;
        font-size: 14px;
    }
}

.qsd-char-soul-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    margin-left: 4px;
}

.qsd-char-soul-toggle .soul-bg,
.qsd-char-soul-toggle .soul-check {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

@media (min-width: 769px) {
    .qsd-char-soul-toggle {
        width: 20px;
        height: 20px;
    }
}

/* 属性区域网格（5列：属性2列 + 装备3列） */
.qsd-char-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

@media (min-width: 769px) {
    .qsd-char-stats-grid {
        grid-template-columns: 2fr 3fr;
        gap: 16px;
    }
}

.qsd-char-equip-col {
    /* 装备区域 - 垂直居中（复刻配装模拟弹窗 sim-col-equip 布局） */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

/* 技能区域 - 在右列内 */
.qsd-char-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

@media (min-width: 769px) {
    .qsd-char-right-col {
        gap: 8px;
    }
}

.qsd-char-right-col .qsd-char-skills {
    margin-left: 0;
    justify-content: flex-start;
}

.qsd-char-skills {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-char-skills {
        gap: 4px;
    }
}

.qsd-char-skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.qsd-char-skill-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.qsd-char-skill-icon {
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 3px;
}

@media (min-width: 769px) {
    .qsd-char-skill-icon-wrap {
        width: 56px;
        height: 56px;
    }

    .qsd-char-skill-icon {
        width: 56px;
        height: 56px;
        border-radius: 4px;
    }
}

/* 技能等级角标（参考英雄屏障模拟弹窗，定位在图标内部） */
.qsd-char-skill-badge {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    display: block;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

@media (min-width: 769px) {
    .qsd-char-skill-badge {
        width: 16px;
        height: 16px;
        bottom: 2px;
        right: 2px;
    }
}

/* 技能名称文本（图标下方） */
.qsd-char-skill-name-text {
    font-size: 7px;
    text-align: center;
    color: var(--text-secondary, #666);
    line-height: 1.2;
    max-width: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .qsd-char-skill-name-text {
        font-size: 10px;
        max-width: 64px;
    }
}

body:not(.light) .qsd-char-skill-name-text {
    color: rgba(255,255,255,0.7);
}

/* 锁定状态（等级不够）：置灰，参考英雄配装模拟弹窗 */
.qsd-char-skill-locked .qsd-char-skill-icon-wrap,
.qsd-char-skill-locked .qsd-char-skill-icon {
    opacity: 0.45;
}

.qsd-char-skill-locked .qsd-char-skill-name-text {
    color: var(--text-secondary, #9ca3af);
}

/* 未选择状态 */
.qsd-char-skill-empty .qsd-char-skill-icon {
    opacity: 0.5;
}

/* 勇士技能区域中的技能图标缩小 */
.qsd-char-soul-skill .qsd-char-skill-icon {
    width: 24px;
    height: 24px;
}

.qsd-char-soul-skill .qsd-char-skill-name {
    font-size: 11px;
}

.qsd-char-soul-skill .qsd-char-skill-desc {
    font-size: 9px;
}

@media (min-width: 769px) {
    .qsd-char-soul-skill .qsd-char-skill-icon {
        width: 40px;
        height: 40px;
    }

    .qsd-char-soul-skill .qsd-char-skill-name {
        font-size: 14px;
    }

    .qsd-char-soul-skill .qsd-char-skill-desc {
        font-size: 12px;
    }
}

/* 勇士技能（图标+名称+描述，与勇士之魂一样左对齐） */
.qsd-char-skill-warrior {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 4px;
    width: 100%;
}

.qsd-char-skill-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.qsd-char-skill-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.qsd-char-skill-desc {
    font-size: 10px;
    color: var(--text-secondary, #666);
    line-height: 1.3;
    word-break: break-all;
    white-space: normal;
    overflow-wrap: break-word;
}

@media (min-width: 769px) {
    .qsd-char-skill-warrior {
        gap: 12px;
        padding: 8px;
    }

    .qsd-char-skill-name {
        font-size: 16px;
    }

    .qsd-char-skill-desc {
        font-size: 14px;
    }
}

body:not(.light) .qsd-char-skill-name {
    color: #fff;
}

body:not(.light) .qsd-char-skill-desc {
    color: rgba(255,255,255,0.7);
}

/* 装备区域 - CSS Grid（复刻线上平台） */
.qsd-char-equip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

/* 根据槽位数量调整列数 */
.qsd-char-equip-grid.slots-1 { grid-template-columns: repeat(1, 1fr); }
.qsd-char-equip-grid.slots-2 { grid-template-columns: repeat(2, 1fr); }
.qsd-char-equip-grid.slots-3 { grid-template-columns: repeat(3, 1fr); }
.qsd-char-equip-grid.slots-4 { grid-template-columns: repeat(4, 1fr); }
.qsd-char-equip-grid.slots-5 { grid-template-columns: repeat(5, 1fr); }
.qsd-char-equip-grid.slots-6 { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 769px) {
    .qsd-char-equip-grid {
        gap: 20px;
    }
    .qsd-char-equip-grid.slots-4 { grid-template-columns: repeat(4, 1fr); }
    .qsd-char-equip-grid.slots-5 { grid-template-columns: repeat(5, 1fr); }
    .qsd-char-equip-grid.slots-6 { grid-template-columns: repeat(3, 1fr); }
}

/* 装备槽位：与配装模拟 sim-equip-slot 一致的百分比布局 */
.qsd-char-equip-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: visible;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
}

@media (min-width: 769px) {
    .qsd-char-equip-slot {
        margin-left: 4px;
        margin-right: 4px;
    }
}

/* 装备背景：80%大小居中（与配装模拟 sim-equip-slot-bg 一致） */
.qsd-char-equip-bg {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    object-fit: contain;
    border-radius: 12px;
    pointer-events: none;
    display: block;
    transition: transform 0.3s ease;
}

/* 装备品质光晕（复刻配装模拟 sim-slot-glow） */
.qsd-char-equip-glow {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

/* 品质特效 - 顺时针旋转光效层（复刻配装模拟 sim-slot-light） */
.qsd-char-equip-light {
    position: absolute;
    top: 12%;
    left: 12%;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: qsd-slot-spin 16s linear 0s infinite normal none running;
}

/* 品质特效 - 逆时针旋转光效层（复刻配装模拟 sim-slot-light-reverse） */
.qsd-char-equip-light-reverse {
    position: absolute;
    top: 12%;
    left: 12%;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: qsd-slot-spin 16s linear 0s infinite reverse none running;
}

@keyframes qsd-slot-spin {
    100% { transform: rotate(360deg); }
}

/* 装备图标：64%大小，在背景内居中（与配装模拟 sim-equip-slot-equip 一致） */
.qsd-char-equip-icon {
    position: absolute;
    top: 18%;
    left: 18%;
    width: 64%;
    height: 64%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    z-index: 3;
}

/* 装备阶数徽章（左上角，百分比定位，与配装模拟 sim-slot-tier-badge 一致） */
.qsd-char-equip-rank {
    position: absolute;
    top: 4%;
    left: 4%;
    width: 20%;
    height: 20%;
    background-image: url('图标/背景/阶级.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.qsd-char-equip-rank span {
    font-size: 8px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 4px #000, 0 0 2px #000, 1px 1px 0 #000;
    line-height: 1;
}

@media (min-width: 769px) {
    .qsd-char-equip-rank span {
        font-size: 14px;
    }
}

/* 超越图标（右下角，20%宽高=背景25%，与配装模拟 sim-slot-transcend 一致） */
.qsd-char-equip-transcend {
    position: absolute;
    bottom: 4%;
    right: 4%;
    width: 20%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.qsd-char-equip-transcend img,
.qsd-char-equip-transcend svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 附魔图标 - 百分比定位（与配装模拟 sim-slot-corner-icon 一致） */
.qsd-char-equip-enchant {
    position: absolute;
    right: 4%;
    width: 20%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
}

.qsd-char-equip-enchant img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 元素附魔 - 右上角（固定位置1） */
.qsd-char-equip-enchant-elem {
    top: 4%;
}

/* 精萃附魔 - 元素附魔下方（固定位置2） */
.qsd-char-equip-enchant-essence {
    top: 24%;
}

/* 神器图纸 - 精萃附魔下方（固定位置3） */
.qsd-char-equip-artifact {
    top: 44%;
}

/* 空槽位类型图标（复刻线上平台空装备槽样式） */
.qsd-char-equip-type-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: 80%;
    height: 80%;
    z-index: 1;
    pointer-events: none;
}

.qsd-char-equip-type-icon {
    max-width: 60%;
    max-height: 60%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.6;
}

@media (min-width: 769px) {
    .qsd-char-equip-type-icons {
        gap: 2px;
    }
    .qsd-char-equip-type-icon {
        max-width: 50%;
        max-height: 50%;
    }
}

/* 属性条容器 - 竖屏2列网格（复刻线上平台） */
.qsd-char-stats-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    align-self: start;
}

/* 首回合属性列与常规属性列共享相同布局 */
.qsd-char-stats-col-firstround {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    align-self: start;
}

@media (min-width: 769px) {
    .qsd-char-stats-col {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .qsd-char-stats-col-firstround {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
}

/* 属性条（图标+名称+数值，复刻线上平台样式） */
.qsd-stat-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-size: 9px;
    background: rgba(255, 255, 255, 0.9);
}

/* 元素属性栏中的职业元素图标 */
.qsd-stat-bar-elem-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    object-fit: contain;
}

@media (min-width: 769px) {
    .qsd-stat-bar-elem-icon {
        width: 20px;
        height: 20px;
    }
}

@media (min-width: 769px) {
    .qsd-stat-bar {
        gap: 8px;
        padding: 4px 12px;
        font-size: 14px;
    }
}

.qsd-stat-bar-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-stat-bar-icon {
        width: 24px;
        height: 24px;
    }
}

.qsd-stat-bar-label {
    font-weight: 900;
    font-size: 10px;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
}

@media (min-width: 769px) {
    .qsd-stat-bar-label {
        font-size: 14px;
    }
}

/* 属性名称颜色（复刻线上平台） */
.qsd-stat-bar-label-生命 { color: rgb(255, 186, 224); }
.qsd-stat-bar-label-攻击 { color: rgb(255, 148, 148); }
.qsd-stat-bar-label-暴击 { color: rgb(255, 240, 154); }
.qsd-stat-bar-label-防御 { color: rgb(166, 222, 255); }
.qsd-stat-bar-label-减伤系数 { color: rgb(166, 222, 255); }
.qsd-stat-bar-label-回避 { color: rgb(153, 255, 153); }
.qsd-stat-bar-label-威胁 { color: rgb(255, 200, 98); }
.qsd-stat-bar-label-护盾 { color: #2ed3d3; }
/* 元素颜色根据元素类型动态设置（与配装模拟elementColorMap一致） */
.qsd-stat-bar-label-元素.qsd-elem-光明 { color: #ffd700; }
.qsd-stat-bar-label-元素.qsd-elem-黑暗 { color: #a855f7; }
.qsd-stat-bar-label-元素.qsd-elem-火 { color: #ef4444; }
.qsd-stat-bar-label-元素.qsd-elem-水 { color: #3b82f6; }
.qsd-stat-bar-label-元素.qsd-elem-气 { color: #38bdf8; }
.qsd-stat-bar-label-元素.qsd-elem-土 { color: #22c55e; }
.qsd-stat-bar-label-元素.qsd-elem-黄金 { color: #fbbf24; }
.qsd-stat-bar-label-元素.qsd-elem-全部 { color: #c0c0ff; }
/* 敌人战斗数值属性标签颜色（复用对应属性颜色，/需转义） */
.qsd-stat-bar-label-生命\/减伤 { color: rgb(255, 186, 224); }
.qsd-stat-bar-label-单体攻击 { color: rgb(255, 148, 148); }
.qsd-stat-bar-label-单体暴击 { color: rgb(255, 240, 154); }
.qsd-stat-bar-label-群攻\/几率 { color: #fff; }
.qsd-stat-bar-label-生命恢复 { color: rgb(120, 255, 180); }
.qsd-stat-bar-label-恢复 { color: rgb(120, 255, 180); }

/* 层数基础属性增益标注（红色） */
.floor-bonus-pct {
    color: #ff4444;
    font-weight: 700;
}

.qsd-stat-bar-val {
    margin-left: auto;
    font-weight: 700;
    font-size: 10px;
    color: #000;
}

@media (min-width: 769px) {
    .qsd-stat-bar-val {
        font-size: 16px;
    }
}

/* 暗色模式：属性条使用暗色样式（与配装模拟一致） */
body:not(.light) .qsd-stat-bar {
    background: rgba(30, 30, 50, 0.6);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

body:not(.light) .qsd-stat-bar-val {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9), -1px -1px 1px rgba(0,0,0,0.9),
                 1px -1px 1px rgba(0,0,0,0.9), -1px 1px 1px rgba(0,0,0,0.9),
                 0 0 3px rgba(0,0,0,0.6);
}

/* 弹窗内容区间距（复刻线上平台 space-y-3 md:space-y-6） */
.quest-sim-detail > * + * {
    margin-top: 12px;
}

@media (min-width: 769px) {
    .quest-sim-detail > * + * {
        margin-top: 24px;
    }
}

/* 添加任务按钮 */
.quest-add-task-btn {
    width: calc((100% - 36px) / 4);
    height: 300px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
}

.quest-add-task-btn:hover {
    border-color: var(--accent-light);
    color: var(--accent-light);
    background: rgba(99, 102, 241, 0.05);
}

.quest-add-icon {
    font-size: 24px;
    line-height: 1;
}

.quest-add-text {
    font-size: 13px;
}

/* ===== 弹窗中的选择器样式 ===== */
.quest-hero-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}

.quest-hero-picker-section-title {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 0;
    margin-top: 4px;
}

.quest-hero-pick-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
    width: 72px;
}

.quest-hero-pick-item:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: #6366f1;
}

/* 禁用状态（任务已有勇士时） */
.quest-hero-pick-item.quest-hero-pick-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.quest-hero-pick-item.quest-hero-pick-disabled:hover {
    background: transparent;
    border-color: var(--border);
}

.quest-hero-pick-img-wrap {
    position: relative;
    display: inline-block;
}

.quest-hero-pick-img-wrap > img:not(.quest-hero-pick-elem) {
    width: 48px;
    height: 48px;
    border-radius: 6px;
}

/* 元素图标（左上角，80%在角色图片内，20%在外） */
.quest-hero-pick-img-wrap > .quest-hero-pick-elem {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 24px;  /* 横屏：角色图片48px的1/2 */
    height: 24px; /* 横屏：角色图片48px的1/2 */
    border-radius: 0;
    pointer-events: none;
    z-index: 1;
}

.quest-hero-pick-name {
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.2;
}

.quest-hero-pick-class {
    font-size: 10px;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.2;
}

.quest-hero-picker-divider {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* 地图选择器 */
.quest-map-picker {
    padding: 0;
    width: 100%;
}

/* 冒险选择弹窗使用宽版（复刻线上平台 max-w-7xl） */
#questDynamicModal .modal {
    width: 1280px;
    max-width: 95vw;
    max-height: 90vh;
    padding: 24px;
}

#questDynamicModal .modal-body {
    padding: 0;
    align-items: stretch;
    overflow-y: auto;
}

#questDynamicModal .modal-header {
    padding: 0;
    border-bottom: none;
    margin-bottom: 16px;
}

#questDynamicModal .modal-title {
    font-size: 24px;
    font-weight: 700;
    color: rgb(67, 56, 202);
    flex: 1;
    text-align: center;
    line-height: 1.3;
}
/* 竖屏：缩小弹窗标题（24px → 16px），适配竖屏模式 */
@media (max-width: 768px) {
    #questDynamicModal .modal-title {
        font-size: 16px;
    }
    /* 竖屏冒险模拟详情弹窗（有切换按钮）：顶部上下排布局（标题→左按钮→右按钮），居中 */
    /* 仅 :has(.quest-modal-header-left) 限定——其他弹窗（如选择冒险任务）保持 row 布局（关闭按钮在右上角） */
    #questDynamicModal .modal-header:has(.quest-modal-header-left) {
        flex-direction: column; /* 上下排 */
        align-items: center;    /* 水平居中 */
        justify-content: center;
        gap: 4px;
        margin-bottom: 8px;
    }
    #questDynamicModal .modal-header:has(.quest-modal-header-left) .modal-title {
        flex: none;             /* column 下不占满剩余空间 */
        order: 1;               /* 第一行：标题 */
        width: 100%;            /* 占满整行居中 */
    }
    #questDynamicModal .modal-header:has(.quest-modal-header-left) .quest-modal-header-left {
        order: 2;               /* 第二行：左侧按钮 */
    }
    #questDynamicModal .modal-header:has(.quest-modal-header-left) .quest-modal-header-controls {
        order: 3;               /* 第三行：右侧按钮 */
    }
}

/* 动态弹窗头部控件容器 */
/* 冒险模拟详情弹窗：头部左侧按钮容器（切换按钮移到此，关闭按钮保留右侧） */
.quest-modal-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.quest-modal-header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 竖屏：词条选择弹窗关闭按钮固定在右上角（不影响其他弹窗） */
@media (max-width: 768px) {
    #questDynamicModal.muxue-entry-picker .modal-header {
        position: relative;
    }
    #questDynamicModal.muxue-entry-picker .quest-modal-header-controls {
        position: absolute;
        top: 0;
        right: 16px;
    }
}

/* 成员选择开关容器（标签+滑动开关） */
.quest-member-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quest-member-toggle-label {
    font-size: 14px;
    color: var(--text-primary);
    user-select: none;
    white-space: nowrap;
}

/* iOS风格滑动开关 */
.quest-member-switch {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: #ccc;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.quest-member-switch.active {
    background: #7c6ce4;
}

.quest-member-switch-knob {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.quest-member-switch.active .quest-member-switch-knob {
    left: 22px;
}

/* 关闭按钮（红底白字，复刻线上平台 w-5 h-5 md:w-6 md:h-6） */
.quest-modal-close-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .quest-modal-close-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

.quest-modal-close-btn:hover {
    background: #dc2626;
}

/* 关闭按钮文字版（冒险模拟详情弹窗）——与其他操作按钮（导出图片/切换按钮）统一尺寸 */
.quest-modal-close-btn.quest-modal-close-text {
    width: auto;
    height: auto;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: normal;
}

/* 冒险模拟详情弹窗切换按钮（冒险配置与属性 / 战斗增益与减益） */
.qsd-view-toggle-btn {
    padding: 6px 14px;       /* 与导出图片/关闭按钮统一 padding（修复按钮大小不一致） */
    border: none;
    border-radius: 8px;      /* 与导出按钮一致 */
    background: #6366f1;
    color: #fff;
    font-size: 13px;         /* 与导出按钮统一字体 */
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.qsd-view-toggle-btn.active {
    background: #7c3aed;
}

@media (min-width: 769px) {
    .qsd-view-toggle-btn {
        padding: 6px 16px;
        font-size: 14px;
    }
}

/* 敌人常规/首回合属性切换按钮（头部样式） */
.qsd-enemy-attr-toggle-btn-header {
    color: #fff;
    border: none;
    font-weight: 600;
}
/* 常规属性模式：绿色背景 */
.qsd-enemy-attr-toggle-btn-header.mode-normal {
    background: #16a34a;
}
.qsd-enemy-attr-toggle-btn-header.mode-normal:hover {
    background: #15803d;
}
/* 首回合属性模式：橙色背景 */
.qsd-enemy-attr-toggle-btn-header.mode-firstround {
    background: #ea580c;
}
.qsd-enemy-attr-toggle-btn-header.mode-firstround:hover {
    background: #c2410c;
}

/* 冒险模拟详情弹窗：装备属性展示层（对齐配装模拟 sim-slot-attr-overlay：覆盖在背景图区域上） */
.qsd-char-equip-slot .qsd-slot-attr-overlay {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    border-radius: 12px;
    /* 半透明深色底，保证白色属性文字在任意背景（含浅色装备背景）上都清晰可读 */
    background: rgba(0, 0, 0, 0.42);
}

.qsd-slot-attr-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 100%;
}

.qsd-slot-attr-row {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 8px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    /* 与配装模拟 sim-slot-attr-row 对齐：黑色描边阴影，避免白字在浅色背景上被吞没 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.qsd-slot-attr-row img {
    width: 10px;
    height: 10px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 769px) {
    .qsd-slot-attr-row {
        font-size: 12px;
        gap: 4px;
    }
    .qsd-slot-attr-row img {
        width: 16px;
        height: 16px;
    }
}

/* 冒险模拟详情弹窗：角色卡片头部上下翻转（战斗增益与减益） */
.qsd-char-header > *:not(.qsd-char-header-back) {
    transition: opacity 0.15s ease, transform 0.5s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.qsd-char-header.qsd-char-header-flipped > *:not(.qsd-char-header-back) {
    transform: rotateX(180deg);
    opacity: 0;
}

.qsd-char-header-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 3px 0 0 0;
    opacity: 0;
    transform: rotateX(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-sizing: border-box;
    z-index: 10;
}

.qsd-char-header.qsd-char-header-flipped .qsd-char-header-back {
    pointer-events: auto;
    transform: rotateX(0deg);
}

/* 翻转背面布局：左侧单次受伤数据 + 分界线 + 右侧战斗增益与减益（占剩余宽度） */
/* 用 flexbox 替代 grid：避免 grid auto-row 的 baseline 对齐引入空白 */
.qsd-char-header-back-layout {
    display: flex;
    flex-direction: row; /* 横竖屏均左右排：用户要求【单次受伤】和【战斗增益与减益】左右排布（与横屏一致） */
    align-items: flex-start;
    width: 100%;
    height: auto;
    gap: 4px;
    overflow: visible;
}
@media (min-width: 769px) {
    .qsd-char-header-back-layout {
        gap: 8px;
    }
}

.qsd-char-header-back-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}
/* 横屏：左列内容自适应宽度靠左（单次受伤数据），右列 flex:1 占满剩余宽度（战斗增益与减益） */
@media (min-width: 769px) {
    .qsd-char-header-back-left {
        max-width: 45%;
        flex: 0 0 auto; /* 横屏：左列内容自适应宽度 */
    }
    .qsd-char-header-back-right {
        flex: 1; /* 横屏：占满剩余宽度 */
    }
}
/* 单次受伤数据标题行：头像+标题横向排布 */
.qsd-char-header-back-left-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    flex-shrink: 0;
    white-space: nowrap;
}
/* 标题左侧角色头像：大小同标题文字高度 */
.qsd-char-header-back-avatar {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    object-fit: cover;
    flex-shrink: 0;
    display: block;
}
@media (min-width: 769px) {
    .qsd-char-header-back-avatar {
        width: 16px;
        height: 16px;
    }
}
.qsd-char-header-back-left-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    color: var(--text-primary);
    text-align: center;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0;
    margin-bottom: 0;
}

@media (min-width: 769px) {
    .qsd-char-header-back-left-title {
        font-size: 14px;
        padding: 0;
    }
}

.qsd-char-header-back-divider {
    width: 1px; /* 横竖屏统一：1px 竖线分隔（竖屏 flex row 下 width:100% 会占满主轴挤压左右列，改为竖线） */
    height: auto;
    background: var(--border, #e5e7eb);
    flex-shrink: 0;
    align-self: stretch; /* 竖线拉伸到容器高度（可见分隔线） */
}
@media (min-width: 769px) {
    .qsd-char-header-back-divider {
        width: 1px;
        height: auto;
        align-self: stretch; /* 横屏：竖线拉伸到容器高度 */
        max-width: none;
    }
}

.qsd-char-header-back-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    flex: 1; /* 横屏时占满剩余宽度（flex:1） */
}

.qsd-char-header-back-title {
    font-size: 9px;
    font-weight: 900;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 0;
    width: 100%;
}

@media (min-width: 769px) {
    .qsd-char-header-back-title {
        font-size: 14px;
        margin-bottom: 0;
    }
}

.qsd-char-header-back-list {
    display: grid;
    /* 每列最多 4 个属性，超出时自动在右侧新建一列（grid-auto-flow: column） */
    grid-template-rows: repeat(4, min-content);
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 2px 12px; /* 行间距2px，列间距12px */
    align-content: start;
    justify-content: start;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* 单次受伤数值列表（整体收缩到最宽项宽度后居中，使点左对齐） */
.qsd-single-dmg-list {
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start; /* 靠左（单次受伤数据整体靠左，给右侧战斗增益与减益留宽度） */
    gap: 2px;
}
/* 单次受伤数据：标签维持原色+黑色描边，数值亮色黑/暗色白 */
.qsd-dmg-label-受伤概率 { color: rgb(255, 200, 98); text-shadow: 0.5px 0.5px 0 #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000; }
.qsd-dmg-label-单体伤害 { color: rgb(255, 148, 148); text-shadow: 0.5px 0.5px 0 #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000; }
.qsd-dmg-label-暴击伤害 { color: rgb(255, 240, 154); text-shadow: 0.5px 0.5px 0 #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000; }
.qsd-dmg-label-群体伤害 { color: #fff; text-shadow: 0.5px 0.5px 0 #000, -0.5px -0.5px 0 #000, 0.5px -0.5px 0 #000, -0.5px 0.5px 0 #000; }
/* 数值颜色：亮色主题黑色，暗色主题白色 */
body.light .qsd-dmg-value { color: #000; }
body:not(.light) .qsd-dmg-value { color: #fff; }
/* 标签与数值间距5px */
.qsd-dmg-label { margin-right: 5px; }

/* 单次受伤数据列表项：字体大小与战斗增益与减益一致，宽度跟随最宽项（inline-flex默认stretch） */
.qsd-single-dmg-list .muxue-entry-summary-item {
    font-size: 9px;
    line-height: 1.4;
}
@media (min-width: 769px) {
    .qsd-single-dmg-list .muxue-entry-summary-item {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* 战斗增益与减益列表项：字体大小与属性栏一致 */
.qsd-char-header-back-list .muxue-entry-summary-item {
    font-size: 9px;
    line-height: 1.4;
}
@media (min-width: 769px) {
    .qsd-char-header-back-list .muxue-entry-summary-item {
        font-size: 14px;
        line-height: 1.4;
    }
}

.quest-map-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary, #fff);
}

.quest-map-tab {
    padding: 4px 8px;
    border-radius: 8px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

@media (min-width: 768px) {
    .quest-map-tab {
        padding: 8px 16px;
        font-size: 16px;
    }
}

.quest-map-tab:hover {
    background: rgba(99, 102, 241, 0.15);
}

.quest-map-tab.active {
    background: var(--accent);
    color: #fff;
}

/* 网格布局（复刻线上平台：4列→6列→8列→10列） */
.quest-map-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0;
}

@media (min-width: 768px) {
    .quest-map-list {
        grid-template-columns: repeat(6, 1fr);
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .quest-map-list {
        grid-template-columns: repeat(8, 1fr);
    }
}

@media (min-width: 1280px) {
    .quest-map-list {
        grid-template-columns: repeat(10, 1fr);
    }
}

.quest-map-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 6px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.2s;
}

.quest-map-item:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

.quest-map-item img {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .quest-map-item {
        padding: 12px;
    }
    .quest-map-item img {
        width: 64px;
        height: 64px;
        margin-bottom: 8px;
    }
}

.quest-map-item span {
    font-size: 9px;
    color: var(--text-primary);
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .quest-map-item span {
        font-size: 12px;
    }
}

/* 难度选择器 */
.quest-difficulty-picker {
    padding: 0;
    width: 100%;
}

.quest-difficulty-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 0;
    border-bottom: none;
}

@media (min-width: 768px) {
    .quest-difficulty-header {
        gap: 16px;
        margin-bottom: 16px;
    }
}

.quest-difficulty-back {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

@media (min-width: 768px) {
    .quest-difficulty-back {
        font-size: 16px;
        padding: 8px 16px;
    }
}

.quest-difficulty-back:hover {
    background: var(--bg-card-hover);
}

.quest-difficulty-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .quest-difficulty-header-icon {
        width: 48px;
        height: 48px;
    }
}

.quest-difficulty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

@media (min-width: 768px) {
    .quest-difficulty-title {
        font-size: 18px;
    }
}

/* 难度列表网格（复刻线上平台：4列→6列→8列→12列） */
.quest-difficulty-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0;
}

@media (min-width: 640px) {
    .quest-difficulty-list {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 768px) {
    .quest-difficulty-list {
        grid-template-columns: repeat(8, 1fr);
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .quest-difficulty-list {
        grid-template-columns: repeat(12, 1fr);
    }
}

.quest-difficulty-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
}

@media (min-width: 768px) {
    .quest-difficulty-item {
        padding: 12px;
    }
}

.quest-difficulty-item:hover {
    border-color: #d1d5db;
}

.quest-difficulty-item img {
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .quest-difficulty-item img {
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
    }
}

.quest-difficulty-item span {
    font-size: 10px;
    color: var(--text-primary);
    text-align: center;
    font-weight: 500;
}

@media (min-width: 768px) {
    .quest-difficulty-item span {
        font-size: 12px;
    }
}

/* 泰坦塔难度选择卡片（完全复刻线上平台布局） */
/* 线上平台：border-2 border-gray-200 rounded-lg p-2 md:p-3 flex flex-col items-center */
.quest-difficulty-item-titan {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px;
    overflow: hidden;
    background: transparent;
}

@media (min-width: 768px) {
    .quest-difficulty-item-titan {
        padding: 12px;
    }
}

.quest-difficulty-titan-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* 泰坦难度图标：线上平台同款堆叠方式 */
/* 线上平台：relative flex items-center justify-center mb-1 md:mb-2 */
/* 背景图absolute + 图标relative z-10，两者同尺寸 w-8 h-8 md:w-12 md:h-12 */
.quest-difficulty-titan-imgwrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 4px;
    line-height: 0;
}

.quest-difficulty-titan-bgimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    display: block;
}

.quest-difficulty-item-titan .quest-difficulty-titan-icon {
    position: relative;
    z-index: 10;
    width: 32px;
    height: 32px;
    display: block;
    margin: 0;
}

.quest-difficulty-titan-label {
    font-size: 10px;
    color: var(--text-primary);
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .quest-difficulty-titan-imgwrap {
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
    }

    .quest-difficulty-titan-bgimg {
        width: 48px;
        height: 48px;
    }

    .quest-difficulty-item-titan .quest-difficulty-titan-icon {
        width: 48px;
        height: 48px;
        margin: 0;
    }

    .quest-difficulty-titan-label {
        font-size: 12px;
    }
}

/* 道具/精英怪/屏障选择器 */
.quest-item-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
}

/* 下拉菜单 */
.quest-dropdown-wrap {
    position: relative;
    display: inline-block;
}

.quest-dropdown-arrow {
    font-size: 10px;
    margin-left: 2px;
    opacity: 0.6;
}

.quest-dropdown-menu {
    display: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    padding: 4px;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    box-sizing: border-box;
}

.quest-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary);
    transition: background 0.15s;
    white-space: nowrap;
}

.quest-dropdown-item:hover {
    background: rgba(99, 102, 241, 0.1);
}

.quest-dropdown-item-active {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
    font-weight: 600;
}

.quest-dropdown-item-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* 被无效化器禁用的元素屏障选项（置灰） */
.quest-dropdown-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.quest-dropdown-item-disabled:hover {
    background: transparent;
}

/* 下拉菜单按钮中的元素图标 */
.quest-dropdown-btn-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 2px;
}

/* 无屏障状态：绿色"已破盾"文字 */
.quest-task-barrier-display.no-barrier .quest-task-barrier-val {
    color: #10b981;
    font-weight: bold;
    font-size: 12px;
}

/* 强化道具弹窗（复刻线上平台样式） */
/* 泰坦之墓词条选择弹窗 */
.muxue-entry-picker {
    width: 100%;
    padding: 0 16px;
}

/* 清空选择按钮（橙色背景） */
.muxue-entry-clear-btn {
    padding: 4px 16px;
    border: none;
    border-radius: 6px;
    background: #f97316;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.muxue-entry-clear-btn:hover {
    background: #ea580c;
}

/* 横屏：隐藏内容区的竖屏清空按钮 */
@media (min-width: 769px) {
    .muxue-entry-clear-btn-portrait {
        display: none !important;
    }
}

/* 竖屏：隐藏头部的清空按钮（非portrait类的） */
@media (max-width: 768px) {
    .quest-modal-header-controls .muxue-entry-clear-btn:not(.muxue-entry-clear-btn-portrait) {
        display: none !important;
    }
    /* 竖屏：内容区内的清空按钮，尺寸更适合竖屏 */
    .muxue-entry-clear-btn-portrait {
        padding: 3px 10px;
        font-size: 11px;
        border-radius: 5px;
    }
}

/* 横屏：即使宽度≤768px也使用宽版词条选择弹窗，避免手机横屏时变成竖屏窄布局 */
@media (max-width: 768px) and (orientation: landscape) {
    #questDynamicModal.muxue-entry-picker .modal {
        width: 90vw;
        max-width: 900px;
    }
    #questDynamicModal.muxue-entry-picker .modal-header {
        position: relative;
    }
    #questDynamicModal.muxue-entry-picker .quest-modal-header-controls {
        position: static;
    }
    #questDynamicModal.muxue-entry-picker .muxue-entry-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}
/* 强制横屏（参考英雄体系搭配平台）：移动端刷新后首次打开时 orientation 媒体查询可能尚未生效，
   导致【包含词条】弹窗在横屏下仍按竖屏窄布局渲染。改为由 JS 在打开时同步判定横屏并加此 class，
   保证首开即为宽版横屏布局，且无需等待媒体查询生效。 */
#questDynamicModal.muxue-entry-picker.muxue-entry-picker-land .modal {
    width: 90vw;
    max-width: 900px;
}
#questDynamicModal.muxue-entry-picker.muxue-entry-picker-land .modal-header {
    position: relative;
}
#questDynamicModal.muxue-entry-picker.muxue-entry-picker-land .quest-modal-header-controls {
    position: static;
}
#questDynamicModal.muxue-entry-picker.muxue-entry-picker-land .muxue-entry-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* 已选词条合计效果：冻结在顶部（sticky） */
.muxue-entry-summary {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

/* 合计效果标题行：标题在左，清空按钮在右 */
.muxue-entry-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.muxue-entry-summary-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0;
    flex: 1;
}

.muxue-entry-summary-item {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 暗色主题：已选词条合计效果 + 敌人战斗增益与减益属性文本白色 */
body:not(.light) .muxue-entry-summary-item {
    color: #fff;
}

.muxue-entry-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.muxue-entry-summary-text {
    white-space: nowrap;
}

.muxue-entry-summary-attr-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 词条悬停浮动tooltip（使用position:fixed，不受overflow影响） */
.muxue-entry-floating-tooltip {
    position: fixed;
    z-index: 10000;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    max-width: 280px;
}

.muxue-entry-floating-inner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.muxue-entry-floating-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}

.muxue-entry-floating-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.muxue-entry-floating-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.muxue-entry-floating-effects {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.muxue-entry-tooltip-effect {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
    white-space: nowrap;
}

.muxue-entry-tooltip-attr-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

.muxue-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.muxue-entry-card {
    position: relative;
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-secondary);
}

.muxue-entry-card:hover:not(.disabled) {
    border-color: #93c5fd;
}

.muxue-entry-card.selected {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.muxue-entry-card.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.muxue-entry-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-bottom: 4px;
}

.muxue-entry-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.muxue-entry-desc {
    font-size: 10px;
    color: var(--text-secondary);
    line-height: 1.3;
    text-align: center;
    padding: 0 2px;
}

.muxue-entry-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 无效化器选中后的元素图片勾选标记 */
.muxue-entry-check-elem {
    background: transparent;
    overflow: hidden;
}

.muxue-entry-check-elem img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* 无效化器元素选择叠加层（在词条弹窗上层显示） */
.nullifier-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
}

.nullifier-overlay.active {
    display: flex;
}

.nullifier-overlay-modal {
    background: var(--bg-secondary, #1a1f3a);
    border-radius: 12px;
    padding: 24px;
    width: fit-content;
    max-width: 95vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.nullifier-overlay-header {
    position: relative;
    text-align: center;
    margin-bottom: 16px;
}

.nullifier-overlay-title {
    font-size: 20px;
    font-weight: 700;
    color: rgb(67, 56, 202);
}

.nullifier-overlay-close {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-secondary, #999);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.nullifier-overlay-close:hover {
    color: #ef4444;
}

.nullifier-overlay-body {
    /* 内容由 .nullifier-picker 控制 */
}

.nullifier-picker {
    padding: 16px;
}

.nullifier-picker-hint {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.nullifier-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 360px;
    margin: 0 auto;
}

.nullifier-element-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    border-radius: 10px;
    border: 2px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.nullifier-element-card:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}

.nullifier-element-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.nullifier-element-name {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

.muxue-entry-footer {
    margin-top: 12px;
    padding: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 8px;
}

.quest-booster-popup {
    padding: 4px 0;
    width: 100%;
}

.quest-booster-category {
    margin-bottom: 16px;
}

.quest-booster-category:last-child {
    margin-bottom: 0;
}

.quest-booster-category-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.quest-booster-grid {
    display: grid;
    grid-template-columns: repeat(3, 123px);
    gap: 8px;
    justify-content: center;
}

.quest-booster-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    width: 123px;
    height: 88px;
    overflow: hidden;
}

.quest-booster-item:hover {
    border-color: #a5b4fc;
}

.quest-booster-item-selected {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.15);
}

.quest-booster-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    pointer-events: none;
}

.quest-booster-item span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.25;
}

.quest-item-pick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    width: 80px;
}

.quest-item-pick-item:hover {
    background: rgba(99, 102, 241, 0.1);
}

.quest-item-pick-item img {
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

.quest-item-pick-item span {
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
}

/* ===== 弹窗系统 ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.modal-overlay.active {
    display: flex;
}

/* 所有弹窗 overlay 不遮住导航栏（通过navbar z-index: 2002 > overlay z-index: 2000自然遮罩） */

.modal {
    background: var(--bg-card);
    border-radius: 16px;
    width: 480px;
    max-width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-sm {
    width: 360px;
}

.modal-lg {
    width: 700px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0;
}

.modal-close {
    width: 40px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    font-size: 20px;
    flex-shrink: 0;
}

.modal-close:hover {
    background: var(--bg-secondary);
}

.modal-body {
    padding: 24px 0;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-body > .form-group,
.modal-body > .modal-panel > .form-group {
    width: 100%;
    max-width: 400px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

.confirm-text {
    text-align: center;
    font-size: 16px;
    color: var(--text-primary);
    line-height: 1.6;
}

/* 未保存更改确认弹窗样式 */
#unsavedConfirmModal .modal-footer {
    border-top: none;
    padding-top: 0;
}
#unsavedConfirmModal .modal-body {
    padding: 32px 32px 16px;
}
#unsavedConfirmModal .confirm-text {
    margin: 0;
    padding: 0 8px;
}

/* ===== Modal Tabs（Segment Control 胶囊样式） ===== */
.modal-tabs {
    display: inline-flex;
    gap: 0;
    background: var(--bg-secondary, #16213e);
    border-radius: 24px;
    padding: 3px;
    margin: 0 auto 20px;
}

.modal-tab {
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.modal-tab:hover {
    color: var(--text-primary);
}

.modal-tab.active {
    background: #5B5FC7;
    color: #fff;
    box-shadow: 0 2px 6px rgba(91, 95, 199, 0.25);
}

.modal-panel {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.modal-panel.active {
    display: flex;
}

/* ===== 表单 ===== */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
}

.char-count {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: right;
    margin-top: 4px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row > * {
    flex: 1;
}

/* ===== Radio组 ===== */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-item {
    display: flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}

.radio-item input[type="radio"] {
    display: none;
}

.radio-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--text-secondary);
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
    background: var(--bg-secondary);
}

.radio-item input[type="radio"]:checked + .radio-circle {
    border-color: var(--accent);
    background: var(--accent);
}

.radio-content {
    display: flex;
    align-items: center;
    gap: 4px;
}

.radio-text {
    font-weight: 600;
}

.radio-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===== 添加英雄弹窗 ===== */
.element-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 16px;
}

/* 选择英雄职业弹窗：缩小上下边距 */
#addHeroModal .modal-body {
    padding: 12px 0;
}

/* 元素筛选与职业列表之间的分界线 */
.class-grid {
    display: grid;
    grid-template-columns: repeat(7, 64px);
    gap: 16px;
    border-top: 1px solid var(--border);
    padding: 12px 16px 0;
    justify-content: center;
}

.element-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid var(--border);
    cursor: pointer;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.element-btn:hover {
    border-color: var(--text-secondary);
}

.element-btn.active {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-light);
}

.element-btn img {
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.class-item {
    position: relative;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: all 0.2s;
    border-radius: 12px;
    border: 2px solid transparent;
    padding: 4px;
}

.class-item:hover {
    border-color: var(--text-secondary);
    background: var(--bg-card-hover);
}

.class-item.selected {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.15);
}

.class-item-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

.class-item-element {
    display: none;
}

.class-item span {
    font-size: 12px;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ===== 红色关闭按钮 ===== */
.btn-close-red {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    transition: all 0.2s;
}

.btn-close-red:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ff5555;
}

/* ===== 选择模板弹窗 ===== */
.template-card {
    width: 90%;
    margin: 0 auto;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 120px;
}

.template-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.template-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.template-class-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.template-class-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 8px;
}

.template-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: center;
}

.skill-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.template-skills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.skill-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

.skill-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.template-disclaimer {
    color: red;
    font-size: 13px;
    line-height: 1.5;
    padding: 0 5%;
    margin-top: 12px;
}

/* ===== 英雄条目（垂直圆形图标布局） ===== */
.hero-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
    cursor: pointer;
    transition: transform 0.2s;
}

.hero-item:hover {
    transform: translateY(-3px);
}

.hero-item[draggable="true"]:active {
    cursor: grabbing;
    opacity: 0.6;
}

.hero-icon-wrap {
    position: relative;
    display: inline-block;
}

.hero-class-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.hero-element-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 28px;  /* 横屏：角色图片56px的1/2 */
    height: 28px; /* 横屏：角色图片56px的1/2 */
    pointer-events: none;
}

.hero-name {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hero-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    background: #ef4444;
    border: 2px solid var(--bg-card);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: all 0.2s;
    z-index: 2;
    padding: 0;
}

.hero-remove:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* ===== 图纸大全 ===== */
.page-header {
    text-align: center;
    padding: 40px 0 24px;
}

.page-body {
    padding: 0;
}

.placeholder-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

.placeholder-card svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: var(--text-secondary);
    opacity: 0.5;
}

.placeholder-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.placeholder-card p {
    font-size: 14px;
    color: var(--text-secondary);
}

/* 传奇工具网格 */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
}
.tools-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--bg-secondary, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.tools-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tools-card-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary, #312e81);
    text-align: center;
    margin-bottom: 12px;
}
.tools-card img {
    width: 100%;
    max-width: 400px;
    height: auto;
    aspect-ratio: 400 / 250;
    object-fit: cover;
    border-radius: 8px;
}

/* 竖屏响应式 */
@media (max-width: 768px) {
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 10px;
    }
    .tools-card {
        padding: 12px;
        min-height: 100px;
    }
    .tools-card-title {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .tools-card img {
        max-width: 100%;
        aspect-ratio: 400 / 250;
        object-fit: cover;
    }
}

/* ===== 全局响应式 ===== */
@media (max-width: 768px) {
    .nav-container {
        padding: 10px 16px;
    }

    .nav-sub {
        padding: 6px 16px;
    }

    .main-content {
        padding: 80px 16px 16px;
    }

    .nav-links {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    .platform-title {
        font-size: 22px;
    }

    .section-header {
        flex-wrap: nowrap;
        gap: 8px;
        align-items: center;
    }

    /* 竖屏：体系管理右侧按钮紧凑（!important 强制覆盖） */
    .section-actions {
        flex-wrap: nowrap !important;
    }

    .section-actions .btn {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        padding: 4px 10px;
        font-size: 12px;
    }

    .section-actions .btn svg {
        display: none;
    }

    .tab-header .tab-title {
        font-size: 14px;
        line-height: 28px;
        height: 28px;
    }

    .tab-header .tab-btn {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        padding: 0 12px;
    }

    /* 竖屏技能弹窗筛选按钮 */
    #skillPickerFilter.tab-group-sm {
        gap: 6px;
    }

    #skillPickerFilter.tab-group-sm .tab-btn {
        padding: 4px 10px;
        font-size: 12px;
    }

    .section-actions .btn {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        padding: 0 12px;
    }

    /* 竖屏英雄阵容：标题和胶囊按钮同一行，3个按钮换行到下方 */
    .roster-header {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
        align-items: center;
    }

    .roster-header > .roster-title {
        font-size: 18px;
    }

    .roster-header > .roster-actions {
        display: contents;
    }

    .roster-header .roster-sort-group {
        grid-column: 2;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .roster-header .roster-btn-group {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-evenly;
        gap: 8px;
    }

    .roster-header .roster-btn-group .btn {
        flex: 0 0 auto;
        min-width: 80px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        padding: 0 8px;
    }

    .roster-title {
        font-size: 16px;
        line-height: 24px;
        height: 24px;
    }

    .roster-count,
    .quest-count {
        font-size: 14px;
        line-height: 20px;
        height: 20px;
    }

    .quest-title {
        font-size: 16px;
        line-height: 24px;
        height: 24px;
    }

    .roster-desc,
    .quest-desc {
        font-size: 12px;
        line-height: 16px;
        height: 16px;
    }

    /* 竖屏状态隐藏拖动提示，只保留配装提示 */
    .drag-hint {
        display: none;
    }

    .warrior-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
    }

    .warrior-title {
        font-size: 16px;
        line-height: 24px;
        height: 24px;
        margin: 0;
    }

    .warrior-top .btn,
    .quest-header .btn {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        padding: 0 12px;
        margin: 0;
    }

    .quest-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
    }

    /* 移动端冒险任务卡片 */
    .warrior-card {
        padding: 16px 5px 24px;
    }

    .quest-body {
        gap: 10px;
    }

    .quest-group {
        padding: 8px;
        border-radius: 8px;
    }

    .quest-group-body {
        gap: 8px;
    }

    .quest-task-card {
        width: 100%;
        height: auto; /* 竖屏自适应内容高度，避免【测试冒险】按钮下方大空白 */
        padding: 8px 8px 1px; /* 减小 padding-bottom：让按钮到卡片底部 ≈ 按钮到 test-row 顶部分界线（11px） */
        gap: 6px;
    }

    .quest-add-task-btn {
        width: 100%;
        height: auto; /* 占位卡片同样自适应 */
        min-height: 160px; /* 保持占位卡片有合理最小高度 */
    }

    .quest-task-avatar {
        width: 32px;
        height: 32px;
    }

    .quest-task-name {
        font-size: 14px;
    }

    .quest-task-diff {
        width: 20px;
        height: 20px;
    }

    .quest-task-diff-titan-bg {
        width: 15px;
        height: 15px;
    }

    .quest-task-diff-titan-imgwrap {
        width: 15px;
        height: 15px;
    }

    .quest-task-diff-titan-icon {
        width: 13px;
        height: 13px;
    }

    .quest-task-diff-titan-text {
        font-size: 8px;
    }

    .quest-task-barrier-icon {
        width: 12px;
        height: 12px;
    }

    .quest-task-barrier-val {
        font-size: 10px;
    }

    .quest-task-clone {
        font-size: 10px;
        padding: 1px 6px;
    }

    .quest-task-muxue-floor-label {
        font-size: 10px;
    }

    .quest-task-muxue-floor-input {
        width: 32px;
        height: 18px;
        font-size: 10px;
    }

    .quest-task-muxue-floor-btn {
        font-size: 9px;
        padding: 1px 4px;
    }

    .quest-task-del {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .quest-task-hero-img-wrap {
        width: 32px;
        height: 32px;
    }

    .quest-task-hero-img {
        width: 32px;
        height: 32px;
    }

    .quest-task-hero-elem {
        width: 16px;  /* 竖屏：角色图片32px的1/2 */
        height: 16px;
    }

    .quest-task-hero-remove {
        width: 14px;
        height: 14px;
        font-size: 10px;
        top: -2px;
        right: -2px;
    }

    .quest-task-hero-name {
        font-size: 10px;
        margin-top: 2px;
        min-height: 16px; /* 10px * 1.6 = 16px，确保空状态与有角色时高度一致 */
    }

    .quest-task-add-hero {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .quest-task-heroes {
        min-height: 50px;
    }

    .quest-task-config-label {
        font-size: 10px;
    }

    .quest-task-config-btn {
        font-size: 10px;
    }

    .quest-task-config-booster {
        width: 40px;
        height: 40px;
    }

    .quest-task-config-guild-activity {
        font-size: 16px;
    }

    /* 竖屏 - 公会+活动单选模式样式 */
    .quest-task-config-guild-activity.ga-single-mode .ga-icon {
        width: 32px;
        height: 32px;
    }

    .quest-task-config-guild-activity.ga-single-mode .ga-count-badge {
        min-width: 14px;
        height: 14px;
        font-size: 10px;
    }

    /* 竖屏 - 单选模式百分比角标 */
    .quest-task-config-guild-activity.ga-single-mode .ga-pct-badge {
        min-width: 24px;
        height: 14px;
        font-size: 9px;
    }

    /* 竖屏 - 公会+活动双选分割布局样式 */
    .quest-task-config-guild-activity.ga-split-mode .ga-icon {
        width: 32px;
        height: 32px;
    }

    .quest-task-config-guild-activity.ga-split-mode .ga-count-badge {
        min-width: 12px;
        height: 12px;
        font-size: 9px;
    }

    /* 竖屏 - 双选分割布局百分比角标 */
    .quest-task-config-guild-activity.ga-split-mode .ga-pct-badge {
        min-width: 20px;
        height: 12px;
        font-size: 8px;
    }

    .quest-task-config-guild-activity.ga-split-mode .ga-exp-icon {
        top: 1px;
        right: 1px;
    }

    .quest-task-config-guild-activity.ga-split-mode .ga-rest-icon {
        bottom: 1px;
        left: 1px;
    }

    .quest-task-config-guild-activity.ga-split-mode .ga-exp-badge {
        top: -1px;
        right: -1px;
    }

    .quest-task-config-guild-activity.ga-split-mode .ga-rest-badge {
        bottom: -1px;
        left: -1px;
    }

    .quest-task-config-booster-icon {
        width: 32px;
        height: 32px;
    }

    .quest-task-config-entry {
        width: 44px;
        height: 28px;
        font-size: 10px;
    }

    .muxue-entry-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .quest-booster-popup {
        width: 100%;
    }

    .quest-booster-category {
        margin-bottom: 12px;
    }

    .quest-booster-category-title {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .quest-booster-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .quest-booster-item {
        padding: 6px;
        width: 100%;
        height: auto;
    }

    .quest-booster-item img {
        width: 32px;
        height: 32px;
    }

    .quest-booster-item span {
        font-size: 10px;
    }

    .quest-task-config-dropdown {
        width: 56px;
        height: 28px;
    }

    /* 竖屏：下拉菜单适配窄宽度 */
    .quest-dropdown-wrap {
        width: 56px;
    }
    .quest-dropdown-menu {
        padding: 2px;
        width: max-content;
        min-width: 100%;
    }
    .quest-dropdown-item {
        padding: 4px 6px;
        gap: 4px;
        font-size: 10px;
    }
    .quest-dropdown-item-icon {
        width: 14px;
        height: 14px;
    }

    .quest-task-muxue-barrier-icon,
    .quest-task-muxue-barrier-none {
        width: 18px;
        height: 18px;
    }

    .quest-task-muxue-barrier-none {
        font-size: 9px;
    }

    .quest-task-test {
        font-size: 14px;
        padding: 6px 14px;
    }

    .quest-task-detail-btn {
        font-size: 14px;
        padding: 6px 14px;
    }

    .quest-task-sim-face {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .quest-task-sim-face-img {
        width: 20px;
        height: 20px;
    }

    .quest-task-sim-rate {
        font-size: 12px; /* 竖屏：缩小成功率文字（原 16px） */
    }

    .quest-add-icon {
        font-size: 20px;
    }

    .quest-add-text {
        font-size: 12px;
    }

    .hero-item {
        width: 48px;
    }

    .hero-class-icon {
        width: 32px;
        height: 32px;
    }

    .hero-element-badge {
        width: 16px;  /* 竖屏：角色图片32px的1/2 */
        height: 16px;
    }

    .hero-name {
        font-size: 10px;
        line-height: 16px;
        height: 16px;
    }

    .warrior-item {
        width: 48px;
    }

    .warrior-icon {
        width: 32px;
        height: 32px;
    }

    /* 竖屏元素图标：角色图片32px的1/2 */
    .element-icon {
        width: 16px;
        height: 16px;
    }

    /* 竖屏成员选择弹窗：标题与卡片大小对齐【选择英雄职业】弹窗 */
    .quest-hero-picker-section-title {
        font-size: 12px;
    }
    .quest-hero-pick-item {
        width: 64px;
        padding: 4px;
    }
    .quest-hero-pick-img-wrap > img:not(.quest-hero-pick-elem) {
        width: 56px;
        height: 56px;
        border-radius: 6px;
    }
    /* 竖屏成员选择弹窗元素图标：角色图片56px的1/3 */
    .quest-hero-pick-img-wrap > .quest-hero-pick-elem {
        width: 20px;
        height: 20px;
    }
    .quest-hero-pick-name {
        font-size: 11px;
    }
    .quest-hero-pick-class {
        font-size: 9px;
    }

    .warrior-name {
        font-size: 10px;
        line-height: 16px;
        height: 16px;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .modal {
        max-width: 95vw;
        max-height: 90vh;
        max-height: 90dvh; /* 动态视口高度，适配移动端浏览器UI */
        max-height: calc(var(--app-height, 100vh) * 0.9); /* JS精确计算值作为最终优先值 */
    }

    .modal-overlay {
        /* 使用动态视口高度，避免手机浏览器顶部/底部导航栏导致弹窗溢出 */
        height: 100vh;
        height: 100dvh;
        height: var(--app-height, 100vh);
        max-height: 100vh;
        max-height: 100dvh;
        max-height: var(--app-height, 100vh);
    }

    .modal-header {
        padding: 12px 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 12px 16px;
    }

    .modal-lg {
        max-height: 85vh;
        max-height: 85dvh; /* 动态视口高度 */
        max-height: calc(var(--app-height, 100vh) * 0.85);
        display: flex;
        flex-direction: column;
    }

    .modal-lg .modal-body {
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }

    /* ===== 竖屏专项修复：胶囊按钮进一步缩小 + 文本上下居中 ===== */
    .tab-btn {
        padding: 3px 12px !important; /* 进一步缩小 */
        font-size: 12px !important;   /* 进一步缩小 */
        line-height: 1.2 !important;
        display: inline-flex !important;
        align-items: center !important;
        min-height: 0 !important;
    }
    .tab-group {
        padding: 2px !important; /* 外层容器也缩小 */
        border-radius: 20px !important;
    }

    /* ===== 竖屏专项修复：体系管理标题不可换行 ===== */
    .tab-title {
        white-space: nowrap !important;
    }

    /* ===== 竖屏专项修复：列表容器不再需要负margin（卡片padding已改为5px） ===== */
    .warrior-grid {
        margin: 0 !important;
    }
    .roster-body {
        margin: 0 !important;
    }

    /* ===== 竖屏专项修复：英雄阵容卡片标题与冒险任务卡片标题大小统一 ===== */
    .roster-title {
        font-size: 18px !important; /* 原16px，统一为18px与quest-title一致 */
    }

    /* ===== 竖屏专项修复：选择英雄职业的元素筛选整体缩小 ===== */
    .element-btn {
        padding: 4px 10px !important;  /* 原6px 14px，缩小 */
        font-size: 12px !important;   /* 原14px，缩小 */
        gap: 4px !important;          /* 原6px，缩小 */
    }
    .element-btn img {
        width: 16px !important;       /* 原20px，缩小 */
        height: 16px !important;
    }

    /* ===== 竖屏专项修复：选择创建模板弹窗的卡片左右边距 ===== */
    #selectTemplateModal .modal-body {
        padding: 16px 5px !important;
    }
    #selectTemplateModal .template-card {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 12px !important;
        box-sizing: border-box !important;
    }

    /* ===== 竖屏专项修复：职业选择卡片缩小 ===== */
    .class-item {
        width: 100% !important;
        padding: 2px !important;
        gap: 2px !important;
    }
    .class-item-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 8px !important;
    }
    .class-item span {
        font-size: 10px !important;
    }
    /* 自适应列数：宽度足够时7列，不够时自动降到6列 */
    .class-grid {
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)) !important;
        gap: 4px !important;
        padding: 8px 4px 0 !important;
    }
}

@media (max-width: 640px) {
    .nav-logo .logo-text {
        display: none;
    }

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

    .hot-build-grid {
        grid-template-columns: 1fr;
    }

    .build-card {
        padding: 8px 12px;
        min-width: 0;
        overflow: hidden;
    }

    /* 竖屏卡牌内容纵向排列 */
    .build-card-name,
    .build-name {
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        height: 20px;
    }

    .build-card-note,
    .build-note {
        text-align: center;
        font-size: 10px;
        line-height: 10px;
    }

    .build-stats {
        font-size: 14px;
        line-height: 14px;
    }

    .build-actions .btn {
        height: 20px;
        line-height: 20px;
        font-size: 10px;
        padding: 0 8px;
    }

    .build-card-footer,
    .build-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .build-card-actions,
    .build-actions {
        width: 100%;
    }

    .build-card-actions .btn,
    .build-actions .btn {
        flex: 1;
    }
}

/* ===== 勇士配装模拟弹窗 ===== */
/* 参考 cq-zys.cn/hero-lineup 的三栏横屏布局 */

/* 弹窗容器：居中显示 */
.sim-modal {
    width: min(95vw, 1152px);
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    max-height: calc(var(--app-height, 100vh) - 80px);
    margin: 8px auto;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-card, #1a1a2e);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}

/* 顶部操作栏：3栏布局 */
.sim-topbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 8px 24px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-card, #1a1a2e);
    gap: 12px;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}

.sim-title {
    font-size: 24px;
    font-weight: 700;
    color: #6366f1;
    white-space: nowrap;
    justify-self: center;
}

.sim-topbar-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sim-code-input {
    width: auto;
    min-width: 80px;
    max-width: 120px;
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-secondary, #16213e);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}

.sim-code-input::placeholder { color: var(--text-secondary); opacity: 0.5; }

/* 弹窗主体 */
.sim-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 64px 16px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 左右切换勇士箭头：参考 bg-white shadow-lg rounded-lg */
.sim-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: transform 0.2s, box-shadow 0.2s;
}

.sim-arrow:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.sim-arrow svg { width: 48px; height: 48px; }
.sim-arrow-left { left: 8px; }
 .sim-arrow-right { right: 8px; }

/* ===== 上部两栏布局 ===== */
.sim-upper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 4px 0;
    position: relative;
}

/* 左侧大容器：上方（头像+配置并排）+ 下方（种子行） */
.sim-col-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

/* 英雄弹窗左栏收缩，给右侧技能区留空间 */
#heroSimModal .sim-col-left {
    flex: 0 1 auto;
}

/* 勇士弹窗上部：左栏收缩到内容宽度 */
#warriorSimModal .sim-col-left {
    flex: 0 1 auto;
}

/* 勇士弹窗：宽度自适应内容 */
#warriorSimModal .sim-modal {
    width: fit-content;
    max-width: min(95vw, 1152px);
}

#warriorSimModal .sim-body {
    width: fit-content;
    flex: 0 1 auto;
    min-width: 0;
}

/* 勇士弹窗下部：属性1/3，装备2/3 */
#warriorSimModal .sim-lower {
    grid-template-columns: 1fr 2fr;
}

/* 上方内部：头像+配置 并排 */
.sim-row-top {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* 左栏：头像+名称 参考 w-[100px] flex-col items-center */
.sim-col-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    min-width: 80px;
    flex-shrink: 0;
}

.sim-avatar-wrap {
    position: relative;
    margin-bottom: 8px;
}

.sim-avatar {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
}

.sim-element-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 36px;  /* 横屏：角色图片72px的1/2 */
    height: 36px; /* 横屏：角色图片72px的1/2 */
    pointer-events: none;
}

.sim-wname {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-top: 4px;
}

/* 配置项 */
.sim-col-config {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.sim-cfg-group {
    margin-bottom: 8px;
}

.sim-cfg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sim-cfg-sub {
    padding-left: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.sim-cfg-label {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    padding-right: 4px;
    min-width: 80px;
    line-height: 26px;
    height: 26px;
}

/* 配置值按钮：参考 background-image 游戏背景框样式 */
.sim-cfg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 4px 16px;
    background: linear-gradient(135deg, #4a1a5e, #2d0f3f);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.sim-cfg-btn:hover {
    background: linear-gradient(135deg, #5a2a7e, #3d1f5f);
    transform: scale(1.02);
}

.sim-cfg-val {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 22px;
    height: 22px;
}

.sim-cfg-hint {
    font-size: 16px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sim-select {
    padding: 4px 12px;
    background: linear-gradient(135deg, #4a1a5e, #2d0f3f);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    min-width: 80px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.sim-select:disabled,
.sim-seed-select:disabled {
    background: transparent;
    color: #fff;
    cursor: default;
    opacity: 0.9;
    -webkit-text-fill-color: #fff;
}

.sim-select option {
    background: #2d0f3f;
    color: #fff;
}

.sim-card-select {
    padding: 4px 12px;
    background: linear-gradient(135deg, #4a1a5e, #2d0f3f);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    min-width: 80px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.sim-card-select option {
    background: #2d0f3f;
    color: #fff;
}

/* 只读模式下的文本展示（替代下拉菜单）- 默认隐藏 */
.sim-readonly-text {
    display: none !important;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 20px;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1.4;
    vertical-align: middle;
    border: none;
}

/* 只读模式下显示文本 */
.sim-readonly-text.sim-readonly-visible {
    display: inline-block !important;
}

/* 只读模式下隐藏下拉菜单 */
.sim-select.sim-readonly-hidden,
.sim-seed-select.sim-readonly-hidden {
    display: none !important;
}

/* 只读模式下隐藏自定义下拉包装器 */
.custom-select-wrapper.sim-readonly-hidden {
    display: none !important;
}

/* 勇士之魂只读模式禁用点击，不改变显示状态 */
.sim-soul-toggle.sim-readonly-only {
    pointer-events: none;
    opacity: 1;
}

.sim-seed-select + .sim-readonly-text {
    font-size: 16px;
    font-weight: 600;
    width: 64px;
    text-align: center;
    display: inline-block;
    padding: 0;
}

.pl-2 { padding-left: 8px; }

.sim-cfg-note {
    font-size: 16px;
    color: var(--text-secondary);
    padding-left: 8px;
}

/* 最大装备阶数显示 */
.sim-max-tier {
    font-size: 16px;
    color: var(--text-secondary);
    margin-left: 8px;
    white-space: nowrap;
}

/* 右栏：勇士之魂 / 技能信息 */
.sim-col-soul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 0;
    min-width: 180px;
    justify-content: flex-end;
}

/* 勇士弹窗右栏：限制最大宽度，避免过宽；内容靠上 */
#warriorSimModal .sim-col-soul {
    flex: 0 1 auto;
    max-width: 320px;
    justify-content: flex-start;
}

/* 英雄弹窗右侧技能容器：技能行占满剩余空间，描述面板贴底 */
.sim-col-soul .hero-sim-slots {
    margin-top: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    gap: 6px;
}

.sim-col-soul .hero-sim-skill-desc-panel {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    margin-top: auto;
}

.sim-col-soul .hero-sim-skill-desc-panel .hero-sim-skill-desc-text {
    width: 100%;
}

.sim-soul-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 横屏时勇士之魂在阶数行内，添加左间距与阶数下拉分隔 */
#warriorSimModal .sim-cfg-row .sim-soul-row {
    margin-left: 8px;
}

.sim-soul-label {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 26px;
    height: 26px;
}

/* 勇士之魂勾选框：参考 rounded_box_emptyslot 样式 */
.sim-soul-toggle {
    cursor: pointer;
    margin-left: 8px;
}

.sim-soul-toggle input { display: none; }

.sim-soul-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    transition: opacity 0.2s;
}

.sim-soul-box .soul-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sim-soul-box .soul-check {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.sim-soul-toggle input:checked ~ .sim-soul-box {
    box-shadow: 0 0 0 2px #22c55e, 0 0 8px rgba(34,197,94,0.3);
}

.sim-soul-toggle input:checked ~ .sim-soul-box .soul-check {
    display: block;
}

/* 技能卡片：名称在图标下方 */
.sim-skill-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
}

.sim-skill-left {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sim-skill-right {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.sim-skill-icon-lg {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: contain;
    background: transparent;
}

.sim-skill-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sim-skill-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 技能描述内联属性图标（横屏基础尺寸） */
.innate-effect-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 2px;
}

/* ===== 技能属性展示模式（卡片翻转） ===== */
/* 卡片容器：启用3D翻转 */
.sim-skill-card,
.hero-sim-skill-desc-panel {
    position: relative;
    transition: transform 0.5s ease-in-out;
    transform-style: preserve-3d;
    /* 横屏：技能描述/常驻技能属性卡牌固定高度70px */
    height: 70px;
}

/* 翻转状态：绕X轴旋转180度 */
.sim-skill-card.skill-attr-flipped,
.hero-sim-skill-desc-panel.skill-attr-flipped {
    transform: rotateX(180deg);
}

/* 属性展示覆盖层 */
.skill-attr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    /* 内容超出卡片高度（受限于自带技能效果高度）时纵向滚动查看，避免裁切丢失 */
    overflow-y: auto;
    overflow-x: hidden;
    /* 反向旋转，使翻转后内容正面朝上 */
    transform: rotateX(180deg);
}

/* 属性内容容器：纵向排列，高度不足时自动换列 */
.skill-attr-mode-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 4px 6px;
    box-sizing: border-box;
    height: 100%;
    align-content: flex-start;
    align-items: flex-start;
}

/* 常驻技能属性标题 */
.skill-attr-header {
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 2px;
    flex: 0 0 auto;
}

/* 技能属性模式内嵌标题（勇士：全队技能属性 / 英雄：常驻技能属性） */
.skill-attr-mode-title {
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 2px;
    flex: 0 0 auto;
}

/* 英雄常驻技能属性：横屏标题在左侧+分界线 */
.skill-attr-mode-content-hero {
    flex-direction: row !important;
    align-items: stretch !important;
}

/* 统一左右布局（英雄+勇士） */
.skill-attr-mode-content-side {
    flex-direction: row !important;
    align-items: stretch !important;
}

.skill-attr-mode-title-side {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-primary);
    white-space: normal;
    padding-right: 8px;
    border-right: 1px solid var(--border, #555);
    margin-bottom: 0;
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 28px;
}
/* 横屏：显示换行符，3行显示 */
.skill-attr-mode-title-side br {
    display: block;
}
.skill-attr-mode-attrs {
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-content: flex-start;
    align-items: flex-start;
    padding-left: 8px;
    box-sizing: border-box;
    height: 100%;
    max-height: calc(3 * 20px); /* 每列最多3行 */
}

/* 勇士全队技能属性：标题居中 */
.skill-attr-mode-title-center {
    width: 100%;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 2px;
    flex: 0 0 auto;
}

/* 勇士全队技能属性：属性列表子容器 */
.skill-attr-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px 12px;
    align-items: flex-start;
}

/* 横屏：属性列表以3条为高度上限，超出在右侧新一列显示 */
@media (min-width: 769px) {
    .skill-attr-items-wrapper {
        flex-wrap: wrap;
        max-height: 60px;
        align-content: flex-start;
    }
}

/* 单条属性 */
.skill-attr-item {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

/* 特殊情况属性：宽度由内容决定（配合align-items:flex-start，不占满整行） */
.skill-attr-item.skill-attr-special {
    width: auto;
}

/* 神器固定属性红色泛光（如原岩重靴回避=0、菊一文字暴击=20%） */
/* 图片和文字周围红色泛光 + 2秒循环半透明-不透明动画 */
.skill-attr-item.skill-attr-red-glow {
    animation: sim-slot-inactive-pulse 2s ease-in-out infinite;
}
.skill-attr-item.skill-attr-red-glow .skill-attr-icon,
.skill-attr-item.skill-attr-red-glow .skill-attr-label {
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.8));
}

/* 精萃技能效果行红色泛光（原岩重靴回避、菊一文字暴击） */
.sim-slot-essence-effect-row.sim-slot-essence-red-glow {
    animation: sim-slot-inactive-pulse 2s ease-in-out infinite;
}
.sim-slot-essence-effect-row.sim-slot-essence-red-glow img,
.sim-slot-essence-effect-row.sim-slot-essence-red-glow span {
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.8));
}

/* 战斗增益与减益面板：神器冲突/失效红色泛光 */
.muxue-entry-summary-item.artifact-red-glow {
    animation: sim-slot-inactive-pulse 2s ease-in-out infinite;
}
.muxue-entry-summary-item.artifact-red-glow img,
.muxhe-entry-summary-item.artifact-red-glow span {
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.8));
}
.muxue-entry-summary-item.artifact-red-glow .muxue-entry-summary-attr-icon,
.muxue-entry-summary-item.artifact-red-glow .muxue-entry-summary-text {
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.8));
}

/* 圆点标记 */
.skill-attr-bullet {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-secondary);
    flex-shrink: 0;
}
/* 条件精粹效果圆点（橙色区分） */
.skill-attr-bullet.ess-conditional-bullet {
    background: #f59e0b;
}

/* 属性图标 */
.skill-attr-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    vertical-align: middle;
}

/* 装备类型条件图标：黑色描边 */
.skill-attr-cond-icon {
    filter: drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}

/* 属性文字 */
.skill-attr-label {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
}

/* 暗色主题：常驻属性卡片属性文本白色 */
body:not(.light) .skill-attr-label {
    color: #fff;
}

/* 标签内嵌图标（元素攻击公式型等） */
.skill-attr-label img {
    margin: 0 1px;
    vertical-align: middle;
}

/* 空状态 */
.skill-attr-empty {
    width: 100%;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 8px;
}

/* 填满/清空配置按钮 */
.btn-fill-cfg {
    background: #22c55e;
    color: #fff;
    border: none;
    font-size: 13px;
    padding: 6px 18px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 0;
    margin-right: auto;
    flex-shrink: 0;
}

.btn-clear-cfg {
    background: #ef4444;
    color: #fff;
    border: none;
    font-size: 13px;
    padding: 6px 18px;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 0;
    margin-right: auto;
    flex-shrink: 0;
}

/* 种子行：平均分配宽度 */
.sim-seed-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sim-seed-item {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.sim-seed-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sim-seed-icon {
    width: 24px;
    height: 24px;
}

.sim-seed-select {
    padding: 4px 8px;
    background: linear-gradient(135deg, #4a1a5e, #2d0f3f);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    width: 64px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.sim-seed-select option {
    background: #2d0f3f;
    color: #fff;
}

/* ===== 水平分隔线 ===== */
.sim-divider-h {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* ===== 下部两栏布局：参考 grid-cols-5 ===== */
.sim-lower {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "action equip"
        "stats equip";
    gap: 12px;
    padding-top: 8px;
}

/* 左栏面板（保留兼容） */
.sim-col-left-panel {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 按钮行 grid 区域 */
.sim-action-row {
    grid-area: action;
}

/* 属性列表 grid 区域 */
.sim-col-stats {
    grid-area: stats;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sim-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 8px 8px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.sim-stat-img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.sim-stat-label {
    font-size: 24px;
    font-weight: 780;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9), -1px -1px 1px rgba(0,0,0,0.9),
                 1px -1px 1px rgba(0,0,0,0.9), -1px 1px 1px rgba(0,0,0,0.9),
                 0 0 3px rgba(0,0,0,0.6);
}

.sim-stat-val {
    margin-left: auto;
    font-size: 24px;
    font-weight: 780;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9), -1px -1px 1px rgba(0,0,0,0.9),
                 1px -1px 1px rgba(0,0,0,0.9), -1px 1px 1px rgba(0,0,0,0.9),
                 0 0 3px rgba(0,0,0,0.6);
}

/* 右栏：装备区 参考 grid-cols-2 gap-24 pl-24 pr-16 */
.sim-col-equip {
    grid-area: equip;
    padding-left: 24px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sim-equip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: clamp(6px, 2vw, 24px);
    width: 100%;
    height: 100%;
}

/* 2个装备槽时居中显示 */
.sim-equip-grid.slots-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    max-width: 360px;
    margin: auto;
    height: auto;
}

/* 装备槽位：参考 button_global_squared_purple 背景 */
.sim-equip-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: visible;
    cursor: pointer;
    transition: opacity 0.2s;
    background: transparent;
    border: none;
    padding: 0;
    container-type: size;
}

.sim-equip-slot:hover { opacity: 0.9; }

.sim-equip-slot-bg {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    object-fit: contain;
    border-radius: 12px;
    pointer-events: none;
}

.sim-equip-slot-content {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px;
    pointer-events: none;
}

/* 多装备图标时横排 */
.sim-equip-slot-content:has(.sim-equip-slot-icon + .sim-equip-slot-icon) {
    flex-direction: row;
    gap: 2px;
    padding: 8px;
}

/* 4个及以上图标时换行，两行平均分配高度 */
.sim-equip-slot-content:has(.sim-equip-slot-icon:nth-child(4)) {
    flex-wrap: wrap;
    align-content: space-evenly;
    justify-content: center;
    gap: 2px 4px;
    padding: 8px 0;
}

.sim-equip-slot-icon {
    width: 25%;
    height: 25%;
    object-fit: contain;
}

/* 装备槽内选中装备的大图（背景80%大小，在背景内居中） */
.sim-equip-slot-equip {
    width: 64%;
    height: 64%;
    object-fit: contain;
    position: absolute;
    top: 18%;
    left: 18%;
    pointer-events: none;
    z-index: 3;
}

/* 品质特效 - 中心发散泛光层（从装备栏中心向外淡去） */
.sim-slot-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}
/* 品质特效 - 顺时针旋转光效层 */
.sim-slot-light {
    position: absolute;
    top: 12%;
    left: 12%;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: sim-slot-spin 16s linear 0s infinite normal none running;
}
/* 品质特效 - 逆时针旋转光效层 */
.sim-slot-light-reverse {
    position: absolute;
    top: 12%;
    left: 12%;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: sim-slot-spin 16s linear 0s infinite reverse none running;
}
@keyframes sim-slot-spin {
    100% { transform: rotate(360deg); }
}

/* 角标容器 */
.sim-slot-badges {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

/* 阶级图标（左上角，20%宽高=背景25%，70%在内30%在外） */
.sim-slot-tier-badge {
    position: absolute;
    top: 4%;
    left: 4%;
    width: 20%;
    height: 20%;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sim-slot-tier-text {
    font-size: 10cqh;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 4px #000, 0 0 2px #000, 1px 1px 0 #000;
    line-height: 1;
}

/* 亲和图标（左侧，固定位置不随上层图标有无变化，20%宽高=背景25%） */
.sim-slot-affinity-icon {
    position: absolute;
    left: 4%;
    width: 17%;
    height: 17%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sim-slot-affinity-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 右侧角标（元素/精萃附魔/神器，20%宽高=背景25%，70%在内30%在外） */
.sim-slot-corner-icon {
    position: absolute;
    right: 4%;
    width: 20%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sim-slot-corner-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 元素附魔：右上角（固定位置1） */
.sim-slot-element-enchant {
    top: 4%;
}
/* 精萃附魔：元素附魔下方（固定位置2，不随元素附魔有无变化） */
.sim-slot-essence-enchant {
    top: 24%;
}
/* 神器图纸：精萃附魔下方（固定位置3） */
.sim-slot-artifact {
    top: 44%;
}
.sim-slot-artifact img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 超越图标（右下角，20%宽高=背景25%，70%在内30%在外） */
.sim-slot-transcend {
    position: absolute;
    bottom: 4%;
    right: 4%;
    width: 20%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sim-slot-transcend img,
.sim-slot-transcend svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 装备属性模式下独立的超越图标：z-index高于属性展示层(10)，确保可见 */
.sim-slot-transcend-attr {
    z-index: 15;
}

.sim-equip-slot-tier {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    display: none;
}

/* ===== 响应式：勇士弹窗竖屏 ===== */
@media (max-width: 768px) {
    #warriorSimModal .sim-modal {
        width: 92vw;
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
        max-height: calc(var(--app-height, 100vh) - 80px);
        margin: 0 auto;
        border-radius: 12px;
        overflow: visible;
    }

    #heroSimModal .sim-modal {
        width: 92vw;
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
        max-height: calc(var(--app-height, 100vh) - 80px);
        margin: 0 auto;
        border-radius: 12px;
        overflow: visible;
    }

    .sim-body {
        padding: 8px 40px 16px;
    }

    /* 竖屏覆盖勇士弹窗body的fit-content宽度，使其占满modal宽度 */
    #warriorSimModal .sim-body {
        width: 100%;
        flex: 1 1 auto;
    }

    .sim-topbar {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 12px 12px 0 0;
        overflow: hidden;
    }

    .sim-title {
        grid-column: auto;
        justify-self: center;
        font-size: 18px;
        height: 20px;
        line-height: 20px;
        margin: 0;
    }

    .sim-topbar-center,
    .sim-topbar-right {
        width: 100%;
        justify-content: center;
    }

    .sim-topbar-right > * {
        flex: 0 0 auto;
    }

    .sim-code-input { flex: 1; min-width: 0; width: auto; }

    .sim-arrow { display: flex; }

    .sim-arrow {
        width: 32px;
        height: 32px;
        top: 50%;
        z-index: 10;
    }

    .sim-arrow-left { left: 5px; }
    .sim-arrow-right { right: 5px; }

    .sim-arrow svg { width: 32px; height: 32px; }

    /* 竖屏上部：左右两栏 */
    .sim-upper {
        flex-direction: column;
        gap: 8px;
    }

    /* 竖屏左右两栏容器 */
    .sim-portrait-left,
    .sim-portrait-right {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* 竖屏 .sim-upper：纵向排列（上部信息行 + 下部技能卡片），整体左右居中 */
    #warriorSimModal .sim-upper {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 3px;
        align-items: center;
    }

    /* 竖屏上部行：左=头像，右=配置+种子+勇士之魂，整体居中 */
    #warriorSimModal .sim-portrait-top-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        justify-content: center;
    }

    #warriorSimModal .sim-portrait-left {
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
    }

    #warriorSimModal .sim-portrait-right {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    /* 竖屏勇士配置+种子行：横向排列，仅占所需宽度 */
    #warriorSimModal .sim-portrait-config-seed {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 10px;
        width: fit-content;
        max-width: fit-content;
    }

    /* 竖屏技能卡片：左=图片+名称(纵向)，右=描述(横向布局)，内容整体居中 */
    #warriorSimModal .sim-skill-card {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        margin-top: 0;
        gap: 4px;
        height: 70px;
        /* 竖屏时卡片是.sim-upper的直接子元素，align-items:flex-start导致宽度仅取内容宽度；
           翻转后子元素被display:none隐藏，卡片宽度塌缩为0，overlay也变为0宽不可见。
           固定宽度100%确保翻转后overlay内容可见。 */
        width: 100%;
    }
    /* 竖屏技能左侧：图片+名称纵向排列 */
    #warriorSimModal .sim-skill-left {
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }
    /* 竖屏技能右侧：描述 */
    #warriorSimModal .sim-skill-right {
        flex: 1;
        min-width: 0;
    }

    /* 竖屏技能图标 40x40 */
    #warriorSimModal .sim-skill-icon-lg {
        width: 40px;
        height: 40px;
    }

    /* 竖屏技能名称居中 */
    #warriorSimModal .sim-skill-name {
        text-align: center;
    }

    /* 竖屏技能描述左对齐 */
    #warriorSimModal .sim-skill-desc {
        text-align: left;
        width: 100%;
    }

    /* 竖屏技能属性展示模式 */
    #warriorSimModal .skill-attr-mode-content {
        gap: 2px 8px;
        padding: 2px 4px;
        align-items: center;
        align-content: center;
    }
    /* 竖屏：标题左侧显示，宽度为2字，自动换行为3行 */
    #warriorSimModal .skill-attr-mode-title-side {
        writing-mode: horizontal-tb;
        font-size: 11px;
        padding-right: 4px;
        line-height: 1.3;
        letter-spacing: 1px;
        white-space: normal;
        word-break: break-all;
        flex: 0 0 auto;
        width: auto;
        min-width: 22px;
        text-align: center;
    }
    /* 竖屏：显示换行符 */
    #warriorSimModal .skill-attr-mode-title-side br {
        display: block;
    }
    /* 竖屏：属性列表每列最多3行 */
    #warriorSimModal .skill-attr-mode-attrs {
        max-height: calc(3 * 18px);
        gap: 2px 8px;
    }
    #warriorSimModal .skill-attr-icon {
        width: 12px;
        height: 12px;
    }
    #warriorSimModal .skill-attr-label {
        font-size: 11px;
    }
    #warriorSimModal .skill-attr-bullet {
        width: 3px;
        height: 3px;
    }

    /* 竖屏种子行：上下排列 */
    #warriorSimModal .sim-seed-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 竖屏勇士配置列：自适应内容宽度，与种子行并排，行间距3px */
    #warriorSimModal .sim-col-config {
        flex: none !important;
        width: auto;
        max-width: max-content;
        align-items: flex-start;
        gap: 3px;
    }
    /* 竖屏勇士配置标签：缩小min-width避免配置列过宽 */
    #warriorSimModal .sim-cfg-label {
        min-width: auto;
    }
    /* 竖屏勇士配置行：position:relative作为备注绝对定位的上下文 */
    #warriorSimModal .sim-cfg-row {
        gap: 2px 4px;
        flex-wrap: nowrap;
        position: relative;
    }
    /* 有备注的配置行：用margin-bottom创造备注空间（不影响top:100%计算） */
    #warriorSimModal .sim-cfg-row:has(.sim-max-tier),
    #warriorSimModal .sim-cfg-row:has(.sim-cfg-note) {
        margin-bottom: 15px; /* 3px(到备注间距) + ~12px(备注高度) */
    }
    /* 竖屏勇士备注：绝对定位在下拉菜单内容下方3px处，不参与容器宽度计算 */
    #warriorSimModal .sim-max-tier,
    #warriorSimModal .sim-cfg-note {
        position: absolute;
        top: 100%;
        left: 0;
        white-space: nowrap;
        margin-top: 3px;
        margin-left: 0;
        padding-left: 0;
        overflow: visible;
    }
    /* 竖屏种子行：不扩展 */
    #warriorSimModal .sim-portrait-config-seed .sim-seed-row {
        flex: none;
    }

    /* 竖屏勇士之魂行：与配置同宽 */
    #warriorSimModal .sim-soul-row {
        align-self: stretch;
    }

    .sim-topbar .btn-sm {
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        font-size: 12px;
    }

    .sim-topbar .sim-code-input {
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        padding: 0 8px;
    }

    .sim-title {
        font-size: 14px;
        line-height: 28px;
        height: 28px;
        margin: 0;
    }

    /* 竖屏左栏：勇士弹窗被portrait-left替代，此规则主要影响英雄弹窗 */
    .sim-col-left {
        width: 100%;
    }

    /* 英雄弹窗竖屏左栏收缩 */
    #heroSimModal .sim-col-left {
        width: auto;
    }

    /* 英雄弹窗竖屏重排：上部英雄配置+箭头，下部技能配置 */
    #heroSimModal .sim-upper {
        flex-direction: column;
        align-items: center;
    }
    #heroSimModal .sim-hero-config-area {
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
    }
    #heroSimModal .sim-skill-area {
        width: 100%;
    }
    /* 竖屏英雄配置：左右两部分(头像+名称 | 等级卡牌) */
    #heroSimModal .sim-row-top {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        flex: 0 0 auto;
        justify-content: flex-start;
    }
    #heroSimModal .sim-col-avatar {
        flex: 0 0 auto;
        align-items: center;
    }
    #heroSimModal .sim-col-config {
        flex: 0 0 auto;
        min-width: 0;
    }
    #heroSimModal .sim-skill-area .sim-col-soul {
        min-width: 0;
    }
    /* 竖屏英雄弹窗去掉 sim-upper 的 margin，英雄配置和技能都要占满宽度 */
    #heroSimModal .sim-upper {
        margin: 0;
    }
    /* 竖屏英雄弹窗技能行不需要负margin（已在全宽容器内） */
    #heroSimModal .hero-sim-slots {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
    /* 竖屏种子行：纵向排列 */
    #heroSimModal .sim-seed-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* 竖屏英雄技能属性展示模式 */
    #heroSimModal .skill-attr-mode-content {
        gap: 2px 8px;
        padding: 2px 4px;
        align-items: center;
        align-content: center;
    }
    /* 竖屏英雄：标题左侧显示，宽度为2字，自动换行为3行 */
    #heroSimModal .skill-attr-mode-title-side {
        writing-mode: horizontal-tb;
        font-size: 11px;
        padding-right: 4px;
        line-height: 1.3;
        letter-spacing: 1px;
        white-space: normal;
        word-break: break-all;
        flex: 0 0 auto;
        width: auto;
        min-width: 22px;
        text-align: center;
    }
    /* 竖屏英雄：显示换行符 */
    #heroSimModal .skill-attr-mode-title-side br {
        display: block;
    }
    /* 竖屏英雄：属性列表每列最多3行 */
    #heroSimModal .skill-attr-mode-attrs {
        max-height: calc(3 * 18px);
        gap: 2px 8px;
    }
    #heroSimModal .skill-attr-icon {
        width: 12px;
        height: 12px;
    }
    #heroSimModal .skill-attr-label {
        font-size: 11px;
    }
    #heroSimModal .skill-attr-bullet {
        width: 3px;
        height: 3px;
    }

    /* 头像+配置并排 */
    .sim-row-top {
        gap: 12px;
    }

    .sim-col-avatar {
        width: auto;
        min-width: auto;
        align-items: flex-start;
    }

    .sim-avatar {
        width: 48px;
        height: 48px;
    }

    .sim-element-badge {
        width: 24px;  /* 竖屏：角色图片48px的1/2 */
        height: 24px;
    }

    .sim-avatar-wrap {
        margin-bottom: 4px;
    }

    .sim-wname {
        font-size: 16px;
        line-height: 20px;
    }

    .sim-cfg-group {
        margin-bottom: 0;
    }

    .sim-col-config {
        flex: 1;
        min-width: 0;
    }

    .sim-col-left {
        gap: 5px;
    }

    .sim-cfg-label { font-size: 12px; line-height: 16px; height: 16px; min-width: 60px; }
    .sim-cfg-val { font-size: 12px; }
    .sim-cfg-hint { font-size: 10px; }
    .sim-max-tier, .sim-cfg-note { font-size: 10px; }

    /* 竖屏勇士之魂行：文本16px高度，勾选框和按钮24px */
    .sim-soul-label {
        font-size: 16px;
        line-height: 16px;
        height: 16px;
    }
    .sim-soul-box {
        width: 24px;
        height: 24px;
    }
    .sim-soul-box .soul-bg,
    .sim-soul-box .soul-check {
        width: 24px;
        height: 24px;
    }
    .btn-fill-cfg {
        height: 24px;
        font-size: 12px;
        padding: 0 8px;
    }

    .sim-select {
        width: 45px;
        height: 20px;
        padding: 0 4px;
        font-size: 12px;
        min-width: 45px;
    }

    .sim-card-select {
        width: 45px;
        height: 20px;
        padding: 0 4px;
        font-size: 12px;
        min-width: 45px;
    }

    .sim-seed-select {
        width: 30px;
        height: 20px;
        font-size: 12px;
    }

    /* 竖屏只读文本 */
    .sim-readonly-text {
        display: none !important;
        font-size: 12px;
        padding: 0;
    }

    .sim-readonly-text.sim-readonly-visible {
        display: inline-block !important;
    }

    .sim-seed-select + .sim-readonly-text {
        font-size: 12px;
        width: 30px;
    }

    /* 竖屏属性文本固定12px */
    .stat-line {
        font-size: 12px;
    }

    /* 竖屏功能按钮 */
    .sim-btn-action {
        height: 24px;
        line-height: 24px;
        font-size: 16px;
        padding: 0 8px;
    }
    .sim-btn-fill,
    .sim-btn-equip {
        font-size: 16.8px; /* 竖屏按钮高度24px*70% */
    }

    .sim-action-row {
        gap: 5px;
    }

    /* 竖屏勇士技能描述也限制150px */
    .sim-skill-right {
        max-width: 150px;
    }

    .sim-cfg-row {
        flex-wrap: nowrap;
        gap: 2px;
        position: relative;
    }
    /* 有备注的配置行：用margin-bottom创造备注空间（不影响top:100%计算） */
    .sim-cfg-row:has(.sim-max-tier),
    .sim-cfg-row:has(.sim-cfg-note) {
        margin-bottom: 15px;
    }

    .sim-max-tier,
    .sim-cfg-note {
        position: absolute;
        top: 100%;
        left: 0;
        width: auto;
        margin-top: 3px;
        margin-left: 0;
        padding-left: 0;
        white-space: nowrap;
    }

    .sim-col-soul {
        width: 100%;
        align-items: flex-start;
    }

    /* 竖屏：技能行不受箭头影响，向左右扩展 */
    .hero-sim-slots {
        margin-left: -28px;
        margin-right: -28px;
        padding-left: 28px;
        padding-right: 28px;
    }

    /* 技能保持左右分栏 */
    .sim-skill-card { gap: 8px; }
    .sim-skill-icon-lg { width: 64px; height: 64px; }
    .sim-skill-desc { max-width: none; }
    .sim-skill-name { font-size: 12px; line-height: 15px; height: 15px; }
    .sim-skill-desc { font-size: 11px; line-height: 15px; height: 15px; }


    /* 下部：装备在上，属性在下分两列 */
    .sim-lower {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "action"
            "equip"
            "stats";
        gap: 8px;
        align-items: stretch;
    }

    /* 勇士弹窗竖屏也用单列 */
    #warriorSimModal .sim-lower {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "action"
            "equip"
            "stats";
    }

    /* 竖屏装备栏去掉左padding */
    .sim-col-equip {
        padding-left: 0;
        padding-right: 0;
    }

    .sim-col-equip {
        padding-left: 0;
        padding-right: 0;
        order: -1;
        justify-self: stretch;
    }

    .sim-col-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        justify-self: center;
        width: 100%;
    }

    .sim-stat-item {
        border-bottom: 1px solid var(--border);
        padding: 6px 0;
    }

    .sim-equip-grid {
        grid-template-columns: auto auto;
        grid-template-rows: auto;
        gap: 12px;
        justify-content: center;
        width: fit-content;
        height: auto;
    }

    .sim-equip-grid.slots-2 {
        max-width: none;
        margin: 0 auto;
    }

    .sim-stat-img { width: 18px; height: 18px; }
    .sim-stat-label { font-size: 14px; line-height: 16px; height: 16px; }
    .sim-stat-val { font-size: 14px; line-height: 16px; height: 16px; }
}

@media (max-width: 480px) {
    /* 职业列表：列数自适应弹窗宽度（minmax 60px + 减左右padding 后 375px 弹窗算 5 列） */
    .class-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 8px;
        justify-content: stretch;
        width: 100%; /* 撑满 modal-body，避免 auto 宽度只跟内容走 */
        padding: 12px 4px 0; /* 减左右 padding：内容区更宽，容下 5 列（原 16px 左右 → 内容区 324px 只容 4 列） */
    }

    .sim-cfg-row {
        flex-wrap: nowrap;
    }

    .sim-body {
        padding: 4px 8px;
    }

    .sim-upper {
        margin: 0 28px;
    }
}

@media (max-width: 360px) {
    /* 职业列表 4 列自适应（360px 内小屏） */
    .class-grid {
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    }
}

/* ===== 英雄配装模拟弹窗特有样式 ===== */

/* 英雄名称输入框 */
.hero-sim-name-input {
    width: 72px;
    padding: 4px 6px;
    background: linear-gradient(135deg, #4a1a5e, #2d0f3f);
    border: 2px solid transparent;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    outline: none;
    margin-top: 4px;
    box-sizing: border-box;
}

.hero-sim-name-input:focus {
    border-color: var(--accent-light, #818cf8);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.3);
}
.hero-sim-name-input:disabled {
    background: transparent;
    border-color: transparent;
    cursor: default;
    opacity: 0.9;
}

.hero-sim-name-input::placeholder {
    color: rgba(255,255,255,0.4);
}

/* 种子数值显示（只读） */
.sim-seed-display {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    min-width: 32px;
    text-align: center;
    background: linear-gradient(135deg, #4a1a5e, #2d0f3f);
    border-radius: 8px;
    padding: 4px 8px;
}

/* ===== 技能槽位横向排列 ===== */
.hero-sim-slots {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.hero-skill-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 80px;
    cursor: pointer;
    transition: all 0.2s;
}

.hero-skill-slot:hover {
    transform: translateY(-2px);
}

.hero-skill-slot.selected {
    transform: translateY(-2px);
}

.hero-skill-slot.locked {
    opacity: 0.45;
    cursor: default;
}

.hero-skill-slot.locked:hover {
    transform: none;
}

.hero-skill-slot-icon-wrap {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}

.hero-skill-slot-icon {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.hero-skill-slot.locked .hero-skill-slot-icon {
    opacity: 0.45;
}

.hero-skill-slot-badge-icon {
    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    object-fit: contain;
    pointer-events: none;
}

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

.hero-skill-slot-name {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.hero-skill-slot-lock {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}

.hero-skill-slot-lock .lock-text {
    background: rgba(136,136,136,0.15);
    padding: 2px 6px;
    border-radius: 4px;
}

.hero-skill-slot:not(.locked) .hero-skill-slot-lock {
    display: none;
}

/* 不存在的技能槽位：隐藏但保留占位，保持5槽位布局 */
.hero-skill-slot.hidden-slot {
    display: none;
}

/* ===== 技能描述面板（竖屏） ===== */
.hero-sim-skill-desc-panel {
    padding: 6px 12px;
    margin-top: 0;
    height: 70px;
    box-sizing: border-box;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.hero-sim-skill-desc-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 竖屏技能描述内联图标尺寸 */
.innate-effect-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 2px;
}

/* ===== 英雄装备区 3x2 网格 ===== */
.hero-sim-equip-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* ===== 英雄弹窗响应式 ===== */
@media (max-width: 768px) {
    .hero-sim-name-input {
        width: 64px;
        height: 24px;
        min-width: 0;
        line-height: 16px;
        padding: 0 4px;
        font-size: 14px;
    }

    .sim-equip-slot {
        width: 100px;
        height: 100px;
    }

    .sim-equip-slot-icon {
        width: 24px;
        height: 24px;
    }

    .sim-equip-slot-content {
        padding: 8px;
    }

    .hero-sim-equip-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px;
    }

    /* 竖屏：技能槽按实际数量平均分配 */
    .hero-sim-slots {
        display: flex !important;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    .hero-sim-slots > .hero-skill-slot:not(.hidden-slot) {
        flex: 1 1 0;
        min-width: 60px;
    }

    /* 竖屏：隐藏描述面板，改用弹窗 */
    .sim-col-soul .hero-sim-skill-desc-panel {
        display: none !important;
    }

    /* 竖屏：装备属性模式下英雄自带技能直接切换，不使用翻转效果 */
    #heroSimInnateSlot {
        position: relative;
    }

    /* 竖屏：overlay 不需要反向旋转（无翻转效果） */
    #heroSimInnateSlot .skill-attr-overlay {
        transform: none;
    }

    /* 英雄自带技能属性卡片样式 - 使用skill-attr-overlay的绝对定位 */

    .hero-innate-skill-card {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #4a90d9;
        border-radius: 8px;
        padding: 4px 2px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .hero-innate-skill-text {
        color: #fff !important;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        white-space: pre-line;
        width: 100%;
        display: block;
    }

    /* 竖屏技能选择弹窗列数 */
    .skill-picker-list {
        grid-template-columns: repeat(auto-fill, 128px);
    }
}

@media (max-width: 480px) {
    .hero-sim-equip-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .hero-skill-slot {
        min-height: 48px;
    }

    .hero-remove {
        width: 16px;
        height: 16px;
        top: -4px;
        right: -4px;
        font-size: 10px;
        line-height: 12px;
        border-width: 1px;
    }

    .hero-skill-slot-icon {
        width: 48px;
        height: 48px;
    }

    .hero-skill-slot-badge-icon {
        width: 12px;
        height: 12px;
        bottom: 2px;
        right: 2px;
    }

    .hero-skill-slot-name {
        font-size: 12px;
    }

    /* 更窄屏幕技能选择弹窗列数 */
    .skill-picker-list {
        grid-template-columns: repeat(auto-fill, 128px);
    }
}

/* ===== 技能选择弹窗 ===== */
#skillPickerModal .modal-lg {
    width: 90vw;
    max-width: 1000px;
    max-height: 80vh;
}

#skillPickerModal .modal-body {
    align-items: stretch;
}

.skill-picker-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.skill-picker-list {
    max-height: 65vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, 128px);
    gap: 10px;
    padding: 4px;
    justify-content: start;
}

.skill-picker-list::-webkit-scrollbar {
    width: 6px;
}

.skill-picker-list::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 3px;
}

.skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    width: 128px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
    overflow: visible;
}

.skill-card:hover {
    border-color: var(--accent-light);
}

.skill-card.equipped {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent);
    background: rgba(99, 102, 241, 0.15);
}
.skill-card.equipped:hover {
    border-color: var(--accent);
    background: rgba(99, 102, 241, 0.15);
}

.skill-card-icon-wrap {
    position: relative;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    overflow: visible;
}

.skill-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

.skill-card-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}

.skill-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.skill-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    text-align: center;
    line-height: 1.3;
}

.skill-card-level {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.skill-card-effects {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.skill-card-effects-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

/* 当前属性和满级属性文本加粗 */
.skill-card-effects-current .stat-line,
.skill-card-effects-max .stat-line {
    font-size: 12px;
}

.skill-card-effects-dim {
    opacity: 0.4;
}

.skill-card-max-label {
    font-size: 10px;
    color: var(--accent-light);
    font-weight: 500;
    margin: 2px 0;
}


/* 属性图标行 */
.stat-line {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--text-primary);
}
.stat-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    vertical-align: middle;
    object-fit: contain;
}

.skill-picker-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* 技能选择弹窗关闭按钮红色 */
#skillPickerModal .modal-close {
    color: #e53e3e;
}
#skillPickerModal .modal-close:hover {
    color: #c53030;
    background: rgba(229, 62, 62, 0.1);
}

/* ===== 装备选择弹窗 ===== */
#equipPickerModal .modal-lg {
    width: 80vw;
    max-width: 1600px;
    max-height: 85vh;
    padding: 0;
    overflow: hidden;
}
#equipPickerModal .modal-header {
    padding: 10px 12px;
}
.equip-picker-close-btn {
    width: auto !important;
    height: 24px !important; /* 与【普通冒险】按钮同高（实测 24px：height:24px + padding 2px + line-height 24px） */
    margin-left: 5px; /* 与普通冒险按钮 5px 间距（防竖屏时靠太近） */
    padding: 0 10px !important; /* 适当减小左右 padding，避免按钮过胖 */
    background: #dc2626 !important;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 24px;
}
.equip-picker-close-btn:hover {
    background: #b91c1c !important;
}
/* 装备选择弹窗标题行 */
.equip-picker-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.equip-picker-title-row .modal-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.equip-picker-title-row #equipPickerDungeonBtn {
    flex-shrink: 0;
    padding: 2px 8px;
}
#equipPickerModal { z-index: 2500; }
#equipPickerModal .modal-body {
    align-items: stretch !important;
    width: 100%;
}

/* 装备选择弹窗主体 */
.equip-picker-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.equip-picker-fixed {
    flex-shrink: 0;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: var(--bg-primary);
}
.equip-picker-filter-row {
    display: flex;
    gap: 0;
    align-items: center;
}
.equip-picker-filter-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
/* 星能铸造和超越同行布局 */
.equip-picker-sf-tc-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
}
.equip-picker-sf-tc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.equip-picker-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
/* 应用全部按钮 */
.apply-all-btn {
    background: rgb(59, 130, 246);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}
.apply-all-btn:hover {
    background: rgb(37, 99, 235);
}
.equip-picker-label-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.apply-all-enchant {
    display: block;
    margin: 0 auto 6px;
    width: fit-content;
}
.equip-picker-filter-section .tab-group {
    width: auto;
}
.equip-picker-toggle-row {
    display: flex;
    gap: 0;
}
.equip-picker-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    font-size: 11px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}
.equip-picker-toggle-btn .toggle-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
.equip-picker-toggle-btn:hover {
    border-color: var(--accent);
}
.equip-picker-toggle-btn.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.equip-picker-transcend-container {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
}
.equip-picker-transcend-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.16);
    transition: color 0.15s, filter 0.15s;
}
.equip-picker-transcend-btn svg {
    width: 32px;
    height: 32px;
    display: block;
}
.equip-picker-transcend-btn:hover {
    color: rgba(96, 165, 250, 0.5);
}
.equip-picker-transcend-btn.active {
    color: #60a5fa;
    filter: drop-shadow(rgba(96, 165, 250, 0.9) 0px 0px 3px);
}

/* 亮色主题：未选中状态描边和数字为深灰色 */
body.light .equip-picker-transcend-btn {
    color: #555;
}
body.light .equip-picker-transcend-btn:hover {
    color: #333;
}
/* 选中状态保持原来的蓝色描边和发光 */
body.light .equip-picker-transcend-btn.active {
    color: #60a5fa;
    filter: drop-shadow(rgba(96, 165, 250, 0.9) 0px 0px 3px);
}
/* 亮色主题：数字颜色 */
body.light .equip-picker-transcend-btn svg text {
    fill: #555 !important;
}
body.light .equip-picker-transcend-btn.active svg text {
    fill: #fff !important;
}
.equip-picker-quality-row {
    display: flex;
    gap: 4px;
}
.equip-picker-quality-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    font-size: 11px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}
.equip-picker-quality-btn:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}
.equip-picker-quality-btn.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.equip-picker-quality-btn img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 滚动区域 */
.equip-picker-scroll {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.equip-picker-scroll::-webkit-scrollbar {
    display: none;
}

/* 三列布局 */
.equip-picker-cols {
    display: flex;
    gap: 0;
    padding: 8px 6px 12px;
    min-width: 0;
}
.equip-picker-col {
    min-width: 0;
    flex: 1;
}
.equip-picker-col-equip {
    flex: 2;
    min-width: 0;
}
.equip-picker-col-element {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    padding-left: 6px;
}
.equip-picker-col-essence {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    padding-left: 6px;
}
.equip-picker-col-title {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 6px;
    color: var(--text-primary);
    padding: 4px 0;
}

/* 装备列表 */
.equip-picker-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.equip-picker-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, border-color 0.15s;
    min-width: 0;
    overflow: hidden;
    position: relative;
}
.equip-picker-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
/* 装备卡片左上角badge（阶级+元素+精萃） */
.equip-picker-item-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    z-index: 1;
    pointer-events: none;
}
.equip-picker-item-tier {
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background-image: url('图标/背景/阶级.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    text-align: center;
    line-height: 24px;
    text-shadow: 0 0 2px rgba(0,0,0,0.8);
}
.equip-picker-item-badge img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.equip-picker-item.selected { border-color: var(--accent, #6366f1); background: rgba(99, 102, 241, 0.12); }
/* 神器唯一性：其他槽位已选神器时，本槽位神器装备置灰不可选 */
.equip-picker-item-artifact-disabled {
    opacity: 0.4;
    filter: grayscale(1);
    cursor: not-allowed;
    pointer-events: auto;
}

.equip-picker-item img.equip-picker-main-img {
    width: 100%;
    height: auto;
    max-height: 72px;
    min-height: 48px;
    object-fit: contain;
    margin: 0 auto;
}
.equip-picker-item .equip-picker-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-primary, #333);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.equip-picker-attr-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    color: #ffffff;
    line-height: 1.4;
}
body.light .equip-picker-attr-row {
    color: #1a1a2e;
}
.equip-picker-attr-row img {
    width: 12px;
    height: 12px;
    max-width: 12px;
    max-height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 附魔网格 */
.equip-picker-enchant-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0,1fr)：列宽不被子项固定宽度撑大（避免溢出裁剪） */
    gap: 4px;
}
.equip-picker-enchant-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 3px 2px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
    position: relative;
}
/* 暗色状态（disabled）: 仅降低透明度，不改背景色 */
.equip-picker-enchant-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* 职业元素EP属性行：亮色主题蓝色字体 */
body.light .equip-picker-ep-row span:last-child {
    color: rgb(79, 70, 229);
}
/* 职业元素EP属性行：暗色主题淡黄色字体 */
.equip-picker-ep-row span:last-child {
    color: #f5e6a0;
}
/* 选中状态覆盖：亮色蓝色 */
body.light .equip-picker-enchant-item.selected .equip-picker-ep-row span:last-child {
    color: rgb(79, 70, 229);
}
/* 选中状态覆盖：暗色淡黄色 */
.equip-picker-enchant-item.selected .equip-picker-ep-row span:last-child {
    color: #f5e6a0;
}
/* disabled状态 */
.equip-picker-enchant-item.disabled .equip-picker-ep-row span:last-child {
    color: #888;
}
/* 附魔项左上角阶级badge */
.equip-picker-enchant-badge {
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 3;
    pointer-events: none;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    background-image: url('图标/背景/阶级.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 18px;
    height: 18px;
    display: block;
    text-align: center;
    line-height: 18px;
    text-shadow: 0 0 3px rgba(0,0,0,1), 0 0 1px rgba(0,0,0,1);
}
.equip-picker-enchant-item.selected { border-color: var(--accent, #6366f1); background: rgba(99, 102, 241, 0.12); }
.equip-picker-enchant-item img {
    width: 100%;
    max-width: 40px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
}
.equip-picker-enchant-item .effect-attr-icon,
.essence-effect-content .effect-attr-icon,
.bp-essence-popup-content .effect-attr-icon {
    width: 12px;
    height: 12px;
    max-width: 12px;
    max-height: 12px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 1px;
    flex-shrink: 0;
}
.equip-picker-enchant-item span {
    font-size: 8px;
    text-align: center;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.equip-picker-enchant-item .equip-picker-attr-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: #ffffff;
    line-height: 1.2;
}
body.light .equip-picker-enchant-item .equip-picker-attr-row {
    color: #1a1a2e;
}
.equip-picker-enchant-item .equip-picker-attr-row span {
    font-size: inherit;
}
.equip-picker-enchant-item .equip-picker-attr-row img {
    width: 12px;
    height: 12px;
    max-width: 12px;
    max-height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ===== 装备选择弹窗 - 横屏（宽度 >= 768px） ===== */
@media (min-width: 768px) {
    #equipPickerModal .equip-picker-item .equip-picker-name,
    #equipPickerModal .equip-picker-attr-row,
    #equipPickerModal .equip-picker-enchant-item > span {
        font-size: 12px;
    }
    .equip-picker-enchant-item .equip-picker-attr-row {
        font-size: 12px;
    }
    .equip-picker-enchant-item .equip-picker-attr-row img {
        width: 12px;
        height: 12px;
        max-width: 12px;
        max-height: 12px;
    }
    .effect-attr-icon {
        width: 12px;
        height: 12px;
    }
    .equip-picker-item img.equip-picker-main-img {
        max-height: 80px;
        min-height: 60px;
    }
    .equip-picker-enchant-item img {
        max-width: 48px;
        max-height: 48px;
    }
    .equip-picker-enchant-item .effect-attr-icon,
    .essence-effect-content .effect-attr-icon,
    .bp-essence-popup-content .effect-attr-icon {
        width: 12px;
        height: 12px;
        max-width: 12px;
        max-height: 12px;
    }
    #equipPickerModal .equip-picker-filter-label {
        font-size: 20px;
    }
    #equipPickerModal .equip-picker-toggle-btn {
        font-size: 14px;
    }
    #equipPickerModal .equip-picker-quality-btn {
        font-size: 14px;
    }
    .equip-picker-col-title {
        font-size: 20px;
    }
}

/* ===== 装备选择弹窗 - 竖屏（宽度 < 768px） ===== */
@media (max-width: 767px) {
    #equipPickerModal {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        height: var(--app-height, 100vh) !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        max-height: var(--app-height, 100vh) !important;
        border-radius: 16px !important;
        top: 0 !important;
        left: 0 !important;
        padding-top: env(safe-area-inset-top) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
    }
    #equipPickerModal .modal-lg {
        width: 100% !important;
        height: 80vh !important;
        height: 80dvh !important;
        height: calc(var(--app-height, 100vh) * 0.8) !important;
        max-height: 80vh !important;
        max-height: 80dvh !important;
        max-height: calc(var(--app-height, 100vh) * 0.8) !important;
        border-radius: 16px;
    }
    #equipPickerModal .modal-body {
        height: calc(100% - 120px) !important;
    }
    #equipPickerModal .equip-picker-item .equip-picker-name,
    #equipPickerModal .equip-picker-attr-row,
    #equipPickerModal .equip-picker-enchant-item > span {
        font-size: 10px;
    }
    .equip-picker-attr-row img {
        width: 10px;
        height: 10px;
        max-width: 10px;
        max-height: 10px;
    }
    .aura-attr-row img {
        width: 10px;
        height: 10px;
        max-width: 10px;
        max-height: 10px;
    }
    .equip-picker-enchant-item .equip-picker-attr-row {
        font-size: 10px;
    }
    .equip-picker-enchant-item .equip-picker-attr-row img {
        width: 10px;
        height: 10px;
        max-width: 10px;
        max-height: 10px;
    }
    .effect-attr-icon {
        width: 10px;
        height: 10px;
    }
    .equip-picker-item img.equip-picker-main-img {
        max-height: 48px;
        min-height: 36px;
    }
    .equip-picker-enchant-item img {
        max-width: 32px;
        max-height: 32px;
    }
    .equip-picker-enchant-item .effect-attr-icon,
    .essence-effect-content .effect-attr-icon,
    .bp-essence-popup-content .effect-attr-icon {
        width: 10px;
        height: 10px;
        max-width: 10px;
        max-height: 10px;
    }
    /* 竖屏三列横排 40%/30%/30% */
    .equip-picker-cols {
        flex-direction: row !important;
    }
    .equip-picker-col-equip {
        flex: 4 !important;
    }
    .equip-picker-col-element {
        flex: 3 !important;
        margin-left: 4px !important;
        padding-left: 4px !important;
    }
    .equip-picker-col-essence {
        flex: 3 !important;
        margin-left: 4px !important;
        padding-left: 4px !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    /* 竖屏附魔网格2列 */
    .equip-picker-enchant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 竖屏2列：列宽不被子项固定宽度撑大 */
    }
    /* 竖屏badge缩小为16px */
    .equip-picker-item-tier {
        width: 16px;
        height: 16px;
        font-size: 8px;
        line-height: 16px;
    }
    .equip-picker-item-badge img {
        width: 16px;
        height: 16px;
    }
    /* 竖屏神器图标与亲和图片同大小 */
    .equip-picker-artifact-icon {
        width: 16px !important;
        height: 16px !important;
    }
    /* 竖屏筛选分3行 */
    .equip-picker-filter-row {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .equip-picker-filter-section {
        width: 100% !important;
        flex: none !important;
    }
    /* 竖屏装备网格2列 */
    .equip-picker-list { grid-template-columns: repeat(2, 1fr); }
    #equipPickerModal .equip-picker-filter-label {
        font-size: 14px;
    }
    #equipPickerModal .equip-picker-toggle-btn {
        font-size: 11px;
    }
    #equipPickerModal .equip-picker-transcend-btn {
        width: 28px;
        height: 28px;
    }
    #equipPickerModal .equip-picker-transcend-btn svg {
        width: 28px;
        height: 28px;
    }
    #equipPickerModal .equip-picker-quality-btn {
        font-size: 11px;
    }
    .equip-picker-col-title {
        font-size: 14px;
    }
}

/* ===== 技能描述弹窗（竖屏用） ===== */
.hero-sim-desc-popup {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2500;
}

.hero-sim-desc-popup-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    max-width: 85vw;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
}

.hero-sim-desc-popup-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.hero-sim-desc-popup-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.hero-sim-desc-popup-close {
    margin-top: 12px;
    text-align: right;
}

.hero-sim-desc-popup-close button {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    cursor: pointer;
}

/* ===== 自定义下拉菜单 ===== */
.custom-select-dropdown::-webkit-scrollbar {
    display: none;
}
.custom-select-wrapper {
    vertical-align: middle;
    display: inline-flex;
    flex-direction: column;
    position: relative;
}

/* 自定义下拉trigger尺寸：横屏60x32 */
.custom-select-trigger {
    width: 60px;
    height: 32px;
    font-size: 20px;
    font-weight: 700;
}

/* 自定义下拉dropdown宽度跟随trigger */
.custom-select-dropdown {
    width: 60px;
}

/* 竖屏自定义下拉trigger尺寸 */
@media (max-width: 768px) {
    .custom-select-trigger {
        width: 50px;
        height: 20px;
        font-size: 16px;
    }
    .custom-select-dropdown {
        width: 50px;
    }
    /* 种子下拉30px */
    .sim-seed-item .custom-select-trigger {
        width: 30px;
        height: 20px;
    }
    .sim-seed-item .custom-select-dropdown {
        width: 30px;
    }

    /* 图纸大全：控制栏响应式 */
    .bp-control-bar {
        flex-wrap: wrap;
    }
    .bp-filter-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .bp-filter-row {
        grid-template-columns: 40px 1fr;
        gap: 6px;
    }
    .bp-filter-row-label {
        font-size: 12px;
    }
}

/* ===== 图纸大全页面样式 ===== */

/* 控制栏 */
.bp-control-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

/* 胶囊按钮组 */
.bp-capsule-group {
    display: inline-flex;
    gap: 0;
    background: var(--bg-secondary, #16213e);
    border-radius: 24px;
    padding: 3px;
}

.bp-capsule-btn {
    padding: 6px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.bp-capsule-btn:hover {
    color: var(--text-primary);
}

.bp-capsule-btn.active {
    background: #5B5FC7;
    color: #fff;
    box-shadow: 0 2px 6px rgba(91, 95, 199, 0.25);
}

/* 超越按钮 */
.bp-transcend-btn {
    padding: 6px 20px;
    border: 2px solid #F5A623;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #F5A623;
    background: #fff;
    transition: all 0.2s;
    white-space: nowrap;
}

.bp-transcend-btn:hover {
    opacity: 0.9;
}

.bp-transcend-btn.active {
    background: linear-gradient(135deg, #FFA726, #FF9800);
    color: #fff;
    border: none;
}

/* 筛选与搜索卡片 */
.bp-filter-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bp-filter-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.bp-filter-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.bp-search-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bp-search-input {
    height: 36px;
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    outline: none;
    transition: border-color 0.2s;
}

.bp-search-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

.bp-search-input:focus {
    border-color: var(--accent, #6366f1);
}

.bp-search-btn {
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #5B4FD8;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.bp-search-btn:hover {
    opacity: 0.9;
}

/* 搜索输入框包裹（含清空X按钮） */
.bp-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.bp-search-input-wrap .bp-search-input {
    padding-right: 28px;
}
.bp-search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
}
.bp-search-input-wrap:hover .bp-search-clear {
    display: flex;
}
.bp-search-clear:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

/* 重置按钮 */
.bp-reset-btn {
    padding: 6px 20px;
    border: 2px solid #e74c3c;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #e74c3c;
    background: #fff;
    transition: all 0.2s;
    white-space: nowrap;
}
.bp-reset-btn:hover {
    opacity: 0.9;
}

.bp-filter-note {
    font-size: 12px;
    color: #999;
    margin-bottom: 12px;
}

/* 筛选行容器 */
.bp-filter-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 单行筛选行 */
.bp-filter-row {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 8px;
    align-items: center;
}

.bp-filter-row-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.bp-filter-row-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* 星号按钮（通配） */
.bp-star-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

/* 亮色主题下*未选中变黑色 */
.light .bp-star-btn {
    color: #000;
}

.bp-star-btn:hover {
    opacity: 0.9;
}

.bp-star-btn.active {
    background: #5B4FD8;
    color: #fff;
    box-shadow: 0 0 0 2px #4a6cf7, 0 0 8px rgba(74, 108, 247, 0.3);
}

/* 阶级按钮 */
.bp-tier-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid var(--border, #888);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.bp-tier-btn:hover {
    opacity: 0.9;
}

.bp-tier-btn.active {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 2px #4a6cf7, 0 0 8px rgba(74, 108, 247, 0.3);
}

/* 物品类型按钮 */
.bp-type-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid var(--border, #888);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    padding: 4px;
    flex-shrink: 0;
    position: relative;
}

.bp-type-btn:hover {
    opacity: 0.9;
}

.bp-type-btn.active {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 2px #4a6cf7, 0 0 8px rgba(74, 108, 247, 0.3);
}

.bp-type-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* ===== 装备表格视图 ===== */
.bp-table-container {
    width: 100%;
    padding: 0 16px 16px;
}

.bp-table-scroll {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border, #e0e0e0);
    position: relative;
}

.bp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.bp-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.bp-table th {
    background: var(--bg-secondary, #f0f0f5);
    padding: 6px 8px;
    text-align: center;
    font-size: 16px;
    color: var(--text-secondary, #666);
    border-bottom: 2px solid var(--border, #e0e0e0);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    vertical-align: middle;
    display: table-cell;
}

.bp-table th:hover {
    background: var(--accent-light, #e8e8ff);
}

.bp-table th .th-content {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    vertical-align: middle;
}

.bp-table th .th-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.bp-table th .th-text {
    font-size: 16px;
    line-height: 1.2;
}

.bp-table th .sort-arrow {
    font-size: 10px;
    margin-left: 2px;
    opacity: 0.3;
}

.bp-table th.sorted .sort-arrow {
    opacity: 1;
    color: var(--accent, #5B4FD8);
}

.bp-table td {
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid var(--border, #e0e0e0);
    color: var(--text-primary, #333);
    vertical-align: middle;
    font-size: 14px;
}

.bp-table td > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.bp-table tbody tr {
    transition: background 0.15s;
}

.bp-table tbody tr:nth-child(even) {
    background: var(--bg-secondary, #f8f8fc);
}

.bp-table tbody tr:hover {
    background: var(--accent-light, #e8e8ff);
}

/* 图片列 */
.bp-table .col-img {
    text-align: center;
    padding: 4px;
}

.bp-table .col-img img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
}

/* 类型列 */
.bp-table .col-type {
    display: inline-block;
    white-space: nowrap;
}

.bp-table .col-type img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.bp-table .col-type span {
    font-size: 12px;
    color: var(--text-primary, #333);
}

/* 属性图标列 */
.bp-table .tier-badge {
    position: relative;
    margin: 0 auto;
}

.bp-table .col-stat img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 材料列 */
.bp-table .col-material {
    text-align: center;
    white-space: nowrap;
}

.bp-table .col-material img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.bp-table .col-material .mat-text {
    font-size: 10px;
    color: var(--text-secondary, #666);
}

/* 工人列 */
.bp-table .col-worker {
    text-align: center;
    white-space: nowrap;
}

.bp-table .col-worker img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* 分页 */
.bp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.bp-pagination button {
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 6px;
    background: var(--bg-secondary, #f0f0f5);
    color: var(--text-primary, #333);
    font-size: 13px;
    cursor: pointer;
    padding: 0 6px;
    transition: all 0.15s;
}

.bp-pagination button:hover {
    background: var(--accent-light, #e8e8ff);
}

.bp-pagination button.active {
    background: #5B4FD8;
    color: #fff;
    border-color: #5B4FD8;
}

.bp-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bp-pagination .page-info {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin: 0 8px;
}

/* 竖屏适配 */
@media (max-width: 768px) {
    .bp-table-container {
        padding: 0 8px 8px;
    }
    .bp-table {
        font-size: 12px;
    }
    .bp-table th {
        padding: 6px 4px;
        font-size: 12px;
    }
    .bp-table th .th-text {
        font-size: 12px;
    }
    .bp-table td {
        padding: 4px;
        font-size: 12px;
    }
    .bp-table .col-img img {
        width: 40px;
        height: 40px;
    }
    .bp-pagination button {
        min-width: 28px;
        height: 28px;
        font-size: 11px;
    }
    .col-filter-btn {
        font-size: 12px;
    }
}

/* 列筛选按钮 */
.col-filter-btn {
    display: inline-block;
    cursor: pointer;
    font-size: 16px;
    margin-left: 2px;
    vertical-align: middle;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.col-filter-btn:hover {
    opacity: 1;
}

/* 列筛选弹窗 */
.col-filter-panel {
    position: absolute;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    padding: 8px;
    z-index: 10000;
    width: 250px;
    max-height: 360px;
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.col-filter-search {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 6px;
    outline: none;
}

.col-filter-search:focus {
    border-color: var(--accent, #5B4FD8);
}

.col-filter-list {
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
}

.col-filter-list label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-primary, #333);
}

.col-filter-list label:hover {
    background: var(--bg-secondary, #f0f0f5);
}

.col-filter-list input[type="checkbox"] {
    flex-shrink: 0;
}

.col-filter-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.col-filter-actions button {
    padding: 4px 10px;
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    background: var(--bg-secondary, #f0f0f5);
    color: var(--text-primary, #333);
    transition: background 0.15s;
}

.col-filter-actions button:hover {
    background: var(--accent-light, #e8e8ff);
}

.col-filter-actions .col-filter-confirm {
    background: #5B4FD8;
    color: #fff;
    border-color: #5B4FD8;
}

.col-filter-actions .col-filter-confirm:hover {
    background: #4a3fc7;
}

.col-filter-divider {
    height: 1px;
    background: var(--border, #e0e0e0);
    margin: 4px 0;
}

.col-filter-all-label {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-primary, #333);
    border-bottom: 1px solid var(--border, #e0e0e0);
    padding-bottom: 4px;
    margin-bottom: 4px;
}

/* 图片列最小宽度 */
.bp-table .col-img {
    min-width: 64px;
}

/* 排序信息行 */
.bp-sort-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--text-secondary, #666);
}

.bp-sort-info strong {
    color: var(--text-primary, #333);
}

/* 模块视图卡片网格 */
.bp-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 12px 16px;
}

/* 模块视图卡片 */
.bp-module-card {
    position: relative;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow 0.2s, transform 0.15s;
    cursor: pointer;
    text-align: left;
    min-width: 180px;
}

.bp-module-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

/* 卡片顶部：阶级 + 类型 + 名称 */
.bp-module-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 150px;
    margin: 0 auto;
    width: 100%;
}

.bp-module-tier {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.bp-module-tier img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bp-module-tier span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    line-height: 1;
    padding: 0;
    margin: 0;
}

.bp-module-type {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.bp-module-type img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bp-module-name {
    flex: 1;
    min-width: 0;
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary, #333);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 卡片中间：蓝图背景 + 装备图 */
.bp-module-card-image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    max-width: 150px;
    aspect-ratio: 1;
    margin: 0 auto;
}

.bp-module-card-image .bp-blueprint-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bp-module-card-image .bp-equip-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    object-fit: contain;
    z-index: 1;
}

/* 卡片材料区 */
.bp-module-materials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex-wrap: nowrap;
}

.bp-module-material {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 32px;
    flex-shrink: 0;
}

.bp-module-material img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.bp-module-material span {
    font-size: 16px;
    color: var(--text-primary, #333);
    margin-top: 1px;
}

/* 卡片属性区 */
.bp-module-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    flex-wrap: wrap;
    background: var(--bg-secondary, #f8f8fc);
    border-radius: 8px;
    padding: 4px 8px;
}

.bp-module-empty-text {
    color: var(--text-secondary, #999);
    font-size: 12px;
}

.bp-module-stat {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 16px;
    color: var(--text-primary, #333);
}

.bp-module-stat img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 卡片类型背景图片 */
.bp-module-type-bg {
    position: relative;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.bp-module-type-bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 元素/精萃图标 */
.bp-module-affinity-icon {
    position: absolute;
    left: 2px;
    width: 32px;
    height: 32px;
    z-index: 2;
}

/* 模块视图空状态 */
.bp-module-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-secondary, #999);
    font-size: 14px;
}

/* 响应式 */
@media (max-width: 768px) {
    .bp-module-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        padding: 0;
    }
    .bp-module-card {
        padding: 8px;
        border-radius: 12px;
        min-width: 0;
        width: 100%;
    }
    .bp-module-card-image {
        max-width: 90px;
        width: 90px;
        height: 90px;
    }
    .bp-module-card-header {
        max-width: 90px;
    }
    .bp-module-type-bg {
        width: 16px;
        height: 16px;
    }
    .bp-module-type {
        width: 16px;
        height: 16px;
    }
    /* 竖屏时物品类型图标8x8（背景保持16x16） */
    .bp-module-type-bg img:last-child {
        width: 8px !important;
        height: 8px !important;
        inset: auto !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    .bp-module-tier {
        width: 16px;
        height: 16px;
    }
    .bp-module-tier span {
        font-size: 7px;
        line-height: 1;
        padding: 0;
        margin: 0;
    }
    .bp-module-name {
        font-size: 12px;
    }
    /* 资源与组件：去掉固定宽度，平均分配 */
    .bp-module-material {
        min-width: 0;
        flex-shrink: 1;
        flex: 1;
    }
    .bp-module-material img {
        width: 16px;
        height: 16px;
    }
    .bp-module-material span {
        font-size: 11px;
    }
    .bp-module-materials {
        gap: 1px;
    }
    .bp-module-stat {
        font-size: 11px;
    }
    .bp-module-stat img {
        width: 12px;
        height: 12px;
    }
    .bp-module-affinity-icon {
        width: 20px;
        height: 20px;
    }
}

/* ========== 装备详情弹窗 ========== */
#equipDetailModal {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
#equipDetailModal.active {
    display: flex;
}

.equip-detail-modal {
    position: relative;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border, #c7d2fe);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    backdrop-filter: blur(12px);
    padding: 16px;
    max-width: 720px;
    width: fit-content;
    min-width: 360px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-primary, #312e81);
}

/* 关闭按钮 */
.equip-detail-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 22px;
    line-height: 1;
    color: #4338ca;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}
.equip-detail-close:hover {
    background: #fff;
    color: #ef4444;
}

/* 顶部标题 */
.equip-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 40px;
}
.equip-detail-tier {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}
.equip-detail-tier img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.equip-detail-tier span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
}
.equip-detail-type-bg {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}
.equip-detail-type-bg img:first-child {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.equip-detail-type-bg img:last-child {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: contain;
}
.equip-detail-name {
    font-size: 20px;
    font-weight: bold;
    color: var(--text-primary, #312e81);
}

/* 主体 */
.equip-detail-body {
    display: flex;
    flex-direction: row;
    gap: 12px;
}
.equip-detail-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

/* 装备大图 */
.equip-detail-image {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.equip-detail-image .bp-blueprint-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.equip-detail-image .bp-equip-img {
    position: absolute;
    width: 70%;
    height: 70%;
    object-fit: contain;
    z-index: 1;
}
.equip-detail-affinity {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.equip-detail-affinity img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* 材料区 */
.equip-detail-materials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.equip-detail-materials .detail-mat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 16px;
    color: var(--text-primary, #312e81);
    min-width: 32px;
}
.equip-detail-materials .detail-mat-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* 工人区 */
.equip-detail-workers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.equip-detail-workers .detail-worker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.equip-detail-workers .detail-worker-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
}
.equip-detail-workers .detail-worker-item span {
    font-size: 11px;
    color: var(--text-primary, #4338ca);
    font-weight: 600;
}

/* 右侧信息卡片框 */
.equip-detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}
.equip-detail-info-card {
    background: var(--bg-secondary, #eef2ff);
    border-radius: 16px;
    padding: 6px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 神器属性卡片左右布局 */
.equip-detail-info-card.artifact-layout {
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}
.equip-detail-info-card.artifact-layout .equip-detail-info-rows {
    flex: 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}
.equip-detail-artifact-icon {
    flex: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.equip-detail-artifact-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform 0.2s;
}
.equip-detail-artifact-icon img:hover {
    transform: scale(1.1);
}
/* 神器技能详情 - 悬浮卡片（相对弹窗绝对定位） */
.equip-detail-artifact-skill {
    position: absolute;
    z-index: 100;
    width: 70%;
    left: 15%;
    background: var(--bg-primary, #f0f0ff);
    border-radius: 12px;
    padding: 10px 14px;
    border: 1px solid var(--border, #c7d2fe);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s, transform 0.15s;
}
.equip-detail-artifact-skill.visible {
    opacity: 1;
    transform: scale(1);
}
.artifact-skill-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.artifact-skill-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-primary, #4338ca);
    text-align: center;
    margin-bottom: 2px;
}
.artifact-skill-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--text-primary, #4338ca);
    text-align: center;
    margin-bottom: 4px;
}
.artifact-skill-divider {
    height: 1px;
    background: #c7d2fe;
    margin: 6px 0;
    width: 90%;
    align-self: center;
}
.artifact-skill-effect-label {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-secondary, #666);
    text-align: left;
    margin-top: 2px;
}
.artifact-skill-effect-text {
    font-size: 12px;
    color: var(--text-primary, #312e81);
    text-align: center;
    line-height: 1.4;
}
/* 技能效果圆点列表（神器/光环之歌/精萃悬浮面板） */
.skill-effect-list {
    list-style: disc;
    padding-left: 18px;
    margin: 2px 0;
    text-align: left;
}
.skill-effect-list li {
    font-size: 12px;
    color: var(--text-primary, #312e81);
    line-height: 1.5;
    margin-bottom: 2px;
}
.skill-effect-list li:last-child {
    margin-bottom: 0;
}
.skill-effect-list .effect-attr-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    margin-right: 2px;
}
/* 光环之歌战斗技能属性图标尺寸（同detail-combat-item img） */
.detail-combat-item .effect-attr-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
/* 右侧信息行 */
.equip-detail-info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary, #312e81);
    flex: 1;
}
.equip-detail-info-row img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}
.equip-detail-info-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}
.equip-detail-info-label {
    flex: 0 0 40%;
    font-size: 10px;
    color: var(--text-secondary, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.equip-detail-info-value {
    flex: 0 0 60%;
    font-size: 12px;
    color: var(--text-primary, #312e81);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 战斗属性 */
.equip-detail-combat {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    flex: 1;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 12px;
    padding: 8px 12px;
}
.detail-combat-attrs {
    flex: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.equip-detail-artifact-icon {
    flex: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* 双持装备左右手类型图片容器（布局同 .equip-detail-artifact-icon，无悬浮面板） */
.equip-detail-dualwield-types {
    flex: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.dualwield-type-img-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dualwield-type-img-wrap > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dualwield-type-img-wrap > img:last-child {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.equip-detail-combat .detail-combat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--text-primary, #312e81);
}
.equip-detail-combat .detail-combat-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* 底部加成区域 */
.equip-detail-bonuses {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px;
    justify-content: center;
}
.equip-detail-bonus-section {
    background: var(--bg-secondary, #eef2ff);
    border-radius: 16px;
    padding: 4px;
    display: flex;
    flex-direction: column;
}
.equip-detail-bonus-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #4338ca);
    text-align: center;
    margin-bottom: 4px;
}
.equip-detail-bonus-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-height: 28px;
}
.equip-detail-bonus-items .detail-bonus-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40px;
    height: 50px;
    flex-shrink: 0;
    padding: 2px;
}
.equip-detail-bonus-items .detail-bonus-item .detail-bonus-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.9;
}
.equip-detail-bonus-items .detail-bonus-item img:not(.detail-bonus-bg) {
    width: 20px;
    height: 20px;
    object-fit: contain;
    position: relative;
    z-index: 1;
}
.equip-detail-bonus-items .detail-bonus-item span {
    font-size: 11px;
    color: #1a1a2e;
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.1;
    word-break: break-all;
}

/* 弹窗响应式 */
@media (max-width: 640px) {
    .equip-detail-modal {
        padding: 12px;
        border-radius: 16px;
    }
    .equip-detail-body {
        flex-direction: row;
    }
    .equip-detail-left {
        flex: 1;
        max-width: 50%;
    }
    .equip-detail-image {
        width: 70px;
        height: 70px;
    }
    .equip-detail-affinity img {
        width: 14px;
        height: 14px;
    }
    /* 左侧资源/组件行 */
    .equip-detail-materials .detail-mat-item {
        font-size: 10px;
        min-width: 0;
    }
    .equip-detail-materials .detail-mat-item img {
        width: 18px;
        height: 18px;
    }
    /* 加成卡片竖屏 */
    .equip-detail-bonus-items .detail-bonus-item {
        width: 30px;
        height: 40px;
    }
    .equip-detail-bonus-items .detail-bonus-item span {
        font-size: 9px;
    }
    .equip-detail-bonus-items .detail-bonus-item img:not(.detail-bonus-bg) {
        width: 18px;
        height: 18px;
    }
    .equip-detail-bonuses {
        grid-template-columns: auto auto;
    }
    .equip-detail-artifact-icon img {
        width: 24px;
        height: 24px;
    }
    /* 竖屏双持左右手类型图片大小 */
    .dualwield-type-img-wrap {
        width: 24px;
        height: 24px;
    }
}

/* ===== 精萃效果区域（装备选择弹窗） ===== */
.essence-effect-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.essence-effect-divider {
    height: 1px;
    background: var(--border);
    margin: 2px 0;
    width: 90%;
}
.essence-effect-section {
    margin: 1px 0;
    text-align: center;
}
.essence-effect-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 1px;
}
.essence-effect-content {
    font-size: 12px;
    color: #f5e6a0;
    line-height: 1.4;
}
/* 亮色主题：精粹技能效果蓝色字体 */
body.light .essence-effect-content {
    color: rgb(79, 70, 229);
}
/* 选中状态保持同色 */
body.light .equip-picker-enchant-item.selected .essence-effect-content {
    color: rgb(79, 70, 229);
}
.equip-picker-enchant-item.selected .essence-effect-content {
    color: #f5e6a0;
}
/* 精粹暗色状态（disabled）: 同上淡黄色背景（已在 .equip-picker-enchant-item.disabled 中定义） */
.effect-attr-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 1px;
    flex-shrink: 0;
}

/* 光环之歌装备技能属性区域（布局类似精萃卡片，属性格式同装备属性，颜色同精萃技能效果） */
.aura-effect-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.aura-effect-divider {
    height: 1px;
    background: var(--border);
    margin: 2px 0;
    width: 90%;
}
.aura-attr-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 12px;
    color: #f5e6a0;
    line-height: 1.4;
}
body.light .aura-attr-row {
    color: rgb(79, 70, 229);
}
.aura-attr-row img {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 图纸模块视图 - 精萃亲和图标 */
.bp-module-essence-icon {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    object-fit: contain;
    cursor: pointer;
    z-index: 2;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}
.bp-module-essence-icon:hover {
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.8));
    transform: translateY(-50%) scale(1.1);
}

/* 精萃效果悬浮面板（用于图纸模块视图） */
.bp-essence-popup {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.bp-essence-popup.visible {
    display: block;
    opacity: 1;
}
.bp-essence-popup-section {
    margin-bottom: 4px;
}
.bp-essence-popup-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent);
}
.bp-essence-popup-content {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* 神器图标（选择装备弹窗 - 装备大图右下角，同阶级图标大小） */
.equip-picker-artifact-icon {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 24px;
    height: 24px;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto;
}

/* 神器效果悬浮面板（选择装备弹窗，仅横屏显示，位于图标右下角） */
.equip-picker-artifact-popup {
    position: fixed;
    width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto;
}
.equip-picker-artifact-popup.visible {
    opacity: 1;
    transform: scale(1);
}
.equip-picker-artifact-popup-label {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-light);
    margin-bottom: 6px;
    text-align: center;
}
.equip-picker-artifact-popup-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.equip-picker-artifact-popup-line {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.4;
}
.equip-picker-artifact-popup-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 6px;
}
.equip-picker-artifact-popup-text .effect-attr-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

/* 竖屏隐藏神器悬浮面板（神器图标保留显示） */
@media (max-width: 767px) {
    .equip-picker-artifact-popup {
        display: none !important;
    }
}

/* ===== 装备属性展示模式 ===== */
/* 背景图翻转过渡动画 */
.sim-equip-slot .sim-equip-slot-bg {
    transition: transform 0.3s ease;
}

/* 属性展示覆盖层：覆盖在背景图区域上 */
.sim-slot-attr-overlay {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    border-radius: 12px;
}

/* 属性列表容器 */
.sim-slot-attr-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5cqh;
}

/* 单行属性：图标 + 数值，水平居中 */
.sim-slot-attr-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    line-height: 1.2;
}

/* ===== 防御减伤曲线页面 ===== */
#defcurve {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 12px 16px;
}

@media (min-width: 1024px) {
    #defcurve { padding: 0 24px 48px; }
}

.defcurve-header {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
}

@media (min-width: 1024px) { .defcurve-header { margin-bottom: 48px; } }

.defcurve-back {
    display: none;
}

.defcurve-title {
    font-size: 24px;
    font-weight: 900;
    color: #1e293b;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) { .defcurve-title { font-size: 30px; } }
@media (min-width: 1024px) { .defcurve-title { font-size: 36px; } }

.defcurve-desc {
    max-width: 672px;
    margin: 0 auto;
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
    padding: 0 8px;
}

@media (min-width: 640px) { .defcurve-desc { font-size: 14px; } }
@media (min-width: 1024px) { .defcurve-desc { font-size: 16px; } }

.defcurve-desc strong { color: #334155; font-weight: 500; }

.defcurve-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

@media (min-width: 640px) { .defcurve-inputs { gap: 16px; } }
@media (min-width: 1024px) { .defcurve-inputs { gap: 24px; margin-bottom: 40px; } }

.defcurve-card {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

@media (min-width: 640px) { .defcurve-card { padding: 16px; border-radius: 16px; } }
@media (min-width: 1024px) { .defcurve-card { padding: 24px; } }

.defcurve-input-card:hover { border-color: #a5b4fc; }

.defcurve-input-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.defcurve-icon-box {
    padding: 4px;
    border-radius: 6px;
}
@media (min-width: 640px) { .defcurve-icon-box { padding: 6px; border-radius: 8px; } }
@media (min-width: 1024px) { .defcurve-icon-box { padding: 8px; } }

.defcurve-icon-box img { width: 20px; height: 20px; opacity: 0.8; }
@media (min-width: 640px) { .defcurve-icon-box img { width: 24px; height: 24px; } }
@media (min-width: 1024px) { .defcurve-icon-box img { width: 32px; height: 32px; } }

.defcurve-icon-amber { background: #fffbeb; }
.defcurve-icon-indigo { background: #eef2ff; }

.defcurve-label {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) { .defcurve-label { font-size: 14px; } }
@media (min-width: 1024px) { .defcurve-label { font-size: 18px; } }

.defcurve-number-input {
    width: 100%;
    font-size: 18px;
    font-weight: 900;
    color: #1e293b;
    border: none;
    outline: none;
    background: transparent;
    text-align: left;
    padding: 0;
}

@media (min-width: 640px) { .defcurve-number-input { font-size: 24px; } }
@media (min-width: 1024px) { .defcurve-number-input { font-size: 30px; } }

/* 预设按钮 */
.defcurve-preset-wrap { position: relative; }

.defcurve-preset-btn {
    width: 100%;
    height: 100%;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
    box-shadow: 0 4px 12px rgba(79,70,229,0.25);
}

@media (min-width: 640px) { .defcurve-preset-btn { padding: 16px; border-radius: 16px; gap: 6px; } }
@media (min-width: 1024px) { .defcurve-preset-btn { padding: 24px; gap: 8px; font-size: 18px; } }

.defcurve-preset-btn:hover { background: #4338ca; }

.defcurve-preset-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    z-index: 30;
    padding: 8px 0;
}

@media (min-width: 640px) { .defcurve-preset-dropdown { width: 320px; } }

.defcurve-preset-header {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.defcurve-preset-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.defcurve-preset-item:hover { background: #f8fafc; }
.defcurve-preset-item.selected { background: #eef2ff; }

.defcurve-preset-item img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    flex-shrink: 0;
}

.defcurve-preset-item-info { flex: 1; min-width: 0; }
.defcurve-preset-item-name { font-size: 14px; font-weight: 600; color: #1e293b; }
.defcurve-preset-item-stat { font-size: 12px; color: #64748b; }

/* 图表卡片 */
.defcurve-chart-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 640px) { .defcurve-chart-card { border-radius: 12px; } }

.defcurve-chart-topbar {
    flex-shrink: 0;
    height: 40px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    padding: 0 16px;
    justify-content: space-between;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(4px);
    z-index: 10;
}

@media (min-width: 640px) { .defcurve-chart-topbar { height: 48px; padding: 0 16px; } }
@media (min-width: 1024px) { .defcurve-chart-topbar { height: 56px; padding: 0 32px; } }

.defcurve-chart-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) { .defcurve-chart-title { font-size: 14px; } }
@media (min-width: 1024px) { .defcurve-chart-title { font-size: 24px; } }

.defcurve-chart-hint {
    display: none;
    font-size: 14px;
    color: #64748b;
}

@media (min-width: 640px) { .defcurve-chart-hint { display: block; } }

.defcurve-legend { display: flex; gap: 16px; }

.defcurve-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}

.defcurve-dot { width: 10px; height: 10px; border-radius: 50%; }
.defcurve-dot-green { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.6); }
.defcurve-dot-red { background: #ef4444; box-shadow: 0 0 8px rgba(244,63,94,0.6); }

.defcurve-chart-area {
    flex: 1;
    aspect-ratio: 960 / 500;
    position: relative;
}

@media (min-width: 640px) { .defcurve-chart-area { aspect-ratio: auto; } }

#dcSvg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (min-width: 640px) { #dcSvg { height: auto; } }

.defcurve-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 8px;
    min-width: 140px;
    max-width: calc(100% - 24px);
    z-index: 20;
    transition: all 0.075s;
    font-size: 12px;
}

@media (min-width: 640px) { .defcurve-tooltip { padding: 12px; min-width: 160px; border-radius: 12px; } }
@media (min-width: 1024px) { .defcurve-tooltip { padding: 16px; min-width: 200px; font-size: 14px; } }

.defcurve-tooltip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.defcurve-tooltip-label { color: #64748b; }
.defcurve-tooltip-value { font-weight: 700; color: #1e293b; font-variant-numeric: tabular-nums; margin-left: auto; }
.defcurve-tooltip-footer { margin-top: 6px; font-size: 11px; color: #94a3b8; border-top: 1px solid #f1f5f9; padding-top: 4px; }

.sim-slot-attr-row img {
    width: 11cqh;
    height: 11cqh;
    object-fit: contain;
    flex-shrink: 0;
}

.sim-slot-attr-row span {
    font-size: 9cqh;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    white-space: nowrap;
    font-weight: 600;
}

/* 精萃技能效果分界线（1px） */
.sim-slot-attr-divider {
    width: 70%;
    height: 1px;
    background: rgba(255,255,255,0.3);
    margin: 1cqh 0;
    flex-shrink: 0;
}

/* 精萃技能效果容器：列布局，每个属性占一行 */
.sim-slot-essence-effect {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5cqh;
    padding: 0 1cqw;
    width: 100%;
}

/* 单行精萃效果：图标 + 文本，水平居中，过宽时换行 */
.sim-slot-essence-effect-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    flex-wrap: wrap;
    font-size: 8cqh;
    color: #f5e6a0;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    text-align: center;
}

.sim-slot-essence-effect .effect-attr-icon {
    width: 9cqh;
    height: 9cqh;
    object-fit: contain;
    flex-shrink: 0;
}

/* 墓生灵行：图标作为内联文本（算1个字），手动拆分2行平均分配字数 */
.sim-slot-essence-effect-row.tomb-spirit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.3;
    padding: 0 0.5cqw;
}
.sim-slot-essence-effect-row.tomb-spirit-row .tomb-line {
    display: block;
    text-align: center;
    white-space: nowrap;
}
.sim-slot-essence-effect-row.tomb-spirit-row .effect-attr-icon {
    display: inline-block;
    vertical-align: middle;
    width: 8cqh;
    height: 8cqh;
    margin-right: 0.5cqw;
}

/* ===== 不生效/冲突装备特效 ===== */

/* 循环透明度动画：不透明→半透明→不透明，1次循环2秒 */
@keyframes sim-slot-inactive-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* 和平鸽火炬装备栏冲突状态：神器图纸图标红色泛光 + 不透明/半透明循环动画 */
.sim-equip-slot.sim-slot-artifact-edge-glow .sim-slot-artifact {
    animation: sim-slot-inactive-pulse 2s ease-in-out infinite;
}
.sim-equip-slot.sim-slot-artifact-edge-glow .sim-slot-artifact img {
    filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 3px rgba(255, 0, 0, 0.6));
}

/* 装备配装模式：装备大图红色泛光由JS内联设置（与品质泛光共存），此处仅保留动画 */
.sim-equip-slot.sim-slot-inactive .sim-equip-slot-equip {
    animation: sim-slot-inactive-pulse 2s ease-in-out infinite;
}

/* 装备配装模式：元素附魔和精萃附魔图片循环透明（与装备大图共用同一动画时机） */
.sim-equip-slot.sim-slot-inactive .sim-slot-element-enchant,
.sim-equip-slot.sim-slot-inactive .sim-slot-essence-enchant {
    animation: sim-slot-inactive-pulse 2s ease-in-out infinite;
}

/* 元素附魔和精萃附魔图片周围的红色泛光（静态，不单独动画） */
.sim-equip-slot.sim-slot-inactive .sim-slot-element-enchant img,
.sim-equip-slot.sim-slot-inactive .sim-slot-essence-enchant img {
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 1px rgba(255, 0, 0, 0.6));
}

/* 装备属性模式：属性展示层整体循环透明（所有子元素共用一个动画时机） */
.sim-slot-attr-overlay:has(.sim-slot-attr-inactive) {
    animation: sim-slot-inactive-pulse 2s ease-in-out infinite;
}
/* 装备属性模式：子元素红色泛光（静态filter，透明度由父层动画统一控制） */
.sim-slot-attr-overlay:has(.sim-slot-attr-inactive) .sim-slot-attr-row img,
.sim-slot-attr-overlay:has(.sim-slot-attr-inactive) .sim-slot-attr-row span,
.sim-slot-attr-overlay:has(.sim-slot-attr-inactive) .sim-slot-essence-effect-row,

/* ===== 泰坦精魂冲突状态 ===== */
/* 装备配置模式：泰坦附魔图标进入冲突状态（灰化+红色角标） */
.sim-slot-essence-enchant.titan-soul-conflict img {
    opacity: 0.4;
    filter: grayscale(100%) brightness(0.6);
    position: relative;
}
.sim-slot-essence-enchant.titan-soul-conflict::after {
    content: '×';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    background: #ff4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 5;
}

/* 装备属性模式：泰坦精萃技能效果进入冲突状态 */
.sim-slot-essence-effect.titan-soul-conflict {
    opacity: 0.55;
    filter: grayscale(60%);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sim-slot-essence-effect.titan-soul-conflict .sim-slot-essence-conflict-tag {
    font-size: 10px;
    color: #ff6644;
    font-weight: 600;
    text-align: left;
}
.sim-slot-essence-effect.titan-soul-conflict::after {
    content: none;
}

/* 精萃附魔卡片：唯一标记（泰坦专属：无法堆叠） */
.equip-picker-enchant-item.essence-has-unique {
    flex-direction: column;
}
.equip-picker-enchant-item.essence-has-unique .essence-unique-tag {
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: var(--accent-color);
    background: rgba(255, 165, 0, 0.12);
    border-top: 1px solid rgba(255, 165, 0, 0.3);
    line-height: 14px;
    padding: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 0 0 6px 6px;
}

/* 精萃附魔卡片内的唯一标记样式调整（卡片高度自适应） */
.equip-picker-enchant-item.essence-has-unique {
    min-height: 54px;
    padding-bottom: 16px;
}
.sim-slot-attr-overlay:has(.sim-slot-attr-inactive) .sim-slot-essence-effect-row img,
.sim-slot-attr-overlay:has(.sim-slot-attr-inactive) .sim-slot-essence-effect-row span,
.sim-slot-attr-overlay:has(.sim-slot-attr-inactive) .sim-slot-inactive-tip {
    filter: drop-shadow(0 0 3px rgba(255, 0, 0, 0.8));
}

/* 不生效提示文字样式 */
.sim-slot-inactive-tip {
    font-size: 8cqh;
    color: #ff6666;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0 0 4px rgba(255, 0, 0, 0.6), 0 1px 2px rgba(0,0,0,0.8);
    padding: 1cqh 1cqw;
}

/* ===== 冒险大全页面 ===== */
.adv-category-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.adv-category-btn {
    padding: 8px 24px;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.adv-category-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.adv-category-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
/* 泰坦塔子分类 */
.adv-sub-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.adv-sub-btn {
    padding: 4px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}
.adv-sub-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.adv-sub-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* 卡片网格 - 横屏一行4个，竖屏一行1个 */
.adv-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .adv-cards-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* 单个卡片 */
.adv-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    position: relative;
    transition: border-color 0.2s;
    min-width: 0;
    overflow: hidden;
}
.adv-card:hover {
    border-color: var(--accent);
}

/* 更多信息按钮 */
.adv-more-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 3px 10px;
    border: none;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent-light);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.adv-more-btn:hover {
    background: rgba(99, 102, 241, 0.3);
}

/* 卡片头部 */
.adv-card-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}
.adv-card-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
}
@media (min-width: 769px) {
    .adv-card-avatar {
        width: 56px;
        height: 56px;
    }
}
.adv-card-info {
    flex: 1;
    min-width: 0;
    text-align: center;
}
.adv-card-name {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-light);
    margin-bottom: 2px;
}
@media (min-width: 769px) {
    .adv-card-name {
        font-size: 16px;
    }
}
.adv-card-diff {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
    justify-content: center;
}
@media (min-width: 769px) {
    .adv-card-diff {
        font-size: 14px;
    }
}
.adv-card-diff img {
    width: 18px;
    height: 18px;
}
@media (min-width: 769px) {
    .adv-card-diff img {
        width: 24px;
        height: 24px;
    }
}
/* 头像名称 */
.adv-card-avatar-name {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: 2px;
}
@media (min-width: 769px) {
    .adv-card-avatar-name {
        font-size: 14px;
    }
}

/* 版权 */
.adv-card-copyright {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: var(--text-secondary);
    margin-bottom: 6px;
    user-select: none;
}
@media (min-width: 769px) {
    .adv-card-copyright {
        font-size: 12px;
    }
}

/* 战斗数值 */
.adv-section-title {
    font-size: 12px;
    font-weight: bold;
    color: var(--accent-light);
    margin-bottom: 4px;
    text-align: center;
}
@media (min-width: 769px) {
    .adv-section-title {
        font-size: 14px;
    }
}
.adv-battle-stats {
    margin-bottom: 6px;
}
.adv-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 4px;
}
.adv-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    padding: 4px 6px;
    justify-content: center;
}
.adv-stat-item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (min-width: 769px) {
    .adv-stat-item img {
        width: 22px;
        height: 22px;
    }
}
.adv-stat-val {
    font-size: 12px;
    font-weight: bold;
    color: var(--text-primary);
}
@media (min-width: 769px) {
    .adv-stat-val {
        font-size: 13px;
    }
}

/* ===== 排行榜页面 ===== */
.rank-filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.rank-element-selector-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rank-element-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}
.rank-element-selector {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.rank-element-selector:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.rank-element-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.rank-element-text {
    font-size: 14px;
}
.rank-element-arrow {
    font-size: 12px;
    margin-left: 2px;
    opacity: 0.7;
}
.rank-element-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(0);
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    min-width: 120px;
    z-index: 100;
    overflow: hidden;
}
.rank-element-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    color: var(--text-primary);
}
.rank-element-dropdown-item:hover {
    background: var(--bg-card-hover);
}
.rank-element-dropdown-item.active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 500;
}
.rank-element-dropdown-item img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.rank-filter-separator {
    width: 1px;
    height: 24px;
    background: var(--border);
}
@media (max-width: 768px) {
    .rank-element-label {
        font-size: 12px;
    }
    .rank-element-selector {
        padding: 3px 10px;
        font-size: 12px;
    }
    .rank-element-selector img,
    .rank-element-dropdown-item img {
        width: 16px;
        height: 16px;
    }
    .rank-element-dropdown-item {
        padding: 6px 10px;
        font-size: 12px;
    }
    .rank-filter-row {
        gap: 10px;
    }
}

.rank-list {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 16px;
}
.rank-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 16px;
    opacity: 0.5;
}
/* 排行榜引导/空态卡片（更突出的样式） */
.rank-empty.rank-guide,
.rank-empty.rank-empty-with-filter {
    opacity: 1;
    padding: 48px 28px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin: 16px 0;
}
.rank-guide-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}
.rank-guide-desc {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 20px;
}
.rank-guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border: none;
    border-radius: 20px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin: 4px 6px;
}
.rank-guide-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
}
.rank-guide-btn.rank-guide-btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}
.rank-guide-btn.rank-guide-btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}
/* 覆盖率警告小条（筛选>=3条且有结果时顶部提示） */
.rank-filter-coverage-hint {
    padding: 10px 14px;
    border: 1px solid var(--warn-border, #EAB308);
    background: var(--warn-bg, rgba(234, 179, 8, 0.08));
    color: var(--warn-text, #A16207);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}
/* 加载状态 */
.rank-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 14px;
    gap: 12px;
}
.rank-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border, rgba(255,255,255,0.1));
    border-top-color: var(--accent, #6366f1);
    border-radius: 50%;
    animation: rank-spin 0.8s linear infinite;
}
@keyframes rank-spin {
    to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
    .rank-empty.rank-guide,
    .rank-empty.rank-empty-with-filter {
        margin: 12px;
        padding: 32px 18px;
    }
    .rank-guide-title {
        font-size: 16px;
    }
    .rank-guide-desc {
        font-size: 13px;
    }
    .rank-guide-btn {
        padding: 8px 22px;
        font-size: 13px;
    }
}

/* 排行榜大卡片 */
.rank-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s;
}

/* 词条行 */
.rank-card-entries-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.rank-card-entry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-secondary);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.rank-card-entry.empty {
    opacity: 0.25;
    min-width: 40px;
    justify-content: center;
}
.rank-card-entry img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.rank-card-entry .rank-card-nullify-element {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}

/* 角色小卡片行 */
.rank-card-chars-row {
    display: flex;
    gap: 10px;
}
.rank-card-char-slot {
    flex: 1;
    min-height: 60px;
    border: none;
    border-radius: 8px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    transition: all 0.2s;
}
.rank-card-char-slot.empty {
    opacity: 0.4;
}
.rank-card-char-slot.filled {
    background: var(--bg-card);
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 76px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.rank-card-char-slot.filled:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.rank-card-char-slot.filled img:not(.rank-card-slot-elem):not(.rank-card-slot-member-icon) {
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
}
.rank-card-char-slot.filled * {
    pointer-events: none;
}
.rank-card-char-slot.filled {
    pointer-events: auto;
}
/* 三列布局 */
.rank-card-slot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    gap: 4px;
    min-width: 0;
}
.rank-card-slot-col-left {
    flex: 0 0 auto;
    min-width: 36px;
}
.rank-card-slot-col-mid {
    flex: 0 0 auto;
    min-width: 56px;
}
.rank-card-slot-col-right {
    flex: 1;
    min-width: 0;
    padding: 6px 6px;
    overflow: visible;
}
/* 提交人名称 */
.rank-card-slot-username {
    font-size: 10px !important;
    color: var(--text-secondary);
    font-weight: 500;
    max-width: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
/* 成功率 */
.rank-card-slot-rate {
    font-size: 13px !important;
    color: var(--accent);
    font-weight: 700;
    line-height: 1.1;
}
/* 回合数 */
.rank-card-slot-rounds {
    font-size: 11px !important;
    color: var(--text-secondary);
    line-height: 1.1;
}
/* 阵容区域 */
.rank-card-slot-lineup {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 4px;
    justify-content: center;
    width: 100%;
}
.rank-card-slot-member {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.rank-card-slot-member-img-wrap {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    overflow: visible;
}
.rank-card-slot-member-icon {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
}
.rank-card-slot-elem {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 50%;
    height: 50%;
    pointer-events: none;
    z-index: 1;
}
.rank-card-slot-member-name {
    font-size: 10px !important;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    margin-top: 1px;
    max-width: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
}
/* 覆盖原来的通用样式 */
.rank-card-char-slot.filled .rank-card-slot-rate,
.rank-card-char-slot.filled .rank-card-slot-rounds {
    margin: 0;
}
.rank-card-char-slot.filled .rank-card-slot-rank {
    margin: 0;
}
.rank-card-slot-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.rank-card-char-slot.filled .rank-card-slot-rank.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #fff;
}
.rank-card-char-slot.filled .rank-card-slot-rank.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
    color: #fff;
}
.rank-card-char-slot.filled .rank-card-slot-rank.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #8B5A2B);
    color: #fff;
}
.rank-card-char-slot.empty .rank-card-slot-rank {
    background: var(--bg-primary);
    color: var(--text-secondary);
    opacity: 0.5;
}
.rank-card-slot-empty-text {
    font-size: 12px;
    color: var(--text-primary);
    opacity: 0.7;
}
.rank-card-char-slot.empty {
    opacity: 0.4;
}

/* 排行榜详情弹窗 - 已复刻冒险模拟详情弹窗布局，使用相同的 CSS 类（qsd-*），无需额外样式 */

/* 排行榜分页控件 */
.rank-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 12px;
    flex-wrap: wrap;
}
.rank-pagination .rank-page-info {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 8px;
}
.rank-pagination .rank-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.rank-pagination .rank-page-btn:hover:not(:disabled):not(.active) {
    background: var(--bg-card-hover);
    border-color: var(--accent);
}
.rank-pagination .rank-page-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.rank-pagination .rank-page-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rank-pagination .rank-page-ellipsis {
    color: var(--text-secondary);
    padding: 0 4px;
}

@media (max-width: 768px) {
    .rank-list {
        padding: 0 12px;
        gap: 12px;
    }
    .rank-card {
        padding: 12px;
        gap: 10px;
    }
    .rank-card-entry {
        font-size: 11px;
        padding: 3px 8px;
    }
    .rank-card-entry img {
        width: 15px;
        height: 15px;
    }
    .rank-card-char-slot {
        min-height: 56px;
        padding: 4px 8px;
        gap: 4px;
    }
    .rank-card-char-slot img {
        width: 28px;
        height: 28px;
    }
    .rank-card-char-slot span {
        font-size: 11px;
    }
    .rank-card-slot-col-left {
        min-width: 30px;
    }
    .rank-card-slot-col-mid {
        min-width: 56px;
    }
    .rank-card-slot-username {
        font-size: 10px !important;
        max-width: 56px;
    }
    .rank-card-slot-rate {
        font-size: 12px !important;
    }
    .rank-card-slot-member-icon {
        width: 28px !important;
        height: 28px !important;
    }
    .rank-card-slot-member-img-wrap {
        width: 28px;
        height: 28px;
    }
    .rank-card-slot-elem {
        width: 50%;
        height: 50%;
    }
    .rank-card-slot-member-name {
        font-size: 10px !important;
        margin-top: 1px;
        max-width: 44px;
    }
    /* 竖屏：小卡片纵向排列 */
    .rank-card-chars-row {
        flex-direction: column;
    }
    /* 竖屏：弹窗在页面导航栏之下 + 兼容浏览器地址栏/底部工具栏 */
    .modal-overlay {
        /* 默认居中，配合 .modal margin:auto 实现溢出时自动顶部对齐 */
        align-items: center !important;
        justify-content: center;
        padding-top: calc(env(safe-area-inset-top, 0px) + 56px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .modal {
        /* margin:auto 在 flex 中：空间足够则上下居中，内容过高则自动顶部对齐避免被裁剪 */
        margin: auto !important;
        /* 使用 JS 精确计算的 --app-height（实际可视高度），减去导航栏+安全区 */
        max-height: calc(var(--app-height, 100vh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 68px) !important;
        width: calc(100vw - 24px);
    }
    .modal-body {
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .rank-entry-filter-modal {
        max-width: 100vw;
        width: calc(100vw - 24px);
    }
    .rank-entry-filter-body {
        /* 弹窗主体自适应剩余高度 */
        max-height: calc(var(--app-height, 100vh) - 240px);
        max-height: calc(100dvh - 240px);
    }
    .rank-tips-modal {
        width: calc(100vw - 24px);
        max-width: 500px;
    }
    .rank-tips-body {
        max-height: calc(var(--app-height, 100vh) - 220px);
        max-height: calc(100dvh - 220px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 排行榜标题行 */
.rank-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 16px;
    height: 40px;
    position: relative;
}
.rank-title-row .platform-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
.rank-title-row .rank-tips-btn {
    position: absolute;
    left: calc(50% + 52px);
    top: 50%;
    transform: translateY(-50%);
}

/* 排行榜提示按钮 */
.rank-tips-btn {
    padding: 6px 20px;
    border: none;
    border-radius: 20px;
    background: #F97316;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.rank-tips-btn:hover {
    background: #EA580C;
}
.rank-title-row .rank-tips-btn:hover {
    transform: translateY(-50%) scale(1.02);
}

/* 排行榜提示弹窗 */
.rank-tips-modal {
    max-width: 500px;
}
.rank-tips-header {
    justify-content: center;
    border-bottom: none;
}
.rank-tips-body {
    padding: 20px 24px;
}
.rank-tips-list {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rank-tips-list li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}
.rank-tips-list li::marker {
    color: var(--accent);
    font-weight: 600;
}
@media (max-width: 768px) {
    .rank-title-row {
        padding: 0 12px;
    }
    .rank-tips-btn {
        padding: 4px 14px;
        font-size: 12px;
    }
    .rank-tips-body {
        padding: 16px;
    }
    .rank-tips-list li {
        font-size: 13px;
    }
}

/* ===== 排行榜词条筛选 ===== */
.rank-filter-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.rank-filter-btn {
    padding: 6px 24px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.rank-filter-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.rank-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* 词条筛选弹窗 */
.rank-entry-filter-modal {
    max-width: 600px;
}
.rank-entry-filter-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.rank-entry-filter-modal .modal-title {
    flex: 1;
}
.rank-entry-filter-selected-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    min-height: 40px;
    position: sticky;
    top: 0;
    z-index: 5;
}
.rank-entry-filter-selected-bar:empty::after {
    content: '尚未选择词条';
    color: var(--text-secondary);
    font-size: 13px;
    opacity: 0.6;
}
.rank-entry-filter-selected-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 12px;
    background: var(--accent-bg);
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.rank-entry-filter-selected-item:hover {
    filter: brightness(0.9);
}
.rank-entry-filter-selected-item img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.rank-entry-filter-selected-item .rank-selected-element-img {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    vertical-align: middle;
}
.rank-entry-filter-selected-item .close-x {
    font-size: 10px;
    margin-left: 2px;
    opacity: 0.7;
}
.rank-entry-filter-selected-item .close-x:hover {
    opacity: 1;
}
.rank-entry-filter-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.rank-entry-filter-body {
    padding: 16px;
    max-height: 360px;
    overflow-y: auto;
}
.rank-entry-filter-reset {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    background: #F97316;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.rank-entry-filter-reset:hover {
    background: #EA580C;
}
.rank-entry-filter-confirm {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border: none;
    border-radius: 20px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.rank-entry-filter-confirm:hover {
    filter: brightness(1.08);
}
.rank-entry-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
    width: 100%;
}
.rank-entry-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    white-space: nowrap;
}
.rank-entry-filter-chip img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.rank-entry-filter-chip:hover:not(.disabled):not(.active) {
    border-color: var(--accent);
    color: var(--accent);
}
.rank-entry-filter-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.rank-entry-filter-chip.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rank-entry-filter-chip .nullify-element-indicator {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
    font-size: 11px;
    font-weight: 500;
}
.rank-entry-filter-chip .nullify-element-indicator img {
    width: 14px;
    height: 14px;
}
.rank-entry-filter-chip:not(.active) .nullify-element-indicator {
    background: var(--accent-bg);
    color: var(--accent);
}

/* 无效化器元素选择弹窗 */
.rank-nullify-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}
.rank-nullify-overlay.active {
    display: flex;
}
.rank-nullify-modal {
    background: var(--bg-card);
    border-radius: 12px;
    min-width: 280px;
    max-width: 320px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    overflow: hidden;
}
.rank-nullify-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}
.rank-nullify-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.rank-nullify-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.rank-nullify-close:hover {
    color: var(--text-primary);
}
.rank-nullify-body {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.rank-nullify-element {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.rank-nullify-element:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.rank-nullify-element img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.rank-nullify-element.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .rank-filter-btn {
        padding: 4px 18px;
        font-size: 12px;
    }
    .rank-entry-filter-reset,
    .rank-entry-filter-confirm {
        padding: 4px 12px;
        font-size: 12px;
    }
    .rank-entry-filter-chip {
        padding: 4px 12px;
        font-size: 12px;
    }
    .rank-entry-filter-chip img {
        width: 16px;
        height: 16px;
    }
}

/* ===== 热门体系排行榜 ===== */
.hot-builds-active .section-actions {
    display: none !important;
}
/* 热门体系：隐藏测试冒险按钮，保留查看详情按钮 */
.hot-builds-active .quest-task-test-actions .quest-task-test {
    display: none !important;
}
/* 热门体系：隐藏删除角色按钮 */
.hot-builds-active .quest-task-hero-remove {
    display: none !important;
}
/* 热门体系：添加成员按钮隐藏 */
.hot-builds-active .quest-task-add-hero {
    display: none !important;
}
/* 热门体系：克隆任务按钮隐藏 */
.hot-builds-active .quest-task-clone {
    display: none !important;
}
/* 热门体系：配置项按钮置灰不可点击 */
.hot-builds-active .quest-task-config-btn {
    opacity: 0.5;
    cursor: default !important;
    pointer-events: none;
}
/* 热门体系：词条按钮恢复可点击（仅弹窗内置灰） */
.hot-builds-active .quest-task-config-entry {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1;
}
/* 热门体系：确保冒险任务卡片标题可见 */
.hot-builds-active .quest-task-name {
    display: inline !important;
}
/* 热门体系：确保冒险任务区域标题可见 */
.hot-builds-active .quest-title {
    display: inline !important;
}
/* 热门体系：勇士配装模拟-隐藏导入按钮和配置码输入框 */
.hot-builds-active #btnSimImport,
.hot-builds-active #simImportCode {
    display: none !important;
}
/* 热门体系：英雄配装模拟-隐藏导入按钮和配置码输入框 */
.hot-builds-active #btnHeroSimImport,
.hot-builds-active #heroSimImportCode {
    display: none !important;
}

.hot-build-list {
    min-height: 200px;
}

.hot-build-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 14px;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: hot-spin 0.8s linear infinite;
}

@keyframes hot-spin {
    to { transform: rotate(360deg); }
}

.hot-build-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hot-build-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px 20px;
    border: 2px solid var(--border);
    transition: all 0.2s;
    position: relative;
}

.hot-build-card:hover {
    border-color: var(--text-secondary);
}

.hot-build-card.active {
    border-color: var(--accent-light);
    box-shadow: 0 0 0 1px var(--accent-light), 0 4px 12px rgba(99, 102, 241, 0.15);
}

.hot-build-card .build-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 4px;
}

.hot-build-card .build-note {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    text-align: center;
}

.hot-build-card .build-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    gap: 8px;
    flex-wrap: wrap;
}

.hot-build-card .build-stats {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.hot-build-card .build-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.copy-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.copy-icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

.btn-copy-build {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: var(--accent);
    color: #fff;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-copy-build:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* 热门体系分页 */
.hot-build-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 16px 0;
}

.hot-build-pagination .btn-outline {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all 0.2s;
}

.hot-build-pagination .btn-outline:hover:not(:disabled) {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.hot-build-pagination .btn-outline:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hot-build-pagination .page-info {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* 热门体系空状态 */
.hot-build-list .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 8px;
    color: var(--text-secondary);
}

.hot-build-list .empty-state svg {
    width: 48px;
    height: 48px;
    opacity: 0.5;
    margin-bottom: 8px;
}

.hot-build-list .empty-state p {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.hot-build-list .empty-state span {
    font-size: 13px;
    color: var(--text-secondary);
}
/* 防御减伤行 */
.adv-def-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    padding: 4px 6px;
}
.adv-def-row img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (min-width: 769px) {
    .adv-def-row img {
        width: 22px;
        height: 22px;
    }
}
.adv-def-cols {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
}
.adv-def-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.adv-def-pct {
    font-size: 11px;
    color: var(--text-secondary);
}
.adv-def-val {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
/* 元素屏障 */
.adv-barrier-row {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    padding: 4px 6px;
    justify-content: center;
    margin-bottom: 4px;
}
.adv-barrier-row img {
    width: 18px;
    height: 18px;
}
.adv-barrier-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 奖励池 */
.adv-rewards {
    margin-bottom: 4px;
}
.adv-reward-row {
    display: flex;
    gap: 9px;
    width: 100%;
    margin-bottom: 2px;
}

/* ===== 天赋树模拟器 ===== */
#talenttree {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 标签切换 */
.tt-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}
.tt-tab-btn {
    padding: 8px 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}
.tt-tab-btn:hover {
    background: var(--bg-card-hover);
}
.tt-tab-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* 天赋树卡片 */
.tt-tree-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.tt-tree-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.tt-point-info {
    display: flex;
    gap: 16px;
    color: var(--text-secondary);
    font-size: 14px;
}
.tt-point-info strong {
    color: var(--text-primary);
}

.tt-tree-actions {
    display: flex;
    gap: 8px;
}
.tt-action-btn {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}
.tt-action-btn:hover {
    background: var(--bg-card-hover);
}

/* 天赋树画布 */
.tt-tree-wrap {
    overflow: auto;
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 12px;
    min-height: 400px;
    position: relative;
}

.tt-tree-scaler {
    position: relative;
}

.tt-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* 天赋节点 */
.tt-node {
    position: absolute;
    transform-origin: center center;
}

.tt-node-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.tt-node-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.tt-node-bg-epic {
    animation: tt-epic-pulse 2s infinite alternate;
}

.tt-node-icon {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
    pointer-events: none;
}

.tt-node-counter {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: bold;
    min-width: 22px;
    text-align: center;
}

.tt-node-locked {
    opacity: 0.45;
    filter: grayscale(0.6);
}

.tt-node-clickable {
    cursor: pointer;
    transition: transform 0.1s;
}
.tt-node-clickable:hover {
    transform: scale(1.08);
    z-index: 5;
}

/* 悬浮提示 */
.tt-node-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    width: 200px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 100;
    margin-bottom: 6px;
    line-height: 1.4;
}
.tt-node:hover .tt-node-tooltip {
    opacity: 1;
}

.tt-tooltip-title {
    font-weight: bold;
    margin-bottom: 4px;
    color: #818cf8;
}

/* 价格表卡片 */
.tt-price-card,
.tt-ach-card-outer {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.tt-section-title {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--text-primary);
    font-weight: bold;
}

.tt-price-desc {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 14px;
}

/* 价格表格 */
.tt-price-grid {
    display: grid;
    grid-template-columns: auto 80px 1fr 1fr;
    gap: 0;
}
.tt-price-header {
    font-weight: bold;
    padding: 8px 12px;
    border-bottom: 2px solid var(--border);
    color: var(--text-primary);
}
.tt-price-header > div,
.tt-price-row > div {
    padding: 6px 12px;
}
.tt-price-row {
    display: contents;
}
.tt-price-row > div {
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 14px;
}
.tt-price-row-alt > div {
    background: var(--bg-secondary);
}

/* 成就天赋点 */
.tt-ach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.tt-ach-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border);
}
.tt-ach-icon-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}
.tt-ach-bg {
    width: 100%;
    height: 100%;
}
.tt-ach-icon {
    position: absolute;
    width: 60%;
    height: 60%;
    left: 20%;
    top: 20%;
}
.tt-ach-info {
    flex: 1;
    min-width: 0;
}
.tt-ach-title {
    font-weight: bold;
    margin-bottom: 4px;
    color: var(--text-primary);
    font-size: 14px;
}
.tt-ach-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.3;
}
.tt-ach-point-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.tt-ach-point-icon {
    width: 24px;
    height: 24px;
}
.tt-ach-point-num {
    font-weight: bold;
    color: var(--accent-light);
    font-size: 16px;
}

/* 史诗节点动画 */
@keyframes tt-epic-pulse {
    from { transform: scale(1); filter: brightness(1); }
    to { transform: scale(1.05); filter: brightness(1.3); }
}

/* 竖屏适配 */
@media (max-width: 768px) {
    #talenttree {
        padding: 12px;
    }
    .tt-tab-btn {
        padding: 6px 16px;
        font-size: 14px;
    }
    .tt-tree-card,
    .tt-price-card,
    .tt-ach-card-outer {
        padding: 10px;
    }
    .tt-tree-header {
        flex-direction: column;
        align-items: stretch;
    }
    .tt-point-info {
        flex-wrap: wrap;
        gap: 8px;
    }
    .tt-ach-grid {
        grid-template-columns: 1fr;
    }
    .tt-price-grid {
        grid-template-columns: auto 60px 1fr 1fr;
        font-size: 12px;
    }
    .tt-price-header > div,
    .tt-price-row > div {
        padding: 4px 6px;
    }
}
.adv-reward-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 6px;
    padding: 2px 4px;
    justify-content: center;
    min-width: 0;
}
.adv-reward-item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (min-width: 769px) {
    .adv-reward-item img {
        width: 26px;
        height: 26px;
    }
}
@media (min-width: 769px) {
    .adv-reward-row {
        gap: 10px;
    }
    .adv-reward-item {
        gap: 13px;
    }
}
.adv-reward-qty {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-primary);
}
@media (min-width: 769px) {
    .adv-reward-qty {
        font-size: 13px;
    }
}
.adv-reward-name {
    font-size: 11px;
    font-weight: bold;
    color: var(--text-primary);
    white-space: nowrap;
}
@media (min-width: 769px) {
    .adv-reward-name {
        font-size: 13px;
    }
}
/* 装备奖励行 (全宽) */
.adv-reward-full {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 6px;
    padding: 2px 4px;
    justify-content: center;
    width: 100%;
    margin-bottom: 2px;
}
.adv-reward-full img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (min-width: 769px) {
    .adv-reward-full img {
        width: 26px;
        height: 26px;
    }
}
@media (min-width: 769px) {
    .adv-reward-full {
        gap: 13px;
    }
}
/* 奖励池名称标签 */
.adv-reward-label {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 2px;
    padding-left: 2px;
}

/* 展开区域 */
.adv-card-expanded {
    display: none;
    margin-top: 6px;
}
.adv-card.expanded .adv-card-expanded {
    display: block;
}
.adv-card.expanded .adv-card-summary {
    display: none;
}

/* 其它信息 */
.adv-other-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.adv-other-item {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    padding: 4px 6px;
}
.adv-other-item img {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
@media (min-width: 769px) {
    .adv-other-item img {
        width: 22px;
        height: 22px;
    }
}
.adv-other-text {
    font-size: 11px;
    color: var(--text-primary);
}
@media (min-width: 769px) {
    .adv-other-text {
        font-size: 13px;
    }
}
.adv-other-label {
    font-weight: 500;
    color: var(--text-secondary);
}

/* 头目卡片红色边框 (普通冒险和黄金城) */
.adv-card.boss-card {
    border-color: #ff4444;
}
.adv-card.boss-card:hover {
    border-color: #ff6666;
}

/* 贵宾奖励 (泰坦塔/快闪冒险) */
.adv-vip-reward {
    background-color: rgb(254, 252, 232);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    margin-top: 6px;
}
.adv-vip-reward img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-left: 4px;
}
.adv-vip-reward span {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #333;
}
@media (min-width: 769px) {
    .adv-vip-reward img {
        width: 26px;
        height: 26px;
    }
    .adv-vip-reward span {
        font-size: 14px;
    }
}

/* 泰坦塔难度 (背景+图标) */
.adv-card-diff.titan-diff {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
}
.adv-titan-diff-bg {
    width: 48px;
    height: 24px;
    object-fit: contain;
}
.adv-titan-diff-icon {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    object-fit: contain;
}
@media (min-width: 769px) {
    .adv-titan-diff-bg {
        width: 60px;
        height: 30px;
    }
    .adv-titan-diff-icon {
        width: 24px;
        height: 24px;
    }
}

/* 奖励组容器 */
.adv-reward-group {
    margin-bottom: 4px;
}

/* 奖励卡片 (全宽+内容同一背景) */
.adv-reward-card {
    width: 100%;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 4px;
    box-sizing: border-box;
}
.adv-reward-card-label {
    font-size: 10px;
    font-weight: bold;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 2px;
}
@media (min-width: 769px) {
    .adv-reward-card-label {
        font-size: 12px;
    }
}
.adv-reward-card-body {
    width: 100%;
}
/* 卡片内的奖励项不需要单独背景 */
.adv-reward-card-body .adv-reward-item {
    background: transparent;
    padding: 2px 2px;
}

/* 折叠状态摘要 */
.adv-card-summary {
    display: block;
}

/* 快闪冒险核心奖励图标 (奖励池标题右侧) */
.adv-reward-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}
.adv-reward-title-row .adv-section-title {
    margin-bottom: 0;
}
.adv-core-reward-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
@media (min-width: 769px) {
    .adv-core-reward-icon {
        width: 28px;
        height: 28px;
    }
}

/* ===== 飞龙威力表页面 ===== */

/* 页面容器 */
#dragonpower {
    padding: 0 16px 16px;
    max-width: 1400px;
    margin: 0 auto;
}

/* === 总威力卡片（参考线上平台：白色背景+渐变叠加）=== */
.dp-total-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #fff;
    border: 2px solid #c7d2fe;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dp-total-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #eef2ff 0%, #f0fdf4 50%, #eff6ff 100%);
    opacity: 0.5;
    z-index: 0;
}

.dp-total-content {
    position: relative;
    z-index: 1;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.dp-total-label {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    letter-spacing: 1px;
}

.dp-total-value-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-total-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.dp-total-number {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(to right, #16a34a, #2563eb, #4f46e5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* === 预选装备栏 === */
.dp-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.dp-slot-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-slot-title {
    font-size: 16px;
    font-weight: 700;
    color: #4f46e5;
    text-align: center;
    margin: 0 0 8px 0;
}

/* 预选卡片容器：高度由JS动态同步（基于选中装备卡片的自然高度） */
.dp-slot-card {
    position: relative;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 8px;
    overflow: visible;
    box-sizing: border-box;
}

/* 空状态：上下布局，标题在上、提示在下 */
.dp-slot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: none;
    border: none;
    gap: 16px;
}

.dp-slot-placeholder {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

/* 品质背景色 */
.dp-slot-card[data-quality="common"] .dp-slot-selected-item { background: #f3f4f6; }
.dp-slot-card[data-quality="uncommon"] .dp-slot-selected-item { background: #d1fae5; }
.dp-slot-card[data-quality="flawless"] .dp-slot-selected-item { background: #dbeafe; }
.dp-slot-card[data-quality="epic"] .dp-slot-selected-item { background: #f3e8ff; }
.dp-slot-card[data-quality="legendary"] .dp-slot-selected-item { background: #fef3c7; }

/* 淡出动画 */
@keyframes dp-fade-out {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(24px); opacity: 0; }
}
.dp-slot-fade-out {
    animation: dp-fade-out 150ms ease-out forwards;
}

/* 预选卡片选中状态：横向布局（同装备列表卡片） */
.dp-slot-selected-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f3f4f6;
    cursor: pointer;
    transition: background 0.15s;
}

.dp-slot-selected-item:hover {
    background: #e5e7eb;
}

.dp-slot-shiny-icon {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    z-index: 2;
}

.dp-slot-equip-img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 4px;
}

/* 装备图片包裹器（含附魔图标） */
.dp-slot-equip-wrap {
    position: relative;
    flex-shrink: 0;
}

/* 附魔图标（左侧竖排） */
.dp-slot-enchant-wrap {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    z-index: 2;
}

.dp-slot-enchant-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.dp-slot-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dp-slot-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dp-slot-tier {
    flex-shrink: 0;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    padding: 0 4px;
}

.dp-slot-name {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-slot-power-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dp-slot-power-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.dp-slot-power {
    font-size: 16px;
    font-weight: 700;
    color: #dc2626;
    font-variant-numeric: tabular-nums;
}

/* === 配置栏 === */
.dp-config-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* 顶部行：天赋+星能+品质（整体居中，宽度不够则换行） */
.dp-config-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 16px;
}

.dp-config-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dp-config-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.dp-config-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.dp-config-select {
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.dp-config-select:focus {
    border-color: var(--accent);
}

.dp-config-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

/* 阶级筛选行：标签在上、选项在下，整体居中 */
.dp-tier-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.dp-tier-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

.dp-tier-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    align-items: center;
}

/* 星能铸造 / 星铸天赋树 按钮 */
.dp-shiny-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 2px solid var(--border);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.dp-shiny-off {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border);
}

.dp-shiny-on {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.dp-shiny-btn .dp-config-icon {
    width: 18px;
    height: 18px;
}

.dp-shiny-label {
    font-size: 14px;
}

/* 品质按钮组（图片式，参考图纸大全阶级筛选布局）*/
.dp-quality-group {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.dp-quality-btn {
    padding: 0;
    cursor: pointer;
    transition: all 0.15s;
}

.dp-quality-btn:hover {
    opacity: 0.85;
}

.dp-quality-btn.active {
    box-shadow: 0 0 0 2px #4a6cf7, 0 0 8px rgba(74, 108, 247, 0.3);
}

/* 阶数按钮组（图片式，由JS动态注入dp-tier-imgbtn样式）*/
.dp-tier-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* === 装备列表（纵向列表，横向卡片，参考线上平台）=== */
.dp-equip-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dp-equip-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #f3f4f6;
    cursor: pointer;
    transition: background 0.15s;
}

.dp-equip-card:hover {
    background: #e5e7eb;
}

.dp-equip-selected {
    background: #e0e7ff !important;
    box-shadow: inset 0 0 0 2px #6366f1;
}

.dp-equip-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dp-equip-tier-badge {
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    flex-shrink: 0;
}

.dp-equip-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 装备图片（左侧，小尺寸） */
.dp-equip-card-image {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-equip-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

/* 装备信息区（右侧） */
.dp-equip-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dp-equip-power-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dp-equip-power-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.dp-equip-power {
    font-size: 16px;
    font-weight: 700;
    color: #dc2626;
    font-variant-numeric: tabular-nums;
}

.dp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 16px;
}

/* === 分页 === */
.dp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.dp-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-page-btn:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--accent);
}

.dp-page-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.dp-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* === 竖屏响应式 === */
@media (max-width: 768px) {
    #dragonpower {
        padding: 4px;
    }

    .dp-total-content {
        padding: 8px 10px;
    }

    .dp-total-label {
        font-size: 13px;
    }

    .dp-total-icon {
        width: 28px;
        height: 28px;
    }

    .dp-total-number {
        font-size: 30px;
    }

    .dp-slots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        margin-bottom: 5px;
    }

    .dp-slot-title {
        font-size: 13px;
        margin-bottom: 4px;
    }

    .dp-slot-card {
        padding: 5px;
        min-height: 50px;
    }

    .dp-slot-equip-img {
        width: 28px;
        height: 28px;
    }

    .dp-slot-enchant-icon {
        width: 12px;
        height: 12px;
    }

    .dp-slot-enchant-wrap {
        gap: 2px;
    }

    .dp-slot-name {
        font-size: 10px;
    }

    .dp-slot-power {
        font-size: 12px;
    }

    .dp-slot-power-icon {
        width: 14px;
        height: 14px;
    }

    .dp-slot-info {
        gap: 2px;
    }

    .dp-slot-selected-item {
        gap: 4px;
        padding: 4px 6px;
    }

    .dp-config-bar {
        gap: 8px;
        padding: 5px 6px;
    }

    .dp-config-label {
        font-size: 13px;
    }

    .dp-config-icon {
        width: 18px;
        height: 18px;
    }

    .dp-config-select {
        height: 30px;
        font-size: 13px;
    }

    .dp-quality-btn {
        height: 30px;
        padding: 0 6px;
    }

    .dp-quality-icon {
        width: 18px;
        height: 18px;
    }

    .dp-quality-label {
        display: none;
    }

    .dp-tier-imgbtn {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .dp-filter-star {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }

    .dp-equip-type-icon-wrap {
        width: 16px;
        height: 16px;
    }

    .dp-equip-type-icon {
        padding: 4px;
    }

    .dp-equip-tier-badge {
        width: 16px;
        height: 16px;
    }

    .dp-equip-tier-badge span {
        font-size: 8px;
    }

    .dp-type-btn {
        width: 24px;
        height: 24px;
    }

    .dp-type-btn img {
        width: 16px;
        height: 16px;
    }

    .dp-equip-shiny-icon {
        width: 16px;
        height: 16px;
        top: -8px;
        right: -8px;
    }

    .dp-slot-shiny-icon {
        width: 16px;
        height: 16px;
        top: -8px;
        right: -8px;
    }

    .dp-equip-card-image {
        width: 28px;
        height: 28px;
    }

    .dp-equip-name {
        font-size: 10px;
    }

    .dp-equip-power {
        font-size: 12px;
    }

    .dp-equip-power-icon {
        width: 14px;
        height: 14px;
    }

    .dp-equip-card-info {
        gap: 2px;
    }

    .dp-equip-card {
        gap: 4px;
        padding: 3px 5px;
    }

    .dp-page-btn {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .dp-category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
        margin-top: 5px !important;
    }

    .dp-category-section {
        padding: 4px !important;
    }

    .dp-category-title {
        font-size: 15px;
    }

    #dragonpower {
        padding: 5px 5px 10px 5px;
    }
}

/* ===== 投资模拟器 ===== */
#investment {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* 统计卡片栏 */
.inv-stats-bar {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.inv-stats-bar.inv-stats-sticky {
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 0;
    background: var(--bg-primary);
    backdrop-filter: blur(8px);
}
.inv-stat-card {
    border-radius: 16px;
    padding: 12px 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid;
    min-width: 200px;
}
.inv-stat-perperson {
    background: linear-gradient(135deg, rgba(103, 232, 249, 0.1), rgba(147, 197, 253, 0.15));
    border-color: rgba(103, 232, 249, 0.3);
}
.inv-stat-single {
    background: linear-gradient(135deg, rgba(147, 197, 253, 0.1), rgba(103, 232, 249, 0.15));
    border-color: rgba(147, 197, 253, 0.3);
}
.inv-stat-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
}
.inv-stat-perperson .inv-stat-title { color: #06b6d4; }
.inv-stat-single .inv-stat-title { color: #3b82f6; }
.inv-stat-value-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.inv-stat-gold-icon {
    width: 24px;
    height: 24px;
}
.inv-stat-value {
    font-size: 22px;
    font-weight: 700;
}
.inv-stat-cyan { color: #0e7490; }
.inv-stat-blue { color: #1d4ed8; }

/* 建筑区域块 */
.inv-section-block {
    margin-bottom: 32px;
}
.inv-section-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}
.inv-section-h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.inv-title-basic { color: var(--accent-light); }
.inv-title-resource { color: #4ade80; }
.inv-title-worker { color: #fb923c; }

/* 一键输入 */
.inv-oneclick-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.inv-oneclick-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.inv-oneclick-input {
    width: 80px;
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    text-align: left;
}
.inv-oneclick-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* 建筑卡片网格 */
.inv-building-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

/* 建筑卡片 */
.inv-building-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s;
}
.inv-building-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* 卡片图片区 */
.inv-card-img-wrap {
    position: relative;
    margin-bottom: 8px;
}
.inv-level-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}
.inv-tier-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}
.inv-tier-1 { background: rgba(74, 222, 128, 0.2); color: #4ade80; }
.inv-tier-2 { background: rgba(96, 165, 250, 0.2); color: #60a5fa; }
.inv-tier-3 { background: rgba(192, 132, 252, 0.2); color: #c084fc; }
.inv-tier-4 { background: rgba(248, 113, 113, 0.2); color: #f87171; }

.inv-card-img {
    width: 100%;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
}

/* 卡片内容区 */
.inv-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.inv-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-light);
    text-align: center;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

/* 输入行 */
.inv-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.inv-input-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}
.inv-input {
    width: 70px;
    padding: 4px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    text-align: left;
}
.inv-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* 金币行 */
.inv-gold-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}
.inv-gold-label {
    color: var(--text-secondary);
    white-space: nowrap;
}

/* 金币图标和颜色 */
.inv-gold-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    display: inline-block;
}
.inv-gold-green {
    color: #4ade80;
    font-weight: 600;
}
.inv-gold-yellow {
    color: #fbbf24;
    font-weight: 600;
}

/* 汇总投资表区域 */
.inv-summary-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.inv-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}
.inv-section-desc {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 16px 0;
}

/* 表格通用 */
.inv-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.inv-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.inv-th {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-secondary);
    white-space: nowrap;
}
.inv-td {
    border: 1px solid var(--border);
    padding: 6px 12px;
    font-size: 14px;
    color: var(--text-primary);
    text-align: center;
}
.inv-td-level {
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.inv-td-gold {
    white-space: nowrap;
}
.inv-td-count {
    font-variant-numeric: tabular-nums;
}
.inv-table tbody tr:hover {
    background: var(--bg-card-hover);
}

/* 分类区域 */
.inv-category-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 标签栏 */
.inv-tab-bar {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
}
.inv-tab-btn {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.inv-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-card-hover);
}
.inv-tab-btn.active {
    color: var(--accent-light);
    border-bottom-color: var(--accent);
    background: var(--bg-card);
}

/* 标签内容 */
.inv-tab-content-wrap {
    padding: 20px;
}

/* 分类头部 */
.inv-category-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.inv-cat-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.inv-cat-desc {
    font-size: 14px;
    color: var(--text-secondary);
}
.inv-cat-count {
    font-size: 14px;
    color: var(--text-secondary);
    margin-left: auto;
}

/* 建筑芯片 */
.inv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.inv-chip {
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 4px 10px;
    gap: 4px;
}
.inv-chip-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.inv-chip-name {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 无数据提示 */
.inv-no-data {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
    font-size: 14px;
}

/* ===== 投资模拟器 竖屏适配 ===== */
@media (max-width: 768px) {
    #investment {
        padding: 10px;
    }

    .inv-stats-bar {
        gap: 8px;
    }
    .inv-stat-card {
        padding: 8px 16px;
        min-width: 140px;
    }
    .inv-stat-title {
        font-size: 12px;
    }
    .inv-stat-gold-icon {
        width: 16px;
        height: 16px;
    }
    .inv-stat-value {
        font-size: 16px;
    }

    .inv-section-h2 {
        font-size: 15px;
    }
    .inv-oneclick-label {
        font-size: 10px;
    }
    .inv-oneclick-input {
        width: 60px;
        font-size: 10px;
        padding: 3px 6px;
    }

    .inv-building-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .inv-building-card {
        padding: 6px;
        border-radius: 8px;
    }
    .inv-card-img {
        height: 40px;
    }
    .inv-level-badge {
        width: 16px;
        height: 16px;
        font-size: 8px;
    }
    .inv-tier-badge {
        font-size: 8px;
        padding: 1px 4px;
    }
    .inv-card-name {
        font-size: 9px;
    }
    .inv-input-label {
        font-size: 8px;
    }
    .inv-input {
        width: 40px;
        font-size: 8px;
        padding: 2px 4px;
    }
    .inv-gold-row {
        font-size: 8px;
    }
    .inv-gold-icon {
        width: 8px;
        height: 8px;
    }

    .inv-summary-section {
        padding: 12px;
        border-radius: 10px;
    }
    .inv-section-title {
        font-size: 16px;
    }
    .inv-section-desc {
        font-size: 12px;
    }

    .inv-th {
        padding: 6px 8px;
        font-size: 12px;
    }
    .inv-td {
        padding: 4px 8px;
        font-size: 12px;
    }

    .inv-tab-content-wrap {
        padding: 12px;
    }
    .inv-tab-btn {
        padding: 8px 10px;
        font-size: 12px;
    }
    .inv-cat-title {
        font-size: 15px;
    }
    .inv-cat-desc {
        font-size: 12px;
    }
    .inv-cat-count {
        font-size: 12px;
    }
    .inv-chip-img {
        width: 16px;
        height: 16px;
    }
    .inv-chip-name {
        font-size: 10px;
    }
}

/* ===== 投资模拟器 横屏手机适配 ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .inv-building-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
    }
    .inv-building-card {
        padding: 8px;
    }
    .inv-card-img {
        height: 56px;
    }
    .inv-card-name {
        font-size: 11px;
    }
    .inv-input-label {
        font-size: 10px;
    }
    .inv-input {
        width: 50px;
        font-size: 10px;
        padding: 3px 6px;
    }
    .inv-gold-row {
        font-size: 10px;
    }
    .inv-gold-icon {
        width: 10px;
        height: 10px;
    }
}

/* ===== 商店能量模拟器 ===== */

/* 总能量显示 */
.se-energy-display {
    text-align: center;
    margin-bottom: 20px;
    padding: 12px 0;
}
.se-energy-orb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
    padding: 8px 32px;
    border-radius: 9999px;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
    max-width: 350px;
}
.se-energy-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.se-particle {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: se-ping 2s ease-in-out infinite;
}
.se-particle-1 { top: 8px; left: 16px; width: 8px; height: 8px; }
.se-particle-2 { top: 16px; right: 24px; width: 6px; height: 6px; animation-delay: 0.5s; }
.se-particle-3 { bottom: 16px; left: 24px; width: 6px; height: 6px; animation-delay: 1s; }
.se-particle-4 { bottom: 8px; right: 16px; width: 8px; height: 8px; animation-delay: 1.5s; }
@keyframes se-ping {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}
.se-energy-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
}
.se-energy-icon {
    width: 32px;
    height: 32px;
    margin-right: 12px;
}
.se-energy-text {
    color: white;
}
.se-energy-label {
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.se-energy-value {
    font-size: 20px;
    font-weight: 800;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.se-energy-glow {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(135deg, #93c5fd, #60a5fa, #3b82f6);
    opacity: 0.2;
    filter: blur(16px);
}

/* 通用卡片 */
.se-card {
    background: var(--bg-card, rgba(255, 255, 255, 0.95));
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border, rgba(59, 130, 246, 0.1));
    padding: 16px;
    margin-bottom: 16px;
}
.se-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #4f46e5);
    margin-bottom: 16px;
}

/* 能量来源网格 */
.se-source-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.se-source-item {
    text-align: center;
    padding: 12px;
    border-radius: 10px;
}
.se-source-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    display: block;
}
.se-source-icon-wrap {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    background: rgba(167, 139, 250, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.se-source-icon-sm {
    width: 24px;
    height: 24px;
}
.se-source-value {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}
.se-source-label {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
}
.se-source-sub {
    font-size: 10px;
    color: var(--text-muted, #9ca3af);
    margin-top: 2px;
}
.se-font-bold { font-weight: 800; }

/* 颜色方案 */
.se-bg-blue { background: rgba(59, 130, 246, 0.08); }
.se-bg-green { background: rgba(34, 197, 94, 0.08); }
.se-bg-purple { background: rgba(168, 85, 247, 0.08); }
.se-bg-orange { background: rgba(249, 115, 22, 0.08); }
.se-bg-red { background: rgba(239, 68, 68, 0.08); }
.se-bg-yellow { background: rgba(234, 179, 8, 0.08); }
.se-bg-amber { background: rgba(245, 158, 11, 0.08); }
.se-text-blue { color: #2563eb; }
.se-text-green { color: #16a34a; }
.se-text-purple { color: #9333ea; }
.se-text-orange { color: #ea580c; }
.se-text-red { color: #dc2626; }
.se-text-yellow { color: #ca8a04; }
.se-text-amber { color: #d97706; }

/* 计算行 */
.se-calc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.se-calc-box {
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.se-calc-blue { background: rgba(59, 130, 246, 0.06); }
.se-calc-indigo { background: rgba(99, 102, 241, 0.06); }
.se-calc-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}
.se-calc-blue .se-calc-title { color: #1d4ed8; }
.se-calc-indigo .se-calc-title { color: #4338ca; }
.se-calc-expr {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
}
.se-calc-expr-sm {
    font-size: 14px;
    font-weight: 700;
    color: #4f46e5;
}
.se-calc-result {
    font-size: 20px;
    font-weight: 700;
    margin-top: 4px;
}
.se-calc-blue .se-calc-result { color: #1e40af; }
.se-calc-indigo .se-calc-result { color: #3730a3; }

/* 基础配置 */
.se-config-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.se-config-item {
    text-align: center;
}
.se-config-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}
.se-config-input-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.se-config-input {
    width: 60px;
    text-align: center;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 16px;
    font-weight: 600;
    background: var(--bg-primary, white);
    color: var(--text-primary, #1f2937);
}
.se-config-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* 加减按钮 */
.se-num-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.se-num-minus { background: #ef4444; }
.se-num-minus:hover { background: #dc2626; }
.se-num-plus { background: #22c55e; }
.se-num-plus:hover { background: #16a34a; }

/* 公会福利 */
.se-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.se-benefit-item {
    text-align: center;
    padding: 12px;
    background: rgba(234, 179, 8, 0.06);
    border-radius: 10px;
}
.se-benefit-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    display: block;
}
.se-benefit-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 8px;
}
.se-benefit-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.se-benefit-value {
    font-size: 18px;
    font-weight: 700;
    color: #ca8a04;
    width: 28px;
    text-align: center;
}
.se-benefit-energy {
    font-size: 10px;
    color: var(--text-muted, #9ca3af);
    margin-top: 4px;
}

/* 货架管理 */
.se-shelf-usage {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 12px;
}
.se-shelf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.se-shelf-card {
    position: relative;
    background: var(--bg-card, white);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s;
}
.se-shelf-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.se-shelf-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.se-shelf-remove:hover { background: #dc2626; }
.se-shelf-header {
    text-align: center;
    margin-bottom: 12px;
}
.se-shelf-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 4px;
    display: block;
}
.se-shelf-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #374151);
}
.se-shelf-field {
    margin-bottom: 10px;
}
.se-shelf-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 4px;
    text-align: center;
}
.se-shelf-input {
    width: 100%;
    max-width: 80px;
    text-align: center;
    border: 1px solid var(--border, #d1d5db);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 600;
    background: var(--bg-primary, white);
    color: var(--text-primary, #1f2937);
    margin: 0 auto;
    display: block;
}
.se-shelf-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.se-shelf-input:disabled {
    background: var(--bg-disabled, #f3f4f6);
    color: var(--text-muted, #9ca3af);
}
.se-shelf-total {
    background: rgba(99, 102, 241, 0.06);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: #4f46e5;
}

/* 添加货架按钮 */
.se-add-shelf-btn {
    width: 100%;
    padding: 12px;
    border: 2px dashed var(--border, #d1d5db);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #6b7280);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.se-add-shelf-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.04);
}

/* 添加货架弹窗 */
.se-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.se-modal {
    background: var(--bg-card, white);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}
.se-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border, #e5e7eb);
}
.se-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #111827);
}
.se-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: var(--text-muted, #9ca3af);
    cursor: pointer;
    transition: color 0.2s;
}
.se-modal-close:hover { color: var(--text-primary, #4b5563); }
.se-modal-body {
    padding: 16px;
}
.se-modal-remaining {
    font-size: 13px;
    color: var(--text-secondary, #6b7280);
    text-align: center;
    margin-bottom: 12px;
}
.se-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.se-modal-shelf-item {
    text-align: center;
    padding: 16px;
    border: 2px solid var(--border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.se-modal-shelf-item:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.04);
}
.se-modal-shelf-item.se-modal-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.se-modal-shelf-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 8px;
    display: block;
}
.se-modal-shelf-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #374151);
}
.se-modal-shelf-note {
    font-size: 11px;
    color: var(--text-muted, #9ca3af);
    margin-top: 4px;
}

/* ===== 商店能量模拟器 响应式（竖屏） ===== */
@media (max-width: 768px) {
    .se-energy-orb {
        padding: 6px 20px;
    }
    .se-energy-icon {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
    .se-energy-label {
        font-size: 12px;
    }
    .se-energy-value {
        font-size: 16px;
    }

    .se-card {
        padding: 10px;
        margin-bottom: 10px;
    }
    .se-card-title {
        font-size: 15px;
        margin-bottom: 10px;
    }

    /* 能量来源：竖屏2列 */
    .se-source-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .se-source-item {
        padding: 8px;
    }
    .se-source-icon {
        width: 24px;
        height: 24px;
    }
    .se-source-icon-wrap {
        width: 24px;
        height: 24px;
    }
    .se-source-icon-sm {
        width: 18px;
        height: 18px;
    }
    .se-source-value {
        font-size: 16px;
    }
    .se-source-label {
        font-size: 11px;
    }
    .se-source-sub {
        font-size: 9px;
    }

    .se-calc-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .se-calc-expr {
        font-size: 14px;
    }
    .se-calc-expr-sm {
        font-size: 12px;
    }
    .se-calc-result {
        font-size: 16px;
    }

    /* 基础配置：竖屏2列 */
    .se-config-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .se-config-label {
        font-size: 11px;
    }

    /* 公会福利：竖屏2列 */
    .se-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .se-benefit-item {
        padding: 8px;
    }
    .se-benefit-icon {
        width: 24px;
        height: 24px;
    }
    .se-benefit-name {
        font-size: 11px;
    }
    .se-benefit-value {
        font-size: 14px;
    }

    /* 货架卡片 */
    .se-shelf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .se-shelf-card {
        padding: 8px;
    }
    .se-shelf-icon {
        width: 32px;
        height: 32px;
    }
    .se-shelf-name {
        font-size: 11px;
    }
    .se-shelf-input {
        font-size: 12px;
    }
    .se-shelf-total {
        font-size: 13px;
    }

    .se-modal-grid {
        grid-template-columns: 1fr;
    }
    .se-modal-shelf-icon {
        width: 40px;
        height: 40px;
    }
    .se-modal-shelf-name {
        font-size: 13px;
    }
}

/* ================================================================
   ===== 信息空间页面样式 (Info Space Page Styles) =====
   ===== 匹配 https://cq-zys.cn/infospace 设计风格 =====
   ===== 颜色方案：indigo / purple / pink 渐变 =====
   ================================================================ */

/* ===== 全局：Info Space 内所有图片保持比例 ===== */
.infospace-container img,
.infospace-modal-overlay img {
    object-fit: contain;
}

/* ===== 容器与布局 (Container & Layout) ===== */
.infospace-container {
    background: linear-gradient(135deg, #e0e7ff 0%, #faf5ff 50%, #fdf2f8 100%);
    padding: 24px 20px;
    border-radius: 16px;
    min-height: 100%;
}

.infospace-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #6366f1;
    font-size: 16px;
    gap: 12px;
    text-align: center;
}

.infospace-loading::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 3px solid #c7d2fe;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: infospace-spin 0.8s linear infinite;
}

@keyframes infospace-spin {
    to { transform: rotate(360deg); }
}

/* ===== 标签页 (Tabs) - 与线上平台一致 ===== */
.infospace-page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #312e81;
    margin: 0 0 8px;
}

.infospace-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.infospace-tab-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: #ffffff;
    color: #4338ca;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.infospace-tab-btn:hover {
    background: #eef2ff;
}

.infospace-tab-btn.active {
    background: #4f46e5;
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}

/* ===== 内容卡片 (Content Card) - 与线上平台一致 ===== */
.infospace-content {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 4px;
    min-height: 400px;
}

.infospace-content h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #312e81;
    margin: 0 0 12px;
}

.infospace-content h2.infospace-flex-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.infospace-content h3 {
    font-size: 14px;
    font-weight: 700;
    color: #312e81;
    margin: 0 0 8px;
}

.infospace-content h3.infospace-flex-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== 共享表格 (Shared Tables) ===== */
.infospace-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.infospace-table th {
    font-weight: 600;
    padding: 12px 16px;
    background: #e0e7ff;
    border-bottom: 2px solid #a5b4fc;
    text-align: left;
    white-space: nowrap;
    color: #312e81;
    font-size: 16px;
}

.infospace-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #c7d2fe;
    vertical-align: middle;
    color: #1f2937;
}

.infospace-row-even {
    background: #ffffff;
}

.infospace-row-odd {
    background: #eef2ff;
}

.infospace-table tbody tr:hover {
    background-color: #e0e7ff;
}

.infospace-table-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    margin-right: 4px;
    object-fit: contain;
    flex-shrink: 0;
}

.infospace-table-cell-content {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.infospace-table-cell-text {
    font-weight: 500;
    white-space: nowrap;
}

.infospace-col-divider {
    border-left: 2px solid #c7d2fe;
}

/* 图标叠加数字样式（如等级数字叠加在等级图标上） */
.infospace-icon-overlay {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.infospace-icon-overlay-img {
    width: 20px;
    height: 24px;
    object-fit: contain;
}

.infospace-icon-overlay-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 2px;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}

/* 栏位标题样式 */
.infospace-slots-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #312e81;
    margin: 12px 0 8px;
}

/* 英雄等级经验表标题 */
.infospace-hero-title {
    font-size: 16px;
    font-weight: 700;
    color: #4338ca;
    margin: 0 0 8px;
}

.infospace-level-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.infospace-section-icon {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}

/* ===== Tab 1 - 成就 (Achievements) ===== */
.infospace-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

/* ===== 成就卡片（与线上平台一致） ===== */
.infospace-ach-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #312e81;
    margin: 0 0 12px;
    display: block;
}

.infospace-ach-card {
    background: linear-gradient(to bottom right, #93c5fd, #cffafe, #bfdbfe);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 4px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.infospace-ach-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.infospace-ach-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.infospace-ach-icon-wrapper {
    flex-shrink: 0;
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infospace-ach-bg-outline {
    width: 32px;
    height: 32px;
    object-fit: contain;
    position: absolute;
    inset: 0;
}

.infospace-ach-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    position: relative;
    z-index: 10;
}

.infospace-ach-info {
    flex: 1;
    min-width: 0;
}

.infospace-ach-name {
    font-weight: 700;
    font-size: 12px;
    color: #111827;
    margin-bottom: 2px;
    line-height: 1.25;
}

.infospace-ach-desc {
    font-size: 10px;
    color: #374151;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.infospace-ach-reward {
    flex-shrink: 0;
    position: relative;
}

.infospace-ach-reward-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.infospace-ach-reward-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
}

.infospace-ach-reward-val {
    font-weight: 700;
    font-size: 10px;
    color: #000000;
    line-height: 1;
}

/* ===== Tab 2 - 商店/地窖扩建 (Expansion) ===== */
.infospace-expansion-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.infospace-expansion-panel {
    flex: 1;
    overflow-x: auto;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    padding: 4px;
}

.infospace-expansion-header {
    text-align: center;
    margin-bottom: 12px;
}

.infospace-expansion-header-img {
    height: 40px;
    object-fit: contain;
}

.infospace-expansion-table {
    font-size: 13px;
}

/* ===== Tab 3 - 名望等级 (Renown) ===== */
.infospace-renown-table {
    font-size: 13px;
}

/* ===== Tab 4 - 槽位 (Slots) ===== */
/* 移动端布局：纵向排列 */
.infospace-slots-mobile {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 桌面端布局：3列网格（隐藏在移动端） */
.infospace-slots-grid {
    display: none;
}

@media (min-width: 1024px) {
    .infospace-slots-mobile {
        display: none;
    }

    .infospace-slots-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: start;
    }
}

/* 网格列容器 */
.infospace-slots-grid-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 英雄栏位跨2行 */
@media (min-width: 1024px) {
    .infospace-slots-grid-col-span2 {
        grid-row: span 2;
    }
}

.infospace-slots-section {
    margin-bottom: 0;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 12px;
    overflow-x: auto;
}

/* 移动端分区间距 */
.infospace-slots-mobile .infospace-slots-section {
    margin-bottom: 0;
}

.infospace-slots-title {
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #312e81;
}

.infospace-slots-table {
    font-size: 13px;
}

/* ===== Tab 5 - 商人等级 (Merchant Level) ===== */
.infospace-merchant-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.infospace-merchant-table {
    font-size: 12px;
    min-width: 600px;
}

.infospace-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.infospace-page-btn {
    padding: 6px 14px;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    cursor: pointer;
    background: #ffffff;
    color: #4338ca;
    font-size: 13px;
    transition: all 0.2s ease;
}

.infospace-page-btn:hover {
    background: #e0e7ff;
    border-color: #818cf8;
}

.infospace-page-info {
    padding: 6px 10px;
    font-size: 14px;
    color: #4b5563;
}

/* ===== Tab 6 - 英雄等级经验 (Hero Level XP) ===== */
.infospace-hero-table-wrap {
    overflow-x: auto;
    max-width: 100%;
}

.infospace-hero-table {
    font-size: 13px;
}

/* ===== Tab 7 - 活动事件 (Events) ===== */
.infospace-event-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.infospace-event-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4338ca;
    font-size: 12px;
}

.infospace-event-btn:hover {
    background: #e0e7ff;
}

.infospace-event-btn.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.infospace-event-btn-icon {
    width: 40px;
    height: 40px;
}

.infospace-difficulty-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.infospace-difficulty-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.infospace-difficulty-btn:hover {
    border-color: #a5b4fc;
}

.infospace-difficulty-btn.active {
    border-color: #4f46e5;
    background: #e0e7ff;
}

.infospace-difficulty-btn-icon {
    width: 36px;
    height: 36px;
}

/* ===== 积分需求区域（与线上平台一致） ===== */
.infospace-event-req-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.infospace-event-req-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
    text-align: center;
}

.infospace-event-req-label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 2px;
}

.infospace-event-req-value {
    font-size: 20px;
    font-weight: 800;
    color: #312e81;
    margin-bottom: 2px;
}

.infospace-event-req-desc {
    font-size: 10px;
    color: #6b7280;
}

/* 桌面端样式 */
@media (min-width: 769px) {
    .infospace-event-req-grid {
        gap: 16px;
        margin-bottom: 16px;
    }

    .infospace-event-req-card {
        padding: 12px 24px;
    }

    .infospace-event-req-label {
        font-size: 16px;
    }

    .infospace-event-req-value {
        font-size: 28px;
    }

    .infospace-event-req-desc {
        font-size: 12px;
    }
}

.infospace-event-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}

.infospace-event-section-title {
    font-weight: 700;
    margin: 16px 0 4px;
    color: #312e81;
    font-size: 14px;
}

.infospace-event-section-desc {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 6px;
}

/* ===== 奖励总和网格（2列，与线上平台一致） ===== */
.infospace-event-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

@media (min-width: 769px) {
    .infospace-event-summary-grid {
        gap: 16px;
    }
}

.infospace-event-summary-section {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 8px;
}

@media (min-width: 769px) {
    .infospace-event-summary-section {
        padding: 16px 24px;
    }
}

/* ===== 桌面端分表布局（2列，与线上平台一致） ===== */
.infospace-event-table-desktop {
    display: none;
}

@media (min-width: 769px) {
    .infospace-event-table-mobile {
        display: none;
    }

    .infospace-event-table-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

.infospace-event-table-desktop-col {
    overflow-x: auto;
}

.infospace-event-section-vip-badge {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.infospace-event-table-desktop-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    background: #ffffff;
}

@media (min-width: 769px) {
    .infospace-event-table-desktop-table {
        font-size: 14px;
    }
}

/* ===== 奖励总和 - 垂直列表布局（与线上平台一致） ===== */
.infospace-event-summary-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.infospace-summary-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.infospace-summary-list-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.infospace-summary-list-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.infospace-summary-list-name {
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infospace-summary-list-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}

.infospace-summary-list-qty {
    font-weight: 600;
    color: #3730a3;
}

.infospace-summary-list-extra {
    font-weight: 600;
    color: #16a34a;
}

.infospace-summary-item {
    background: #f3f4f6;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #374151;
}

/* ===== 各级别奖励表格（与线上平台一致） ===== */
.infospace-event-rewards {
    overflow-x: auto;
    margin-bottom: 16px;
}

.infospace-event-table-mobile {
    overflow-x: auto;
}

.infospace-event-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    background: #ffffff;
}

.infospace-event-table thead tr {
    background: #e0e7ff;
}

.infospace-event-table th {
    padding: 4px 8px;
    text-align: center;
    font-weight: 600;
    color: #312e81;
    border-bottom: 1px solid #c7d2fe;
    white-space: nowrap;
    font-size: 11px;
}

/* 奖励列表的表头左对齐 */
.infospace-event-table th:nth-child(4),
.infospace-event-table th:nth-child(5),
.infospace-event-table th:nth-child(6) {
    text-align: left;
}

.infospace-event-table td {
    padding: 4px 8px;
    border-bottom: 1px solid #e0e7ff;
    vertical-align: middle;
    text-align: center;
}

.infospace-event-table-row {
    background: #ffffff;
    transition: background-color 0.15s;
}

.infospace-event-table-row-alt {
    background: #eef2ff;
}

.infospace-event-table-row:hover {
    background: #e0e7ff;
}

.infospace-event-table-level {
    white-space: nowrap;
}

.infospace-event-table-level-num {
    font-weight: 600;
    color: #111827;
}

.infospace-event-table-req {
    white-space: nowrap;
}

.infospace-event-table-req-num {
    color: #374151;
    font-weight: 500;
}

.infospace-event-table-reward {
    text-align: left;
}

.infospace-event-table-reward-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.infospace-event-table-vip-badge {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

.infospace-event-table-reward-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.infospace-event-table-reward-name {
    color: #374151;
}

.infospace-event-table-empty {
    color: #9ca3af;
    white-space: nowrap;
}

.infospace-event-card {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

.infospace-event-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.1;
}

.infospace-event-card-bg-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.infospace-event-card-content {
    position: relative;
    padding: 12px;
    z-index: 1;
}

.infospace-event-card-index {
    font-weight: 700;
    color: #4f46e5;
    margin-bottom: 8px;
}

.infospace-event-card-req {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.infospace-req-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #4b5563;
}

.infospace-req-icon {
    width: 16px;
    height: 16px;
}

.infospace-event-card-rewards {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.infospace-reward-item {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.infospace-reward-label {
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
}

.infospace-reward-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.infospace-reward-bg-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.infospace-reward-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.infospace-reward-name {
    font-size: 13px;
    color: #374151;
}

.infospace-reward-qty {
    font-size: 13px;
    font-weight: 600;
    color: #4338ca;
}

/* ===== Tab 8 - 角色装饰 (Customizations) ===== */
.infospace-cust-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.infospace-cust-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4338ca;
    font-size: 12px;
}

.infospace-cust-btn:hover {
    background: #e0e7ff;
}

.infospace-cust-btn.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.infospace-cust-btn-icon {
    width: 36px;
    height: 36px;
}

.infospace-cust-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    background: #ffffff;
    transition: all 0.2s ease;
}

.infospace-cust-card:hover {
    border-color: #818cf8;
}

.infospace-cust-img-wrap {
    position: relative;
    display: inline-block;
}

.infospace-cust-img {
    width: 80px;
    height: 80px;
}

.infospace-cust-vip {
    position: absolute;
    top: -4px;
    right: -4px;
}

.infospace-cust-vip-icon {
    width: 16px;
    height: 16px;
}

.infospace-cust-name {
    font-size: 13px;
    margin-top: 4px;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infospace-cust-prices {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.infospace-price-item {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #4b5563;
}

.infospace-price-icon {
    width: 16px;
    height: 16px;
}

/* ===== Tab 9 - 家具 (Furniture) ===== */
.infospace-furniture-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.infospace-furniture-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4338ca;
    font-size: 12px;
}

.infospace-furniture-btn:hover {
    background: #e0e7ff;
}

.infospace-furniture-btn.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.infospace-furniture-btn-icon {
    width: 36px;
    height: 36px;
}

.infospace-furniture-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease;
}

.infospace-furniture-card:hover {
    border-color: #4f46e5;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.infospace-furniture-img-wrap {
    text-align: center;
}

.infospace-furniture-img {
    width: 64px;
    height: 64px;
}

.infospace-furniture-name {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infospace-furniture-info {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.infospace-info-item {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    color: #4b5563;
}

.infospace-info-icon {
    width: 16px;
    height: 16px;
}

.infospace-furniture-prices {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.infospace-furniture-hint {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
    margin-top: 4px;
}

/* ===== 家具弹窗 (Furniture Modal) ===== */
.infospace-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.infospace-modal-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

.infospace-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.infospace-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #312e81;
}

.infospace-modal-icon {
    width: 40px;
    height: 40px;
}

.infospace-modal-close {
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
    color: #6b7280;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.2s ease;
}

.infospace-modal-close:hover {
    color: #ef4444;
}

.infospace-modal-info {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.infospace-furniture-modal-table {
    font-size: 13px;
}

/* ===== Tab 10 - 商店装饰 (Shop Decorations) ===== */
.infospace-deco-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.infospace-deco-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4338ca;
    font-size: 12px;
}

.infospace-deco-btn:hover {
    background: #e0e7ff;
}

.infospace-deco-btn.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.infospace-deco-btn-icon {
    width: 36px;
    height: 36px;
}

.infospace-deco-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    background: #ffffff;
    transition: all 0.2s ease;
}

.infospace-deco-card:hover {
    border-color: #818cf8;
}

.infospace-deco-img-wrap {
    text-align: center;
}

.infospace-deco-img {
    width: 72px;
    height: 72px;
}

.infospace-deco-name {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infospace-deco-info {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.infospace-deco-prices {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* ===== Tab 11 - 宠物皮肤 (Pet Skins) ===== */
.infospace-pet-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.infospace-pet-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #4338ca;
    font-size: 12px;
}

.infospace-pet-btn:hover {
    background: #e0e7ff;
}

.infospace-pet-btn.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

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

.infospace-pet-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    background: #ffffff;
    transition: all 0.2s ease;
}

.infospace-pet-card:hover {
    border-color: #818cf8;
}

.infospace-pet-img-wrap {
    position: relative;
    display: inline-block;
}

.infospace-pet-img {
    width: 64px;
    height: 64px;
}

.infospace-pet-locked {
    position: absolute;
    top: -4px;
    right: -4px;
}

.infospace-pet-lock-icon {
    width: 16px;
    height: 16px;
}

.infospace-pet-name {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infospace-pet-prices {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* ===== Tab 12 - 宝箱奖励 (Chest Rewards) ===== */
.infospace-chest-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.infospace-chest-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.infospace-chest-btn:hover {
    border-color: #a5b4fc;
}

.infospace-chest-btn.active {
    border-color: #4f46e5;
    background: #e0e7ff;
}

.infospace-chest-btn-icon {
    width: 40px;
    height: 40px;
}

.infospace-chest-view-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.infospace-chest-view-btn {
    padding: 6px 16px;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    cursor: pointer;
    background: #ffffff;
    color: #4338ca;
    font-size: 13px;
    transition: all 0.2s ease;
}

.infospace-chest-view-btn:hover {
    background: #e0e7ff;
}

.infospace-chest-view-btn.active {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
}

.infospace-chest-detail {
    margin-top: 16px;
}

.infospace-chest-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.infospace-chest-img-wrap {
    flex-shrink: 0;
}

.infospace-chest-img {
    width: 64px;
    height: 64px;
}

.infospace-chest-info {
    flex: 1;
    min-width: 0;
}

.infospace-chest-name {
    font-size: 18px;
    font-weight: 700;
    color: #312e81;
}

.infospace-chest-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.infospace-chest-key {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0;
    font-size: 14px;
    color: #4b5563;
}

.infospace-chest-key-icon {
    width: 24px;
    height: 24px;
}

.infospace-chest-section {
    margin: 16px 0;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}

.infospace-chest-section-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: #312e81;
    display: flex;
    align-items: center;
    gap: 6px;
}

.infospace-chest-qualities {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.infospace-chest-quality-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #4b5563;
}

.infospace-quality-icon {
    width: 24px;
    height: 24px;
}

.infospace-quality-pct {
    font-weight: 700;
    color: #4f46e5;
}

.infospace-chest-components {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.infospace-chest-comp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #4b5563;
    text-align: center;
}

.infospace-comp-icon {
    width: 32px;
    height: 32px;
}

.infospace-comp-qty {
    font-size: 12px;
    color: #6b7280;
}

.infospace-chest-consumables {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.infospace-chest-cons-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #4b5563;
    text-align: center;
}

.infospace-cons-icon {
    width: 28px;
    height: 28px;
}

.infospace-chest-stones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.infospace-chest-stone-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #4b5563;
}

.infospace-stone-icon {
    width: 24px;
    height: 24px;
}

.infospace-chest-subsection {
    font-size: 13px;
    color: #6b7280;
    margin: 8px 0 4px;
    font-weight: 600;
}

.infospace-chest-exclusive {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.infospace-chest-bp-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #4b5563;
    text-align: center;
}

.infospace-bp-icon {
    width: 32px;
    height: 32px;
}

/* ===== 宝箱奖励网格卡片布局 ===== */
/* 分区标题（与线上平台一致） */
.infospace-chest-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    margin-top: 12px;
}

@media (min-width: 768px) {
    .infospace-chest-section-header {
        padding: 8px 16px;
    }
}

.infospace-chest-section-title-text {
    font-size: 14px;
    font-weight: 700;
    color: #312e81;
}

@media (min-width: 768px) {
    .infospace-chest-section-title-text {
        font-size: 16px;
    }
}

.infospace-chest-section-pct {
    font-size: 14px;
    font-weight: 700;
    color: #4f46e5;
}

@media (min-width: 768px) {
    .infospace-chest-section-pct {
        font-size: 16px;
    }
}

.infospace-chest-item-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 4px;
}

@media (min-width: 640px) {
    .infospace-chest-item-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
        padding: 6px;
    }
}

@media (min-width: 1024px) {
    .infospace-chest-item-grid {
        grid-template-columns: repeat(9, 1fr);
        gap: 6px;
    }
}

@media (min-width: 1280px) {
    .infospace-chest-item-grid {
        grid-template-columns: repeat(11, 1fr);
    }
}

.infospace-chest-item-card {
    position: relative;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 768px) {
    .infospace-chest-item-card {
        padding: 8px;
    }
}

.infospace-chest-item-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

.infospace-chest-item-pct {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    color: #4f46e5;
    line-height: 1.3;
    white-space: nowrap;
    width: 100%;
}

@media (min-width: 768px) {
    .infospace-chest-item-pct {
        font-size: 14px;
    }
}

.infospace-chest-item-img-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

@media (min-width: 768px) {
    .infospace-chest-item-img-wrap {
        width: 64px;
        height: 64px;
    }
}

.infospace-chest-item-img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .infospace-chest-item-img {
        max-width: 64px;
        max-height: 64px;
    }
}

.infospace-chest-item-name {
    font-size: 11px;
    font-weight: 600;
    color: #312e81;
    line-height: 1.3;
    text-align: center;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

@media (min-width: 768px) {
    .infospace-chest-item-name {
        font-size: 12px;
    }
}

.infospace-chest-item-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infospace-chest-item-qty {
    font-weight: 700;
    color: #312e81;
    margin-left: 2px;
}

/* 装备品质卡片等级范围徽章 */
.infospace-chest-item-level-badges {
    display: inline-flex;
    gap: 2px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.infospace-chest-item-level-sep {
    font-size: 10px;
    font-weight: 700;
    color: #4b5563;
    line-height: 1;
}

@media (min-width: 768px) {
    .infospace-chest-item-level-sep {
        font-size: 12px;
    }
}

.infospace-chest-item-level-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

@media (min-width: 768px) {
    .infospace-chest-item-level-badge {
        width: 20px;
        height: 20px;
    }
}

.infospace-chest-item-level-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.infospace-chest-item-level-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

@media (min-width: 768px) {
    .infospace-chest-item-level-num {
        font-size: 10px;
    }
}

/* ===== Tab 13 - 满月合成 (Full Moon) ===== */
.infospace-fullmoon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

@media (min-width: 768px) {
    .infospace-fullmoon-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    .infospace-fullmoon-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1536px) {
    .infospace-fullmoon-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

.infospace-fullmoon-card {
    position: relative;
    border: 2px solid #c7d2fe;
    border-radius: 16px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (min-width: 768px) {
    .infospace-fullmoon-card {
        padding: 12px;
        gap: 8px;
    }
}

.infospace-fullmoon-card:hover {
    border-color: #818cf8;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.infospace-fullmoon-result {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.infospace-fullmoon-result-img-wrap {
    position: relative;
    display: inline-block;
}

.infospace-fullmoon-result-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .infospace-fullmoon-result-img {
        width: 80px;
        height: 80px;
    }
}

.infospace-fullmoon-qty {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 8px;
    line-height: 1.4;
}

.infospace-fullmoon-result-name {
    font-size: 14px;
    font-weight: 700;
    color: #312e81;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .infospace-fullmoon-result-name {
        font-size: 18px;
    }
}

.infospace-fullmoon-materials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

@media (min-width: 768px) {
    .infospace-fullmoon-materials {
        gap: 8px;
    }
}

.infospace-fullmoon-material {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #eef2ff;
    border-radius: 9999px;
    padding: 2px 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@media (min-width: 768px) {
    .infospace-fullmoon-material {
        gap: 6px;
        padding: 4px 10px;
    }
}

.infospace-fullmoon-material-img-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.infospace-fullmoon-material-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .infospace-fullmoon-material-img {
        width: 24px;
        height: 24px;
    }
}

.infospace-fullmoon-material-name {
    font-size: 10px;
    color: #1f2937;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .infospace-fullmoon-material-name {
        font-size: 14px;
    }
}

.infospace-fullmoon-material-qty {
    font-size: 10px;
    font-weight: 600;
    color: #4338ca;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .infospace-fullmoon-material-qty {
        font-size: 14px;
    }
}

.infospace-fullmoon-material-type {
    font-size: 10px;
    color: #9ca3af;
}

.infospace-fullmoon-footer {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #e0e7ff;
}

.infospace-fullmoon-footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 4px;
}

@media (min-width: 768px) {
    .infospace-fullmoon-footer-grid {
        gap: 8px 8px;
    }
}

.infospace-fullmoon-footer-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #4b5563;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .infospace-fullmoon-footer-item {
        gap: 6px;
        font-size: 14px;
    }
}

.infospace-fullmoon-footer-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .infospace-fullmoon-footer-icon {
        width: 24px;
        height: 24px;
    }
}

/* ===== 响应式 - 移动端 (Mobile: max-width 768px) ===== */
@media (max-width: 768px) {
    .infospace-container {
        padding: 14px 10px;
    }

    .infospace-content {
        padding: 14px;
    }

    .infospace-table {
        font-size: 12px;
    }

    .infospace-table th {
        font-size: 12px;
        padding: 6px 8px;
    }

    .infospace-table td {
        padding: 6px 4px;
    }

    .infospace-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .infospace-expansion-layout {
        flex-direction: column;
    }

    .infospace-fullmoon-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }

    .infospace-ach-img {
        width: 16px;
        height: 16px;
    }

    .infospace-cust-img {
        width: 64px;
        height: 64px;
    }

    .infospace-furniture-img {
        width: 56px;
        height: 56px;
    }

    .infospace-chest-img {
        width: 56px;
        height: 56px;
    }

    .infospace-modal-content {
        max-width: 90vw;
    }
}

/* ===== 响应式 - 桌面端 (Desktop: min-width 769px) ===== */
@media (min-width: 769px) {
    .infospace-content {
        padding: 24px;
        min-height: 600px;
    }

    .infospace-page-title {
        font-size: 48px;
    }

    .infospace-tabs {
        gap: 16px;
        margin-bottom: 32px;
    }

    .infospace-tab-btn {
        padding: 12px 40px;
        font-size: 16px;
    }

    .infospace-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .infospace-content h3 {
        font-size: 24px;
    }

    .infospace-table-icon {
        width: 20px;
        height: 20px;
    }

    .infospace-table-cell-content {
        gap: 8px;
    }

    .infospace-icon-overlay-img {
        width: 24px;
        height: 28px;
    }

    .infospace-icon-overlay-text {
        font-size: 11px;
    }

    .infospace-slots-title {
        font-size: 20px;
        margin: 16px 0 12px;
    }

    .infospace-hero-title {
        font-size: 20px;
    }

    .infospace-fullmoon-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .infospace-expansion-layout {
        flex-direction: row;
        gap: 32px;
    }

    .infospace-expansion-panel {
        padding: 24px;
    }

    .infospace-expansion-header-img {
        height: 64px;
    }
}

/* ===== 响应式 - 大桌面端 (Large Desktop: min-width 1024px) ===== */
@media (min-width: 1024px) {
    .infospace-card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .infospace-content h2 {
        font-size: 30px;
        margin-bottom: 24px;
    }

    .infospace-ach-card {
        padding: 12px;
    }

    .infospace-ach-card-inner {
        gap: 10px;
    }

    .infospace-ach-icon-wrapper {
        width: 64px;
        height: 64px;
    }

    .infospace-ach-bg-outline {
        width: 64px;
        height: 64px;
    }

    .infospace-ach-img {
        width: 44px;
        height: 44px;
    }

    .infospace-ach-name {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .infospace-ach-desc {
        font-size: 16px;
    }

    .infospace-ach-reward-icon {
        width: 56px;
        height: 56px;
    }

    .infospace-ach-reward-badge {
        bottom: -4px;
        right: -8px;
    }

    .infospace-ach-reward-val {
        font-size: 16px;
    }
}

/* ===== 响应式 - 超大桌面端 (XL Desktop: min-width 1280px) ===== */
@media (min-width: 1280px) {
    .infospace-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== 技能序列助手 ===== */
.skillseq-loading { text-align: center; padding: 40px; color: var(--text-secondary); font-size: 16px; }

/* 标题 */
.skillseq-header { margin-bottom: 16px; }
.skillseq-title { font-size: 24px; font-weight: 800; color: #4338ca; text-shadow: 0 1px 2px rgba(0,0,0,0.05); }
@media (min-width: 769px) { .skillseq-title { font-size: 30px; } }

/* 标签栏 */
.skillseq-tabs { display: flex; gap: 6px; margin-bottom: 0; }
@media (min-width: 769px) { .skillseq-tabs { gap: 8px; } }
.skillseq-tab {
    flex: 1; padding: 10px 12px; text-align: center; font-size: 14px; font-weight: 600;
    border-radius: 8px 8px 0 0; border: 1px solid transparent; cursor: pointer; transition: all 0.2s;
    background: #e5e7eb; color: #6b7280;
}
body:not(.light) .skillseq-tab { background: #374151; color: #9ca3af; }
.skillseq-tab:hover { color: #4338ca; background: #d1d5db; }
body:not(.light) .skillseq-tab:hover { background: #4b5563; color: #818cf8; }
.skillseq-tab.active { color: #4338ca; background: var(--bg-primary, #fff); border-color: #e5e7eb; border-bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,0.03); z-index: 1; }
body:not(.light) .skillseq-tab.active { color: #818cf8; background: var(--bg-card); border-color: var(--border); }
@media (min-width: 769px) {
    .skillseq-tab { padding: 14px 20px; font-size: 16px; border-radius: 10px 10px 0 0; }
}
.skillseq-tab-badge { margin-left: 4px; font-size: 10px; font-weight: 400; color: #d97706; }
@media (min-width: 769px) { .skillseq-tab-badge { font-size: 12px; } }

/* 内容区 */
.skillseq-content {
    background: var(--bg-primary, #fff); border-radius: 0 16px 16px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid #e5e7eb;
    padding: 2%; 
}
@media (min-width: 769px) { .skillseq-content { border-radius: 0 16px 16px 16px; padding: 2.5%; } }
@media (min-width: 1024px) { .skillseq-content { padding: 3%; } }

/* 快速入门 */
.skillseq-tutorial { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 769px) { .skillseq-tutorial { gap: 20px; } }
.skillseq-tutorial-section {
    border-radius: 12px; border: 1px solid #d1fae5; background: rgba(209,250,229,0.3);
    padding: 12px 16px;
}
@media (min-width: 769px) { .skillseq-tutorial-section { padding: 16px; } }
.skillseq-tutorial-title { font-size: 16px; font-weight: 700; color: #047857; margin-bottom: 12px; }
@media (min-width: 769px) { .skillseq-tutorial-title { font-size: 18px; } }
.skillseq-tutorial-steps { display: flex; flex-direction: column; gap: 12px; }
.skillseq-tutorial-step {
    background: var(--bg-primary, #fff); border-radius: 8px; padding: 12px;
    border: 1px solid #d1fae5;
}
@media (min-width: 769px) { .skillseq-tutorial-step { padding: 16px; } }
.skillseq-tutorial-step-title { font-size: 14px; font-weight: 700; color: #065f46; margin-bottom: 6px; }
@media (min-width: 769px) { .skillseq-tutorial-step-title { font-size: 16px; } }
.skillseq-tutorial-step-desc { font-size: 12px; color: #374151; line-height: 1.6; }
@media (min-width: 769px) { .skillseq-tutorial-step-desc { font-size: 14px; } }
.skillseq-tutorial-btn {
    margin-top: 8px; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: #059669; color: #fff; border: 0; cursor: pointer; transition: background 0.2s;
}
.skillseq-tutorial-btn:hover { background: #047857; }
@media (min-width: 769px) { .skillseq-tutorial-btn { font-size: 14px; } }

/* 演示区 */
.skillseq-tutorial-demo-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
@media (min-width: 640px) { .skillseq-tutorial-demo-header { flex-direction: row; align-items: center; justify-content: space-between; } }
.skillseq-tutorial-demo-desc { font-size: 12px; color: #6b7280; margin-top: 2px; }
.skillseq-tutorial-btn-primary {
    padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: #059669; color: #fff; border: 0; cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.skillseq-tutorial-btn-primary:hover { background: #047857; }
.skillseq-tutorial-demo-info { margin-bottom: 16px; }
.skillseq-tutorial-demo-label { font-size: 14px; font-weight: 600; color: #047857; margin-bottom: 6px; }
.skillseq-tutorial-demo-note {
    font-size: 12px; color: #6b7280; line-height: 1.6; margin-bottom: 12px;
    background: rgba(209,250,229,0.6); border: 1px solid #6ee7b7; border-radius: 8px; padding: 8px 12px;
    display: block; margin-top: 6px; font-weight: 600; color: #065f46;
}
.skillseq-tutorial-demo-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1024px) { .skillseq-tutorial-demo-grid { grid-template-columns: 1fr 1fr; } }
.skillseq-tutorial-demo-card {
    background: var(--bg-primary, #fff); border-radius: 8px; border: 1px solid #d1fae5; padding: 12px;
}
@media (min-width: 769px) { .skillseq-tutorial-demo-card { padding: 16px; } }
.skillseq-tutorial-demo-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.skillseq-tutorial-demo-class-icon { width: 36px; height: 36px; }
@media (min-width: 769px) { .skillseq-tutorial-demo-class-icon { width: 40px; height: 40px; } }
.skillseq-tutorial-demo-class-name { font-size: 14px; font-weight: 600; color: #1f2937; }
.skillseq-tutorial-demo-class-status { font-size: 12px; color: #059669; }
.skillseq-tutorial-demo-seq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
@media (min-width: 769px) { .skillseq-tutorial-demo-seq { gap: 8px; } }
.skillseq-tutorial-demo-seq-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border-radius: 6px; padding: 6px; background: var(--bg-primary, #fff); border: 1px solid #f3f4f6;
    transition: all 0.5s;
}
@media (min-width: 769px) { .skillseq-tutorial-demo-seq-item { padding: 8px; } }
.skillseq-tutorial-demo-skill-icon { width: 32px; height: 32px; }
@media (min-width: 769px) { .skillseq-tutorial-demo-skill-icon { width: 36px; height: 36px; } }
.skillseq-tutorial-demo-seq-num { font-size: 10px; color: #6b7280; }
@media (min-width: 769px) { .skillseq-tutorial-demo-seq-num { font-size: 12px; } }

/* 计算器 */
.skillseq-calc-header { margin-bottom: 16px; }
@media (min-width: 769px) { .skillseq-calc-header { margin-bottom: 24px; } }
.skillseq-calc-title { font-size: 18px; font-weight: 800; color: #4338ca; margin-bottom: 4px; text-shadow: 0 1px 2px rgba(0,0,0,0.05); }
@media (min-width: 769px) { .skillseq-calc-title { font-size: 24px; } }
.skillseq-calc-desc { font-size: 14px; color: #6b7280; line-height: 1.6; }
@media (min-width: 769px) { .skillseq-calc-desc { font-size: 16px; } }
.skillseq-calc-link {
    background: none; border: 0; color: #4338ca; font-weight: 600; cursor: pointer;
    text-decoration: underline; font-size: inherit; padding: 0;
}
.skillseq-calc-link:hover { color: #3730a3; }
.skillseq-calc-warning {
    color: #92400e; font-size: 12px; font-weight: 500;
    background: #fffbeb; padding: 8px 12px; border-radius: 8px; border: 1px solid #fde68a; margin-bottom: 16px;
}
@media (min-width: 769px) { .skillseq-calc-warning { font-size: 14px; padding: 10px 16px; margin-bottom: 24px; } }

/* 栏位选择器 */
.skillseq-calc-slot-selector {
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center;
    border-radius: 8px; background: rgba(238,242,255,0.6); padding: 8px 12px;
    margin-bottom: 16px; ring: 1px solid rgba(224,231,255,0.8);
    border: 1px solid rgba(224,231,255,0.8);
}
@media (min-width: 769px) { .skillseq-calc-slot-selector { gap: 8px; padding: 10px 16px; margin-bottom: 24px; } }
.skillseq-calc-slot-label { font-size: 12px; font-weight: 500; color: rgba(67,56,202,0.7); }
.skillseq-calc-slot-hint { font-size: 10px; color: rgba(67,56,202,0.5); }
@media (min-width: 769px) { .skillseq-calc-slot-label { font-size: 14px; } .skillseq-calc-slot-hint { font-size: 12px; } }
.skillseq-calc-slot-btn {
    padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
    background: var(--bg-primary, #fff); color: #6b7280; border: 1px solid rgba(199,210,254,0.8);
    cursor: pointer; transition: all 0.2s;
}
.skillseq-calc-slot-btn:hover { background: rgba(238,242,255,0.8); color: #4338ca; }
.skillseq-calc-slot-btn.active { background: #4338ca; color: #fff; border-color: #4338ca; }
@media (min-width: 769px) { .skillseq-calc-slot-btn { padding: 6px 12px; font-size: 14px; } }

/* 区块 */
.skillseq-calc-section { margin-bottom: 16px; }
@media (min-width: 769px) { .skillseq-calc-section { margin-bottom: 32px; } }
.skillseq-calc-section-title {
    font-size: 16px; font-weight: 700; margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
}
@media (min-width: 769px) { .skillseq-calc-section-title { font-size: 20px; margin-bottom: 16px; } }
.skillseq-known-title { color: #065f46; }
.skillseq-pending-title { color: #075985; }
.skillseq-section-bar { width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0; }
@media (min-width: 769px) { .skillseq-section-bar { height: 24px; } }
.skillseq-known-bar { background: #10b981; }
.skillseq-pending-bar { background: #0ea5e9; }

/* 英雄列表 */
.skillseq-calc-heroes { display: flex; flex-direction: column; gap: 12px; max-width: 672px; margin: 0 auto; }

/* 添加英雄按钮 */
.skillseq-add-hero-btn {
    border-radius: 12px; border: 2px dashed; background: rgba(0,0,0,0.02);
    padding: 12px; cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 120px;
}
@media (min-width: 769px) { .skillseq-add-hero-btn { padding: 24px; min-height: 200px; } }
.skillseq-add-known { border-color: rgba(167,243,208,0.6); background: rgba(236,253,245,0.2); }
.skillseq-add-known:hover { border-color: #34d399; background: rgba(236,253,245,0.4); }
.skillseq-add-pending { border-color: rgba(186,230,253,0.6); background: rgba(240,249,255,0.2); }
.skillseq-add-pending:hover { border-color: #38bdf8; background: rgba(240,249,255,0.4); }
.skillseq-add-hero-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.skillseq-add-hero-icon { width: 32px; height: 32px; opacity: 0.4; }
@media (min-width: 769px) { .skillseq-add-hero-icon { width: 56px; height: 56px; } }
.skillseq-add-hero-text { font-size: 12px; color: #9ca3af; }
@media (min-width: 769px) { .skillseq-add-hero-text { font-size: 14px; } }
.skillseq-add-known:hover .skillseq-add-hero-text { color: #059669; }
.skillseq-add-pending:hover .skillseq-add-hero-text { color: #0ea5e9; }

/* 英雄卡片 */
.skillseq-hero-card {
    border-radius: 12px; border: 1px solid; overflow: hidden;
    background: linear-gradient(135deg, var(--bg-primary, #fff), rgba(0,0,0,0.01));
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: box-shadow 0.2s;
}
.skillseq-hero-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.skillseq-hero-emerald { border-color: rgba(167,243,208,0.9); background: linear-gradient(135deg, var(--bg-primary, #fff), rgba(236,253,245,0.3)); }
.skillseq-hero-sky { border-color: rgba(186,230,253,0.9); background: linear-gradient(135deg, var(--bg-primary, #fff), rgba(240,249,255,0.3)); }
.skillseq-hero-card-bar { height: 2px; }
.skillseq-hero-card-bar-emerald { background: linear-gradient(to right, rgba(16,185,129,0.8), rgba(45,212,191,0.6), rgba(16,185,129,0.5)); }
.skillseq-hero-card-bar-sky { background: linear-gradient(to right, rgba(14,165,233,0.8), rgba(56,189,248,0.6), rgba(14,165,233,0.5)); }
.skillseq-hero-card-body { padding: 10px; }
@media (min-width: 769px) { .skillseq-hero-card-body { padding: 16px; } }

/* 操作按钮 */
.skillseq-hero-card-actions {
    display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.05);
}
@media (min-width: 769px) { .skillseq-hero-card-actions { gap: 8px; margin-bottom: 12px; padding-bottom: 8px; } }
.skillseq-hero-card-btn {
    padding: 2px 8px; border-radius: 6px; border: 1px solid; font-size: 10px; font-weight: 500;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
@media (min-width: 769px) { .skillseq-hero-card-btn { padding: 4px 12px; font-size: 12px; } }
.skillseq-btn-sky { border-color: #bae6fd; background: #f0f9ff; color: #0369a1; }
.skillseq-btn-sky:hover { background: #e0f2fe; }
.skillseq-btn-red { border-color: #fecaca; background: #fef2f2; color: #dc2626; }
.skillseq-btn-red:hover { background: #fee2e2; }

/* 卡片主体 */
.skillseq-hero-card-main { display: flex; align-items: flex-start; gap: 10px; }
@media (min-width: 769px) { .skillseq-hero-card-main { gap: 16px; } }

/* 左侧 */
.skillseq-hero-card-left { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.skillseq-hero-card-icon-btn {
    border-radius: 12px; background: linear-gradient(to bottom, rgba(236,253,245,0.8), rgba(249,250,251,1));
    padding: 6px; border: 1px solid rgba(167,243,208,0.8); cursor: pointer; transition: all 0.2s;
}
.skillseq-hero-card-icon-btn:hover { border-color: #6ee7b7; }
.skillseq-hero-sky .skillseq-hero-card-icon-btn { border-color: rgba(186,230,253,0.8); background: linear-gradient(to bottom, rgba(240,249,255,0.8), rgba(249,250,251,1)); }
.skillseq-hero-sky .skillseq-hero-card-icon-btn:hover { border-color: #7dd3fc; }
.skillseq-hero-card-icon { width: 40px; height: 40px; }
@media (min-width: 769px) { .skillseq-hero-card-icon { width: 64px; height: 64px; } }
.skillseq-hero-card-name { font-weight: 600; font-size: 12px; margin-top: 6px; text-align: center; color: #1f2937; }
@media (min-width: 769px) { .skillseq-hero-card-name { font-size: 14px; margin-top: 8px; } }

/* 右侧 */
.skillseq-hero-card-right { flex: 1; min-width: 0; }

/* 技能槽 */
.skillseq-hero-card-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 8px; }
@media (min-width: 769px) { .skillseq-hero-card-slots { gap: 8px; margin-bottom: 12px; } }
.skillseq-hero-card-slot { display: flex; flex-direction: column; align-items: center; }
.skillseq-hero-card-slot-btn {
    width: 40px; height: 40px; border-radius: 8px; background: rgba(236,253,245,0.5);
    border: 1px solid rgba(167,243,208,0.7); cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.skillseq-hero-card-slot-btn:hover { border-color: #6ee7b7; background: var(--bg-primary, #fff); }
.skillseq-hero-card-slot-btn.selected { border-color: #4338ca; box-shadow: 0 0 0 2px rgba(67,56,202,0.2); }
.skillseq-hero-sky .skillseq-hero-card-slot-btn { background: rgba(240,249,255,0.5); border-color: rgba(186,230,253,0.7); }
.skillseq-hero-sky .skillseq-hero-card-slot-btn:hover { border-color: #7dd3fc; background: var(--bg-primary, #fff); }
.skillseq-hero-card-slot-icon { width: 36px; height: 36px; }
@media (min-width: 769px) { .skillseq-hero-card-slot-btn, .skillseq-hero-card-slot-icon { width: 64px; height: 64px; } }
.skillseq-hero-card-slot-name { font-size: 10px; text-align: center; color: #6b7280; margin-top: 2px; padding: 0 2px; line-height: 1.2; }
@media (min-width: 769px) { .skillseq-hero-card-slot-name { font-size: 14px; margin-top: 2px; } }

/* 序列 */
.skillseq-hero-card-seq-section { margin-top: 8px; }
.skillseq-hero-card-seq-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
@media (min-width: 769px) { .skillseq-hero-card-seq-header { gap: 8px; margin-bottom: 8px; } }
.skillseq-hero-card-seq-dot { width: 4px; height: 4px; border-radius: 50%; background: #34d399; flex-shrink: 0; }
.skillseq-pending-dot { background: #38bdf8; }
.skillseq-hero-card-seq-label { font-size: 10px; font-weight: 500; color: rgba(5,150,105,0.7); }
@media (min-width: 769px) { .skillseq-hero-card-seq-label { font-size: 12px; } }
.skillseq-hero-card-seq-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
    background: rgba(236,253,245,0.5); padding: 6px; border-radius: 8px; border: 1px solid rgba(167,243,208,0.8);
}
@media (min-width: 640px) { .skillseq-hero-card-seq-grid { grid-template-columns: repeat(7, 1fr); } }
@media (min-width: 769px) { .skillseq-hero-card-seq-grid { grid-template-columns: repeat(10, 1fr); gap: 4px; padding: 8px; } }
.skillseq-hero-card-seq-btn {
    width: 28px; height: 28px; border-radius: 6px; background: var(--bg-primary, #fff);
    border: 1px solid rgba(229,231,235,0.6); cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.skillseq-hero-card-seq-btn:hover { border-color: #6ee7b7; }
.skillseq-hero-card-seq-icon { width: 28px; height: 28px; }
@media (min-width: 769px) { .skillseq-hero-card-seq-btn, .skillseq-hero-card-seq-icon { width: 40px; height: 40px; } }

/* 预测结果 */
.skillseq-hero-card-predictions { margin-top: 8px; }
.skillseq-prediction-grid { display: flex; flex-direction: column; gap: 8px; }
.skillseq-prediction-item {
    background: rgba(240,249,255,0.5); border-radius: 8px; padding: 6px;
    border: 1px solid rgba(186,230,253,0.5);
}
.skillseq-prediction-pos { font-size: 10px; font-weight: 600; color: #0369a1; margin-bottom: 4px; }
.skillseq-prediction-empty { font-size: 12px; color: #9ca3af; text-align: center; padding: 8px; }
.skillseq-prediction-skill {
    display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 4px;
    border: 1px solid transparent; background: none; cursor: pointer; transition: all 0.2s;
}
.skillseq-prediction-skill:hover { background: rgba(0,0,0,0.03); }
.skillseq-prediction-skill.selected { border-color: #4338ca; background: rgba(67,56,202,0.05); }
.skillseq-prediction-skill-icon { width: 24px; height: 24px; }
.skillseq-prediction-grade {
    font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 4px;
}
.skillseq-grade-S { background: #fef08a; color: #854d0e; }
.skillseq-grade-A { background: #fed7aa; color: #9a3412; }
.skillseq-grade-B { background: #dbeafe; color: #1e40af; }
.skillseq-grade-C { background: #f3f4f6; color: #4b5563; }
.skillseq-grade-D { background: #f3f4f6; color: #9ca3af; }
.skillseq-prediction-prob { font-size: 10px; font-weight: 600; color: #6b7280; }
.skillseq-hero-card-no-prediction { text-align: center; padding: 12px; font-size: 12px; color: #9ca3af; }

/* 弹窗 */
.skillseq-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.skillseq-modal {
    background: var(--bg-primary, #fff); border-radius: 16px; max-width: 90vw; max-height: 80vh;
    overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.2); display: flex; flex-direction: column;
}
.skillseq-class-modal { width: 700px; max-width: 90vw; }
.skillseq-skill-modal { width: 700px; max-width: 90vw; }
.skillseq-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid #e5e7eb;
}
.skillseq-modal-title { font-size: 16px; font-weight: 700; color: #1f2937; }
.skillseq-modal-close {
    background: none; border: 0; font-size: 20px; color: #9ca3af; cursor: pointer; padding: 4px;
}
.skillseq-modal-close:hover { color: #ef4444; }

/* 职业选择网格 - 完全匹配英雄体系搭配平台 */
.skillseq-class-grid {
    display: grid; grid-template-columns: repeat(7, 64px);
    gap: 16px; justify-content: center; padding: 12px 16px 0;
    overflow-y: auto;
}
.skillseq-class-item {
    width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px;
    border-radius: 12px; border: 2px solid transparent; background: var(--bg-secondary);
    cursor: pointer; transition: all 0.2s; position: relative;
}
.skillseq-class-item:hover { border-color: var(--text-secondary); background: var(--bg-card-hover); }
.skillseq-class-item-icon { width: 56px; height: 56px; border-radius: 12px; }
.skillseq-class-item-elem { position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; }
.skillseq-class-item-name { font-size: 12px; font-weight: 500; color: var(--text-primary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* 技能选择网格 */
.skillseq-skill-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px; padding: 16px; overflow-y: auto;
}
.skillseq-skill-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px;
    border-radius: 8px; border: 1px solid #e5e7eb; background: var(--bg-primary, #fff);
    cursor: pointer; transition: all 0.2s;
}
.skillseq-skill-item:hover { border-color: #818cf8; background: #eef2ff; }
.skillseq-skill-item-icon { width: 36px; height: 36px; }
.skillseq-skill-item-name { font-size: 10px; font-weight: 500; color: #374151; text-align: center; line-height: 1.2; }

/* 序列记录 */
.skillseq-config { display: flex; flex-direction: column; gap: 20px; }
.skillseq-config-placeholder { text-align: center; padding: 40px; }
.skillseq-config-title { font-size: 20px; font-weight: 700; color: #4338ca; margin-bottom: 8px; }
.skillseq-config-desc { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.skillseq-config-coming-soon { font-size: 16px; color: #9ca3af; padding: 20px; }
.skillseq-config-section { background: var(--bg-primary, #fff); border-radius: 12px; border: 1px solid #e5e7eb; padding: 16px; }
.skillseq-config-section-title { font-size: 16px; font-weight: 700; color: #4338ca; margin-bottom: 12px; }
.skillseq-config-record { display: flex; align-items: center; gap: 12px; padding: 8px; border-bottom: 1px solid #f3f4f6; }
.skillseq-config-record-icon { width: 40px; height: 40px; }
.skillseq-config-record-info { flex: 1; min-width: 0; }
.skillseq-config-record-name { font-size: 14px; font-weight: 600; color: #1f2937; }
.skillseq-config-record-seq { font-size: 12px; color: #6b7280; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 技能序列助手 - 新增样式 ===== */

/* 教程：展开帮助 */
.skillseq-tut-expand-btn {
    margin-top: 8px; background: none; border: 0; color: #059669;
    font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;
}
.skillseq-tut-expand-btn:hover { color: #047857; }
@media (min-width: 769px) { .skillseq-tut-expand-btn { font-size: 14px; } }
.skillseq-tut-help { margin-top: 8px; }
.skillseq-tut-help-list { list-style: disc; padding-left: 16px; font-size: 12px; color: #4b5563; line-height: 1.8; }
@media (min-width: 769px) { .skillseq-tut-help-list { font-size: 14px; } }
.skillseq-tut-go-btn {
    margin-top: 8px; padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: #059669; color: #fff; border: 0; cursor: pointer; transition: background 0.2s;
}
.skillseq-tut-go-btn:hover { background: #047857; }
@media (min-width: 769px) { .skillseq-tut-go-btn { font-size: 14px; } }

/* 教程区块 */
.skillseq-tut-section {
    border-radius: 12px; padding: 12px; border: 1px solid;
}
@media (min-width: 769px) { .skillseq-tut-section { padding: 16px; } }
.skillseq-tut-green { border-color: #d1fae5; background: rgba(209,250,229,0.3); }
.skillseq-tut-amber { border-color: #fde68a; background: rgba(254,243,199,0.3); }
.skillseq-tut-section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
@media (min-width: 769px) { .skillseq-tut-section-title { font-size: 18px; } }
.skillseq-tut-green-title { color: #047857; }
.skillseq-tut-amber-title { color: #b45309; }
.skillseq-tut-green-step-title { color: #065f46; }
.skillseq-tut-steps { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.skillseq-tut-step {
    width: 100%; background: var(--bg-primary, #fff); border-radius: 8px; padding: 12px;
    border: 1px solid #d1fae5; text-align: center;
}
@media (min-width: 769px) { .skillseq-tut-step { padding: 16px; } }
.skillseq-tut-step-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
@media (min-width: 769px) { .skillseq-tut-step-title { font-size: 16px; } }
.skillseq-tut-step-desc { font-size: 12px; color: #374151; line-height: 1.6; }
@media (min-width: 769px) { .skillseq-tut-step-desc { font-size: 14px; } }

/* 教程演示 */
.skillseq-tut-demo-header { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
@media (min-width: 640px) { .skillseq-tut-demo-header { flex-direction: row; align-items: center; justify-content: space-between; } }
.skillseq-tut-demo-desc { font-size: 12px; color: #6b7280; }
@media (min-width: 769px) { .skillseq-tut-demo-desc { font-size: 14px; } }
.skillseq-tut-reset-btn {
    padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: #059669; color: #fff; border: 0; cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.skillseq-tut-reset-btn:hover { background: #047857; }
.skillseq-tut-demo-preview-section { margin-bottom: 16px; }
.skillseq-tut-demo-trigger-section { margin-top: 16px; }
.skillseq-tut-demo-label { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.skillseq-tut-green-label { color: #047857; }
.skillseq-tut-rose-label { color: #e11d48; }
.skillseq-tut-demo-note {
    font-size: 12px; color: #065f46; line-height: 1.6; margin-bottom: 12px;
    background: rgba(209,250,229,0.6); border: 1px solid #6ee7b7; border-radius: 8px; padding: 8px 12px;
    font-weight: 600; display: block; margin-top: 6px;
}
.skillseq-tut-demo-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1024px) { .skillseq-tut-demo-grid { grid-template-columns: 1fr 1fr; } }
.skillseq-tut-demo-card {
    background: var(--bg-primary, #fff); border-radius: 8px; padding: 12px; border: 1px solid #d1fae5;
}
@media (min-width: 769px) { .skillseq-tut-demo-card { padding: 16px; } }
.skillseq-tut-demo-rose-card { border-color: #fecdd3; }
.skillseq-tut-amber-card { border-color: #fde68a; }
.skillseq-tut-demo-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.skillseq-tut-demo-class-icon { width: 36px; height: 36px; }
@media (min-width: 769px) { .skillseq-tut-demo-class-icon { width: 40px; height: 40px; } }
.skillseq-tut-demo-class-name { font-size: 14px; font-weight: 600; color: #1f2937; }
.skillseq-tut-demo-class-status { font-size: 12px; }
.skillseq-tut-green-status { color: #059669; }
.skillseq-tut-rose-status { color: #e11d48; }
.skillseq-tut-demo-seq-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
@media (min-width: 769px) { .skillseq-tut-demo-seq-grid { gap: 8px; } }
.skillseq-tut-demo-seq-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    border-radius: 6px; padding: 6px; background: var(--bg-primary, #fff); border: 1px solid #f3f4f6;
    transition: all 0.5s;
}
@media (min-width: 769px) { .skillseq-tut-demo-seq-item { padding: 8px; } }
.skillseq-tut-demo-skill-icon { width: 32px; height: 32px; }
@media (min-width: 769px) { .skillseq-tut-demo-skill-icon { width: 36px; height: 36px; } }
.skillseq-tut-demo-skill-icon-sm { width: 32px; height: 32px; }
@media (min-width: 769px) { .skillseq-tut-demo-skill-icon-sm { width: 36px; height: 36px; } }
.skillseq-tut-demo-seq-num { font-size: 10px; color: #6b7280; }
@media (min-width: 769px) { .skillseq-tut-demo-seq-num { font-size: 12px; } }

/* 演示触发按钮 */
.skillseq-tut-demo-trigger-btn {
    width: 100%; padding: 8px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: #059669; color: #fff; border: 0; cursor: pointer; transition: background 0.2s;
}
.skillseq-tut-demo-trigger-btn:hover { background: #047857; }
.skillseq-tut-demo-trigger-disabled { background: #fecdd3; color: #e11d48; cursor: not-allowed; }
@media (min-width: 769px) { .skillseq-tut-demo-trigger-btn { font-size: 14px; } }
.skillseq-tut-demo-current {
    display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: #374151;
}
@media (min-width: 769px) { .skillseq-tut-demo-current { font-size: 14px; } }
.skillseq-tut-demo-current-label { color: #6b7280; }
.skillseq-tut-demo-current-name { font-weight: 500; }
.skillseq-tut-demo-fixed-seq {
    margin-top: 12px; border-radius: 8px; border: 1px solid #fecdd3; background: #fff1f2; padding: 8px;
}
@media (min-width: 769px) { .skillseq-tut-demo-fixed-seq { padding: 12px; } }
.skillseq-tut-demo-fixed-label { font-size: 12px; font-weight: 600; color: #e11d48; margin-bottom: 6px; }
@media (min-width: 769px) { .skillseq-tut-demo-fixed-label { font-size: 14px; } }
.skillseq-tut-demo-continue-btn {
    margin-bottom: 8px; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: #e11d48; color: #fff; border: 0; cursor: pointer; transition: background 0.2s;
}
.skillseq-tut-demo-continue-btn:hover { background: #be123c; }
@media (min-width: 769px) { .skillseq-tut-demo-continue-btn { font-size: 14px; } }
.skillseq-tut-demo-fixed-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
@media (min-width: 769px) { .skillseq-tut-demo-fixed-grid { gap: 8px; } }
.skillseq-tut-demo-fixed-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    border-radius: 6px; padding: 6px; background: var(--bg-primary, #fff); border: 1px solid #fecdd3;
}
.skillseq-tut-demo-fixed-item.current { background: #ffe4e6; border-color: #fb7185; }
.skillseq-tut-demo-fixed-icon { width: 28px; height: 28px; }
@media (min-width: 769px) { .skillseq-tut-demo-fixed-icon { width: 32px; height: 32px; } }
.skillseq-tut-demo-fixed-num { font-size: 10px; color: #6b7280; }
@media (min-width: 769px) { .skillseq-tut-demo-fixed-num { font-size: 12px; } }

/* 教程比较区 */
.skillseq-tut-compare-section { margin-bottom: 16px; }
.skillseq-tut-compare-header {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px;
}
@media (min-width: 640px) { .skillseq-tut-compare-header { flex-direction: row; align-items: center; justify-content: space-between; } }
.skillseq-tut-compare-label { font-size: 12px; font-weight: 500; color: #374151; }
@media (min-width: 769px) { .skillseq-tut-compare-label { font-size: 14px; } }
.skillseq-tut-compare-btn {
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    background: #d97706; color: #fff; border: 0; cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.skillseq-tut-compare-btn:hover { background: #b45309; }
@media (min-width: 769px) { .skillseq-tut-compare-btn { font-size: 14px; } }
.skillseq-tut-compare-owned {
    display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.skillseq-tut-compare-owned-label { font-size: 10px; color: #6b7280; white-space: nowrap; }
@media (min-width: 769px) { .skillseq-tut-compare-owned-label { font-size: 12px; } }
.skillseq-tut-owned-badges { display: flex; gap: 4px; }
@media (min-width: 769px) { .skillseq-tut-owned-badges { gap: 6px; } }
.skillseq-tut-owned-badge {
    width: 24px; height: 24px; border-radius: 4px; border: 1px solid #fde68a;
}
@media (min-width: 769px) { .skillseq-tut-owned-badge { width: 28px; height: 28px; } }

/* 添加至已有英雄按钮 */
.skillseq-btn-emerald { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.skillseq-btn-emerald:hover { background: #d1fae5; }

/* 技能槽 - sky样式 */
.skillseq-hero-card-slot-sky { background: rgba(240,249,255,0.5); border-color: rgba(186,230,253,0.7); }
.skillseq-hero-card-slot-sky:hover { border-color: #7dd3fc; background: var(--bg-primary, #fff); }

/* 预测结果新布局 */
.skillseq-prediction-container {
    border-radius: 8px; background: rgba(240,249,255,0.5); padding: 6px;
    border: 1px solid rgba(186,230,253,0.8); display: flex; flex-direction: column; gap: 4px;
}
@media (min-width: 769px) { .skillseq-prediction-container { padding: 8px; gap: 8px; } }
.skillseq-prediction-row { display: flex; gap: 4px; }
@media (min-width: 769px) { .skillseq-prediction-row { gap: 8px; } }
.skillseq-prediction-cell {
    flex: 1; display: flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.7); border-radius: 6px; padding: 4px;
    border: 1px solid #f3f4f6;
}
@media (min-width: 769px) { .skillseq-prediction-cell { gap: 8px; padding: 4px 6px; } }
.skillseq-prediction-cell-empty { flex: 1; }
.skillseq-prediction-pos {
    font-size: 10px; font-weight: 500; color: #9ca3af; width: 32px; flex-shrink: 0; font-variant-numeric: tabular-nums;
}
@media (min-width: 769px) { .skillseq-prediction-pos { font-size: 12px; width: 40px; } }
.skillseq-prediction-skills { display: flex; gap: 4px; flex-wrap: wrap; }
@media (min-width: 769px) { .skillseq-prediction-skills { gap: 8px; } }
.skillseq-prediction-skill-wrap {
    position: relative; cursor: pointer;
}
.skillseq-prediction-skill-wrap.selected .skillseq-prediction-skill-icon {
    ring: 2px; outline: 2px solid #0ea5e9; border-radius: 6px;
}
.skillseq-prediction-skill-icon {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid rgba(186,230,253,0.7); transition: all 0.2s;
}
@media (min-width: 769px) { .skillseq-prediction-skill-icon { width: 40px; height: 40px; } }
.skillseq-prediction-skill-icon:hover { border-color: #38bdf8; }
.skillseq-prediction-grade {
    position: absolute; top: -4px; left: -4px; font-size: 9px; font-weight: 700;
    padding: 1px 4px; border-radius: 4px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    min-width: 16px; text-align: center;
}
@media (min-width: 769px) { .skillseq-prediction-grade { font-size: 10px; top: -8px; left: -8px; min-width: 20px; } }
.skillseq-prediction-checkbox {
    position: absolute; top: -2px; right: -2px; width: 12px; height: 12px;
    accent-color: #0284c7; background: #fff; border: 1px solid #d1d5db; border-radius: 2px; cursor: pointer;
}
@media (min-width: 769px) { .skillseq-prediction-checkbox { width: 16px; height: 16px; top: -4px; right: -4px; } }

/* 职业选择器图标包装 */
.skillseq-class-item-icon-wrap { position: relative; }

/* 技能选择网格 */
.skillseq-skill-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; overflow-y: auto;
}
@media (min-width: 640px) { .skillseq-skill-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .skillseq-skill-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .skillseq-skill-grid { grid-template-columns: repeat(8, 1fr); } }
.skillseq-skill-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px;
    border-radius: 8px; border: 2px solid #e5e7eb; background: var(--bg-primary, #fff);
    cursor: pointer; transition: all 0.2s;
}
@media (min-width: 769px) { .skillseq-skill-item { padding: 12px; } }
.skillseq-skill-item:hover { border-color: #6366f1; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.skillseq-skill-item-icon { width: 32px; height: 32px; }
@media (min-width: 769px) { .skillseq-skill-item-icon { width: 48px; height: 48px; } }
.skillseq-skill-item-name { font-size: 10px; font-weight: 600; color: #1f2937; text-align: center; line-height: 1.2; }
@media (min-width: 769px) { .skillseq-skill-item-name { font-size: 12px; } }
.skillseq-skill-empty { text-align: center; color: #9ca3af; padding: 32px; font-size: 14px; }

/* 配置页（序列记录） */
.skillseq-config { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 769px) { .skillseq-config { gap: 20px; } }
.skillseq-config-panel {
    background: var(--bg-primary, #fff); border-radius: 16px; padding: 16px;
    border: 1px solid rgba(238,242,255,0.5); display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 769px) { .skillseq-config-panel { padding: 20px; } }
.skillseq-config-legend {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
    font-size: 14px; color: #374151;
}
@media (min-width: 769px) { .skillseq-config-legend { gap: 16px; font-size: 16px; } }
.skillseq-config-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.skillseq-config-legend-box {
    display: inline-flex; width: 16px; height: 16px; border-radius: 2px; border: 1px solid;
}
@media (min-width: 769px) { .skillseq-config-legend-box { width: 20px; height: 20px; } }
.skillseq-config-legend-green { background: #10b981; border-color: #059669; }
.skillseq-config-legend-red { background: #f43f5e; border-color: #e11d48; }
.skillseq-config-buttons { display: flex; gap: 8px; justify-content: center; }
@media (min-width: 769px) { .skillseq-config-buttons { gap: 12px; } }
.skillseq-config-btn {
    padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500;
    border: 0; cursor: pointer; transition: all 0.2s;
}
@media (min-width: 769px) { .skillseq-config-btn { padding: 10px 20px; font-size: 16px; } }
.skillseq-config-btn-reset { background: #e5e7eb; color: #374151; }
.skillseq-config-btn-reset:hover { background: #d1d5db; }
.skillseq-config-btn-save { background: #4338ca; color: #fff; }
.skillseq-config-btn-save:hover { background: #3730a3; }

.skillseq-config-notice {
    border-radius: 12px; border: 2px solid #34d399; background: linear-gradient(to right, rgba(236,253,245,0.5), rgba(204,251,241,0.5));
    padding: 12px 16px;
}
@media (min-width: 769px) { .skillseq-config-notice { padding: 14px 20px; } }
.skillseq-config-notice-title { text-align: center; font-size: 14px; font-weight: 700; color: #065f46; margin-bottom: 4px; }
@media (min-width: 769px) { .skillseq-config-notice-title { font-size: 16px; } }
.skillseq-config-notice-desc { text-align: center; font-size: 12px; color: #064e3b; line-height: 1.6; }
@media (min-width: 769px) { .skillseq-config-notice-desc { font-size: 14px; } }
.skillseq-config-notice-red-box {
    display: inline-block; width: 14px; height: 14px; border-radius: 2px;
    background: #f43f5e; border: 1px solid #e11d48; vertical-align: middle; margin: 0 2px;
}
@media (min-width: 769px) { .skillseq-config-notice-red-box { width: 16px; height: 16px; } }

.skillseq-config-table-section { }
.skillseq-config-table-title { font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }
@media (min-width: 769px) { .skillseq-config-table-title { font-size: 20px; } }
.skillseq-config-table-wrap { overflow-x: auto; }
.skillseq-config-table { border-collapse: collapse; width: 100%; min-width: 600px; }
.skillseq-config-th {
    padding: 8px; font-size: 12px; font-weight: 600; color: #374151; text-align: center;
    border-bottom: 2px solid #e5e7eb; white-space: nowrap;
}
@media (min-width: 769px) { .skillseq-config-th { padding: 12px; font-size: 14px; } }
.skillseq-config-td { padding: 4px; text-align: center; border-bottom: 1px solid #f3f4f6; }
@media (min-width: 769px) { .skillseq-config-td { padding: 8px; } }
.skillseq-config-td-class { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
@media (min-width: 769px) { .skillseq-config-td-class { gap: 8px; } }
.skillseq-config-class-icon { width: 24px; height: 24px; }
@media (min-width: 769px) { .skillseq-config-class-icon { width: 32px; height: 32px; } }
.skillseq-config-cell {
    width: 24px; height: 24px; border-radius: 4px; border: 1px solid; cursor: pointer; transition: all 0.2s;
}
@media (min-width: 769px) { .skillseq-config-cell { width: 32px; height: 32px; } }
.skillseq-config-cell.green { background: #10b981; border-color: #059669; }
.skillseq-config-cell.green:hover { background: #34d399; }
.skillseq-config-cell.red { background: #f43f5e; border-color: #e11d48; }
.skillseq-config-cell.red:hover { background: #fb7185; }

/* Toast */
.skillseq-toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: #4338ca; color: #fff; padding: 12px 24px; border-radius: 8px;
    font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 10001; animation: skillseq-toast-in 0.3s ease;
}
@keyframes skillseq-toast-in { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* 横屏英雄列表 */
@media (min-width: 769px) {
    .skillseq-calc-heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: none; }
}
/* ===== 技能序列助手 - 暗色主题适配 ===== */
body:not(.light) .skillseq-modal-title { color: #e8e8f0; }
body:not(.light) .skillseq-skill-item-name { color: #e8e8f0; }
body:not(.light) .skillseq-class-item-name { color: var(--text-primary); }
body:not(.light) .skillseq-skill-item { background: var(--bg-card); border-color: var(--border); }
body:not(.light) .skillseq-skill-item:hover { border-color: #6366f1; background: var(--bg-card-hover); }

/* ===== 技能序列助手 - 暗色主题补全（文本颜色与边框/背景适配） ===== */

/* 顶部标题 / 容器 / 标签 */
body:not(.light) .skillseq-title { color: #818cf8; }
body:not(.light) .skillseq-content { border-color: var(--border); }
body:not(.light) .skillseq-tab-badge { color: #fbbf24; }

/* 快速入门 */
body:not(.light) .skillseq-tutorial-section { border-color: rgba(52,211,153,0.25); background: rgba(16,185,129,0.08); }
body:not(.light) .skillseq-tutorial-title { color: #34d399; }
body:not(.light) .skillseq-tutorial-step { border-color: rgba(52,211,153,0.25); }
body:not(.light) .skillseq-tutorial-step-title { color: #34d399; }
body:not(.light) .skillseq-tutorial-step-desc { color: var(--text-primary); }
body:not(.light) .skillseq-tutorial-demo-desc { color: var(--text-secondary); }
body:not(.light) .skillseq-tutorial-demo-label { color: #34d399; }
body:not(.light) .skillseq-tutorial-demo-note { color: #34d399; background: rgba(16,185,129,0.12); border-color: rgba(52,211,153,0.4); }
body:not(.light) .skillseq-tutorial-demo-card { border-color: rgba(52,211,153,0.25); }
body:not(.light) .skillseq-tutorial-demo-class-name { color: var(--text-primary); }
body:not(.light) .skillseq-tutorial-demo-class-status { color: #34d399; }
body:not(.light) .skillseq-tutorial-demo-seq-item { border-color: var(--border); }
body:not(.light) .skillseq-tutorial-demo-seq-num { color: var(--text-secondary); }

/* 计算器 */
body:not(.light) .skillseq-calc-title { color: #818cf8; }
body:not(.light) .skillseq-calc-desc { color: var(--text-secondary); }
body:not(.light) .skillseq-calc-link { color: #818cf8; }
body:not(.light) .skillseq-calc-link:hover { color: #6366f1; }
body:not(.light) .skillseq-calc-warning { color: #fbbf24; background: rgba(245,158,11,0.1); border-color: rgba(251,191,36,0.3); }
body:not(.light) .skillseq-calc-slot-selector { background: rgba(99,102,241,0.08); border-color: rgba(129,140,248,0.25); }
body:not(.light) .skillseq-calc-slot-label { color: rgba(129,140,248,0.7); }
body:not(.light) .skillseq-calc-slot-hint { color: rgba(129,140,248,0.5); }
body:not(.light) .skillseq-calc-slot-btn { color: var(--text-secondary); border-color: rgba(129,140,248,0.3); }
body:not(.light) .skillseq-calc-slot-btn:hover { background: rgba(99,102,241,0.15); color: #818cf8; }
body:not(.light) .skillseq-known-title { color: #34d399; }
body:not(.light) .skillseq-pending-title { color: #38bdf8; }

/* 添加英雄 / 英雄卡片 */
body:not(.light) .skillseq-add-hero-text { color: var(--text-secondary); }
body:not(.light) .skillseq-add-known:hover .skillseq-add-hero-text { color: #34d399; }
body:not(.light) .skillseq-add-pending:hover .skillseq-add-hero-text { color: #38bdf8; }
body:not(.light) .skillseq-btn-sky { background: rgba(56,189,248,0.1); border-color: rgba(56,189,248,0.3); color: #38bdf8; }
body:not(.light) .skillseq-btn-sky:hover { background: rgba(56,189,248,0.2); }
body:not(.light) .skillseq-btn-red { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); color: #f87171; }
body:not(.light) .skillseq-btn-red:hover { background: rgba(248,113,113,0.2); }
body:not(.light) .skillseq-btn-emerald { background: rgba(16,185,129,0.1); border-color: rgba(52,211,153,0.3); color: #34d399; }
body:not(.light) .skillseq-btn-emerald:hover { background: rgba(16,185,129,0.2); }
body:not(.light) .skillseq-hero-card-name { color: var(--text-primary); }
body:not(.light) .skillseq-hero-card-slot-name { color: var(--text-secondary); }
body:not(.light) .skillseq-hero-card-seq-label { color: rgba(52,211,153,0.7); }

/* 预测结果 */
body:not(.light) .skillseq-prediction-pos { color: #38bdf8; }
body:not(.light) .skillseq-prediction-empty { color: var(--text-secondary); }
body:not(.light) .skillseq-prediction-prob { color: var(--text-secondary); }
body:not(.light) .skillseq-hero-card-no-prediction { color: var(--text-secondary); }

/* 弹窗 */
body:not(.light) .skillseq-modal-header { border-bottom-color: var(--border); }
body:not(.light) .skillseq-modal-close { color: var(--text-secondary); }

/* 配置页（旧） */
body:not(.light) .skillseq-config-title { color: #818cf8; }
body:not(.light) .skillseq-config-desc { color: var(--text-secondary); }
body:not(.light) .skillseq-config-coming-soon { color: var(--text-secondary); }
body:not(.light) .skillseq-config-section { border-color: var(--border); }
body:not(.light) .skillseq-config-section-title { color: #818cf8; }
body:not(.light) .skillseq-config-record { border-bottom-color: var(--border); }
body:not(.light) .skillseq-config-record-name { color: var(--text-primary); }
body:not(.light) .skillseq-config-record-seq { color: var(--text-secondary); }

/* 教程（新增）：展开帮助 / 区块 / 演示 */
body:not(.light) .skillseq-tut-expand-btn { color: #34d399; }
body:not(.light) .skillseq-tut-expand-btn:hover { color: #34d399; }
body:not(.light) .skillseq-tut-help-list { color: var(--text-secondary); }
body:not(.light) .skillseq-tut-green { border-color: rgba(52,211,153,0.25); background: rgba(16,185,129,0.08); }
body:not(.light) .skillseq-tut-amber { border-color: rgba(251,191,36,0.25); background: rgba(245,158,11,0.08); }
body:not(.light) .skillseq-tut-green-title { color: #34d399; }
body:not(.light) .skillseq-tut-amber-title { color: #fbbf24; }
body:not(.light) .skillseq-tut-green-step-title { color: #34d399; }
body:not(.light) .skillseq-tut-step { border-color: rgba(52,211,153,0.25); }
body:not(.light) .skillseq-tut-step-desc { color: var(--text-primary); }
body:not(.light) .skillseq-tut-demo-desc { color: var(--text-secondary); }
body:not(.light) .skillseq-tut-green-label { color: #34d399; }
body:not(.light) .skillseq-tut-rose-label { color: #fb7185; }
body:not(.light) .skillseq-tut-demo-note { color: #34d399; background: rgba(16,185,129,0.12); border-color: rgba(52,211,153,0.4); }
body:not(.light) .skillseq-tut-demo-card { border-color: rgba(52,211,153,0.25); }
body:not(.light) .skillseq-tut-demo-rose-card { border-color: rgba(251,113,133,0.25); }
body:not(.light) .skillseq-tut-amber-card { border-color: rgba(251,191,36,0.25); }
body:not(.light) .skillseq-tut-demo-class-name { color: var(--text-primary); }
body:not(.light) .skillseq-tut-green-status { color: #34d399; }
body:not(.light) .skillseq-tut-rose-status { color: #fb7185; }
body:not(.light) .skillseq-tut-demo-seq-item { border-color: var(--border); }
body:not(.light) .skillseq-tut-demo-seq-num { color: var(--text-secondary); }
body:not(.light) .skillseq-tut-demo-current { color: var(--text-primary); }
body:not(.light) .skillseq-tut-demo-current-label { color: var(--text-secondary); }
body:not(.light) .skillseq-tut-demo-fixed-seq { border-color: rgba(251,113,133,0.25); background: rgba(244,63,94,0.08); }
body:not(.light) .skillseq-tut-demo-fixed-label { color: #fb7185; }
body:not(.light) .skillseq-tut-demo-fixed-item { border-color: rgba(251,113,133,0.25); }
body:not(.light) .skillseq-tut-demo-fixed-item.current { background: rgba(244,63,94,0.15); border-color: #fb7185; }
body:not(.light) .skillseq-tut-demo-fixed-num { color: var(--text-secondary); }
body:not(.light) .skillseq-tut-compare-label { color: var(--text-primary); }
body:not(.light) .skillseq-tut-compare-owned-label { color: var(--text-secondary); }
body:not(.light) .skillseq-tut-owned-badge { border-color: rgba(251,191,36,0.3); }

/* 配置页（序列记录） */
body:not(.light) .skillseq-skill-empty { color: var(--text-secondary); }
body:not(.light) .skillseq-config-panel { border-color: var(--border); }
body:not(.light) .skillseq-config-legend { color: var(--text-primary); }
body:not(.light) .skillseq-config-btn-reset { background: #374151; color: #d1d5db; }
body:not(.light) .skillseq-config-btn-reset:hover { background: #4b5563; }
body:not(.light) .skillseq-config-notice { background: linear-gradient(to right, rgba(16,185,129,0.1), rgba(20,184,166,0.1)); }
body:not(.light) .skillseq-config-notice-title { color: #34d399; }
body:not(.light) .skillseq-config-notice-desc { color: #6ee7b7; }
body:not(.light) .skillseq-config-table-title { color: var(--text-primary); }
body:not(.light) .skillseq-config-th { color: var(--text-primary); border-bottom-color: var(--border); }
body:not(.light) .skillseq-config-td { border-bottom-color: var(--border); }

/* 快速入门：3步卡片宽度占满（已在基础CSS中设置align-items: stretch和width: 100%） */

/* 未选中分页按钮浅灰色背景（已在基础CSS中设置） */

/* 选择英雄职业弹窗宽度和网格已在基础CSS中设置（与英雄体系搭配平台一致） */

/* 快速入门3步卡片宽度占满已在基础CSS中设置 */

/* 未选中分页按钮浅灰色背景已在基础CSS中设置 */

/* 选择英雄职业弹窗网格已在基础CSS中设置 */

/* ===== 精萃解锁路线 ===== */
.spiritpath-container { padding: 0; }

/* 路线图外层容器 - 横向滚动 */
.spiritpath-route-wrapper {
    width: 100%;
    overflow: auto;
    background: rgba(255,255,255,0.95);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #dbeafe;
    padding: 16px;
    box-sizing: border-box;
}

/* 路线图固定尺寸容器 */
.spiritpath-route {
    position: relative;
    margin: 0 auto;
    transform-origin: center top;
}

/* SVG连接线层 */
.spiritpath-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* 卡片层 */
.spiritpath-cards {
    position: relative;
    z-index: 2;
}

/* 单个卡片容器 */
.spiritpath-card {
    position: absolute;
}

/* 卡片内部 */
.spiritpath-card-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #cffafe 0%, #ffffff 50%, #dbeafe 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 2px solid #a5b4fc;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s;
}
.spiritpath-card-inner:hover {
    box-shadow: 0 0 0 2px #818cf8, 0 4px 12px rgba(0,0,0,0.15);
}

/* 特殊/活动精萃卡片样式 */
.spiritpath-card-special .spiritpath-card-inner {
    background: linear-gradient(135deg, #fef3c7 0%, #ffffff 50%, #fce7f3 100%);
    border-color: #fbbf24;
}

/* 卡片头部 */
.spiritpath-card-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 等级徽章 */
.spiritpath-level-badge {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}
.spiritpath-level-badge img {
    width: 24px;
    height: 24px;
}
.spiritpath-level-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}

/* 精萃名称 */
.spiritpath-card-name {
    font-size: 14px;
    font-weight: bold;
    color: #1f2937;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 精萃图片 */
.spiritpath-card-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.spiritpath-card-img img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* BP消耗 */
.spiritpath-card-bp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: auto;
}
.spiritpath-card-bp img {
    width: 20px;
    height: 20px;
}
.spiritpath-card-bp span {
    font-size: 14px;
    font-weight: bold;
    color: #374151;
}

/* ===== 精萃技能弹窗 ===== */
.spiritpath-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0,0,0,0.5);
}
.spiritpath-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    border: 1px solid #e0e7ff;
    max-width: 380px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 弹窗头部 */
.spiritpath-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f3f4f6;
}
.spiritpath-modal-title-area {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.spiritpath-modal-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.spiritpath-modal-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.spiritpath-modal-title-text {
    min-width: 0;
}
.spiritpath-modal-spirit-name {
    font-size: 14px;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spiritpath-modal-skill-name {
    font-size: 16px;
    font-weight: bold;
    color: #3730a3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.spiritpath-modal-close {
    flex-shrink: 0;
    background: #ef4444;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.spiritpath-modal-close:hover { background: #dc2626; }

/* 弹窗内容 */
.spiritpath-modal-body {
    padding: 12px;
    overflow-y: auto;
}
.spiritpath-skill-section { margin-bottom: 12px; }
.spiritpath-skill-section:last-child { margin-bottom: 0; }
.spiritpath-skill-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #4f46e5;
    margin-bottom: 4px;
}
.spiritpath-skill-list {
    list-style: disc;
    list-style-position: inside;
    font-size: 14px;
    color: #374151;
}
.spiritpath-skill-list li { margin-bottom: 2px; }

/* ===== 暗色主题适配 ===== */
body:not(.light) .spiritpath-route-wrapper {
    background: rgba(30,30,40,0.95);
    border-color: #374151;
}
body:not(.light) .spiritpath-card-inner {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e3a5f 100%);
    border-color: #6366f1;
}
body:not(.light) .spiritpath-card-special .spiritpath-card-inner {
    background: linear-gradient(135deg, #422006 0%, #334155 50%, #581c87 100%);
    border-color: #f59e0b;
}
body:not(.light) .spiritpath-card-name { color: #e5e7eb; }
body:not(.light) .spiritpath-card-bp span { color: #d1d5db; }
body:not(.light) .spiritpath-modal {
    background: #1f2937;
    border-color: #374151;
}
body:not(.light) .spiritpath-modal-header { border-color: #374151; }
body:not(.light) .spiritpath-modal-icon { background: #374151; }
body:not(.light) .spiritpath-modal-spirit-name { color: #9ca3af; }
body:not(.light) .spiritpath-modal-skill-name { color: #a5b4fc; }
body:not(.light) .spiritpath-skill-list { color: #e5e7eb; }

/* ===== 响应式 - 竖屏 ===== */
@media (max-width: 768px) {
    .spiritpath-route-wrapper { padding: 8px; border-radius: 12px; }
    .spiritpath-route { transform: scale(0.38); transform-origin: top left; }
    .spiritpath-route-wrapper { height: calc(1380px * 0.38 + 16px); }
}
/* ===== 响应式 - 横屏 ===== */
@media (min-width: 769px) {
    .spiritpath-route { transform: scale(1); }
}

/* ===== 装备统计弹窗 ===== */
/* 装备统计弹窗始终使用浅色主题（参考 cq-zys.cn/hero-lineup 截图） */
.equip-stats-modal {
    width: min(96vw, 1100px);
    max-height: calc(100vh - 80px);
    background: #ffffff !important;
    border: 1px solid #e5e7eb;
}

.equip-stats-topbar {
    grid-template-columns: 1fr auto;
    padding: 10px 24px;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
}

.equip-stats-title {
    font-size: 20px;
    color: #4338ca;
    text-align: left;
    justify-self: start;
}

.equip-stats-body {
    padding: 12px 16px 16px;
    overflow-y: auto;
    background: #ffffff;
}

.equip-stats-empty {
    text-align: center;
    color: #888;
    padding: 60px 20px;
    font-size: 14px;
}

/* 装备统计网格：参考截图4列布局 */
.equip-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 1100px) {
    .equip-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
    .equip-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .equip-stats-grid { grid-template-columns: 1fr; }
}

/* 单个装备卡片：参考截图样式 */
.equip-stats-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px 10px 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 70px;
}

/* 装备图标区域：包含阶级徽章、类型图标、装备大图 */
.equip-stats-icon-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: url('图标/背景/装备背景.png') center/contain no-repeat;
}

/* 阶级徽章（左上，深色圆角小标签） */
.equip-stats-tier-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #2a1a3e;
    color: #fff;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    line-height: 1;
}

/* 类型小图标（右上） */
.equip-stats-type-icon {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: #2a1a3e;
    border-radius: 4px;
    padding: 1px;
    z-index: 3;
}

/* 元素/精萃类型文字标签（右上，替代类型图标） */
.equip-stats-type-label {
    position: absolute;
    top: -2px;
    right: -2px;
    height: 18px;
    padding: 0 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    line-height: 1;
    letter-spacing: 0.5px;
}

/* 元素附魔卡片：蓝色主题 */
.equip-stats-card-element {
    border-color: #93c5fd;
    background: #f0f7ff;
}
.equip-stats-card-element .equip-stats-type-label {
    background: #2563eb;
}
.equip-stats-card-element .equip-stats-icon-wrap {
    background: url('图标/背景/装备背景.png') center/contain no-repeat;
}

/* 精萃附魔卡片：紫色主题 */
.equip-stats-card-essence {
    border-color: #c4b5fd;
    background: #f8f4ff;
}
.equip-stats-card-essence .equip-stats-type-label {
    background: #7c3aed;
}
.equip-stats-card-essence .equip-stats-icon-wrap {
    background: url('图标/背景/装备背景.png') center/contain no-repeat;
}

/* 有品质的卡片：边框柔光提示（颜色由品质特效drop-shadow体现） */
.equip-stats-card-rare {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.08);
}

/* 装备大图 */
.equip-stats-icon-img {
    position: absolute;
    inset: 6%;
    width: 88%;
    height: 88%;
    object-fit: contain;
    z-index: 3;
}

/* 品质特效（复刻配装模拟弹窗装备栏 sim-slot-glow / sim-slot-light） */
.equip-stats-fx-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
.equip-stats-fx-light {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: equip-stats-spin 16s linear 0s infinite normal none running;
}
.equip-stats-fx-light-reverse {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    animation: equip-stats-spin 16s linear 0s infinite reverse none running;
}
@keyframes equip-stats-spin {
    100% { transform: rotate(360deg); }
}

/* 装备名称 + 数量统计（右侧） */
.equip-stats-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equip-stats-name {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* 需要：X */
.equip-stats-need {
    font-size: 12px;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.equip-stats-need-label { color: #666; }

/* 已有：[输入框] */
.equip-stats-owned {
    font-size: 12px;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.equip-stats-owned-label { color: #666; }

.equip-stats-owned-input {
    width: 60px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #ffffff;
    color: #1a1a2e;
    font-size: 12px;
    outline: none;
    text-align: center;
}

.equip-stats-owned-input:focus {
    border-color: #6366f1;
}

/* ===== 导出图片预览弹窗（复刻线上平台） ===== */
.export-preview-modal {
    width: min(96vw, 1000px);
    max-height: calc(100vh - 80px);
    margin: 8px auto;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.export-preview-topbar {
    grid-template-columns: 1fr auto;
    padding: 10px 24px;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.export-preview-title {
    font-size: 16px;
    color: #4338ca;
    text-align: left;
    justify-self: start;
}

/* 导出预览弹窗：顶部按钮适当缩小 */
#exportPreviewModal .btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

.export-preview-body {
    flex: 1;
    overflow: auto;
    padding: 16px;
    background: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.export-preview-body img {
    max-width: 100%;
    max-height: calc(100vh - 200px);
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 导出图片预览弹窗：始终置于所有弹窗之上（heroSimModal 在 DOM 中位于其后，同 z-index 会被盖住） */
#exportPreviewModal {
    z-index: 2100;
}

/* ===== 冒险模拟详情弹窗：导出图片按钮（复刻线上，关闭按钮左侧） ===== */
.quest-modal-export-img-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    white-space: nowrap;
    transition: all 0.2s;
}

.quest-modal-export-img-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ===== 账号体系：导航栏用户区 + 登录弹窗 ===== */
.nav-user-area {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-login-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-login-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.nav-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(99, 102, 241, 0.12);
    border-radius: 8px;
    padding: 5px 12px;
}

.nav-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    white-space: nowrap;
}

.nav-user-role {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    white-space: nowrap;
}

.nav-logout-btn {
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    background: transparent;
    color: #ef4444;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-logout-btn:hover {
    background: rgba(239, 68, 68, 0.12);
}

.login-tip {
    line-height: 1.5;
}

/* ===== 登录/注册弹窗：最上层 + 标题居中 ===== */
#loginModal,
#registerModal {
    z-index: 9999;
}

#loginModal .modal-title,
#registerModal .modal-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.modal-switch-link {
    font-size: 13px;
    color: #6366f1;
    cursor: pointer;
    margin-left: auto;
    user-select: none;
}

.modal-switch-link:hover {
    text-decoration: underline;
}

/* 注册按钮（登录按钮旁，略浅色） */
.nav-register-btn {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
}

/* 登录/注册弹窗：切换链接在左、按钮在右 */
.modal-footer-split {
    justify-content: space-between;
    align-items: center;
}

.modal-footer-split .modal-switch-link {
    margin-left: 0;
}

.modal-footer-btns {
    display: flex;
    gap: 12px;
}

/* 密码输入框：右侧眼睛切换显示/隐藏 */
.password-field {
    position: relative;
}

.password-field .form-input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #9ca3af);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.password-toggle:hover {
    color: var(--text-primary, #4b5563);
    background: rgba(0, 0, 0, 0.05);
}

.password-toggle svg {
    width: 18px;
    height: 18px;
}

/* 竖屏尝试卡片：3 列两行 + 字体增大 */
@media (max-width: 768px) {
    .qsd-attempt-card .qsd-stat-label {
        font-size: 11px;
    }

    .qsd-attempt-card .qsd-stat-value {
        font-size: 13px;
    }
}

/* ===== 奇异墓穴词条模拟 ===== */
.muxue-divider { height:1px; background:rgba(128,128,128,.35); margin:18px 0 12px; }

/* 体系卡片区与下方勇士阵容保持间距（对齐英雄体系搭配平台的 .tab-content margin-bottom:24px） */
#muxueBuildSection { margin-bottom: 24px; }

/* 奇异墓穴批量模拟任务卡片：复用 .quest-task-card 结构，但改为满宽显示
   （.quest-task-card 原为英雄平台一行 4 张卡的布局：width:calc((100% - 36px)/4); height:300px） */
#muxueTaskCard {
    width: 100%;
    height: auto;
    cursor: default;
}
/* 整卡不可拖动（仅支持把成员拖入），故不用 grab/grabbing 光标 */
#muxueTaskCard:active { cursor: default; }
/* 横屏：顶部行 = 头像信息 | 阵容(中间居中) | 右侧屏障/删除
   用 grid 三列等宽布局，让中间阵容在整行中绝对居中，不受左右内容宽度影响 */
#muxueTaskCard .quest-task-top.muxue-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
#muxueTaskCard .quest-task-info { justify-self: start; }
#muxueTaskCard .quest-task-heroes.muxue-heroes-inline {
    justify-self: center;
    min-width: 0;
    align-items: center;       /* 内容（英雄/添加按钮）在 63.2px 容器内垂直居中 */
}
/* 顶部行空状态：去掉添加按钮下方的占位名称行，避免 + 按钮被顶到上方 */
#muxueTaskCard .muxue-heroes-inline .quest-task-add-hero-wrap .quest-task-hero-name { display: none; }
#muxueTaskCard .quest-task-right { justify-self: end; }
/* 底部行：左侧提示 + 右侧一键模拟 */
#muxueTaskCard .quest-task-test-row { margin-top: 12px; justify-content: space-between; align-items: center; }
#muxueTaskCard .muxue-sim-btn { min-width: 280px; }
/* 条件不满足时的"视觉禁用"态：灰显 + 禁用光标，但仍可点击以触发 toast 提示 */
#muxueTaskCard .muxue-sim-btn.muxue-sim-disabled,
#muxueTaskCard .muxue-sim-btn.muxue-sim-disabled:hover {
    background: #9ca3af;
    cursor: not-allowed;
    opacity: .85;
}
#muxueTaskCard .quest-task-test-actions { display: flex; align-items: center; gap: 10px; }
/* 提交排行榜按钮：蓝色强调；置灰态与一键模拟一致但保留点击以触发提示 */
#muxueTaskCard .quest-task-test.muxue-rank-btn { min-width: 130px; background: linear-gradient(180deg,#2563eb,#1d4ed8); border: 1px solid #1e40af; color: #fff; }
#muxueTaskCard .quest-task-test.muxue-rank-btn:hover { filter: brightness(1.08); }
#muxueTaskCard .quest-task-test.muxue-rank-btn.muxue-sim-disabled,
#muxueTaskCard .quest-task-test.muxue-rank-btn.muxue-sim-disabled:hover { background: #475569; border-color: #475569; opacity: .6; cursor: not-allowed; filter: none; }
/* 已提交：绿色背景白字，长文本可换行；仍可点击以提示「不可重复提交」 */
#muxueTaskCard .quest-task-test.muxue-rank-btn.muxue-rank-done {
    background: #16a34a; border-color: #16a34a; color: #fff;
    min-width: auto; white-space: normal; cursor: pointer;
}
#muxueTaskCard .quest-task-test.muxue-rank-btn.muxue-rank-done:hover { background: #15803d; border-color: #15803d; filter: none; }
.muxue-sim-tip { font-size: 13px; opacity: .75; }
.muxue-sim-tip-warn { color: #e0533d; opacity: 1; font-weight: 600; }
/* 竖屏：顶部行改为纵向堆叠，阵容独占一行并左右居中（不再靠左） */
@media (max-width: 768px) {
    #muxueTaskCard .quest-task-top.muxue-top {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 12px;
    }
    #muxueTaskCard .quest-task-info,
    #muxueTaskCard .quest-task-heroes.muxue-heroes-inline,
    #muxueTaskCard .quest-task-right {
        justify-self: center;
    }
    #muxueTaskCard .quest-task-right {
        flex-wrap: wrap;
        justify-content: center;
    }
    #muxueTaskCard .quest-task-test-row {
        margin-top: 8px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    #muxueTaskCard .quest-task-test-actions { flex-direction: column; align-items: stretch; }
    #muxueTaskCard .muxue-sim-btn { min-width: 0; width: 100%; }
    .muxue-sim-tip { text-align: center; }
}

/* 未登录门禁提示（位于原体系管理位置） */
.muxue-login-gate {
    display:flex; align-items:center; justify-content:center; gap:14px;
    padding:28px 20px; margin:8px 0 18px;
    background:rgba(139,92,246,.08); border:1px dashed rgba(139,92,246,.45);
    border-radius:12px; color:#cdbdf7; font-size:15px;
}
.muxue-login-gate button {
    padding:6px 18px; border:none; border-radius:8px; cursor:pointer;
    background:linear-gradient(135deg,#34d399,#10b981); color:#fff; font-size:14px; font-weight:600;
}
.muxue-login-gate button:hover { filter:brightness(1.06); }
.muxue-sim-loading { display:flex; align-items:center; gap:10px; padding:24px; opacity:.85; font-size:14px; }
.muxue-spinner { width:18px; height:18px; border:2px solid rgba(128,128,128,.4); border-top-color:#5b8cff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.muxue-sim-intro { padding:18px; font-size:13px; line-height:1.6; background:rgba(128,128,128,.06); border-radius:8px; }
.muxue-combo-table { display:flex; flex-direction:column; gap:6px; }
.muxue-combo-row { display:grid; grid-template-columns:90px minmax(0,auto) 1fr 90px; grid-template-areas:'rate entries survival detail'; align-items:center; gap:10px; min-height:64px; padding:12px 12px; background:rgba(128,128,128,.06); border-radius:8px; font-size:13px; }
.muxue-col-rate { grid-area:rate; display:flex; align-items:center; gap:4px; font-weight:700; color:#e0533d; }
.muxue-rate-face { width:18px; height:18px; flex:0 0 18px; object-fit:contain; }
.muxue-col-entries { grid-area:entries; display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-width:0; }
.muxue-col-survival { grid-area:survival; display:flex; flex-wrap:nowrap; gap:8px; align-items:center; overflow-x:auto; overflow-y:hidden; min-width:0; padding:5px 0 0 5px; }
.muxue-col-detail { grid-area:detail; }
@media (max-width: 768px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
    .muxue-combo-row { grid-template-columns:1fr auto; grid-template-areas:'rate detail' 'entries entries' 'survival survival'; gap:10px; min-height:auto; padding:12px; }
    .muxue-col-rate { text-align:left; }
    .muxue-col-detail button { width:auto; min-width:80px; padding:6px 14px; white-space:nowrap; }
    .muxue-col-survival { flex-wrap:wrap; overflow-x:hidden; }
    .muxue-hero-mini { width:calc(50% - 4px); box-sizing:border-box; flex-shrink:0; }
}
.muxue-hero-mini { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.muxue-hero-mini-avatar { position:relative; width:38px; height:38px; flex:0 0 38px; }
.muxue-hero-mini-avatar > img:first-child { width:38px; height:38px; border-radius:6px; object-fit:cover; }
.muxue-hero-mini-elem { position:absolute; top:0; left:0; transform:translate(-30%,-30%); width:16px; height:16px; border-radius:50%; object-fit:cover; }
.muxue-hero-mini-info { display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.muxue-hero-mini-name { font-size:12px; color:var(--text-primary); white-space:nowrap; max-width:90px; overflow:hidden; text-overflow:ellipsis; }
.muxue-hero-mini-surv { display:flex; align-items:center; gap:3px; }
.muxue-hero-mini-face { width:15px; height:15px; flex:0 0 15px; }
.muxue-hero-mini-rate { font-size:12px; font-weight:700; color:#e0a53d; }
.muxue-col-detail button { width:100%; padding:5px 0; border:none; border-radius:6px; background:#5b8cff; color:#fff; cursor:pointer; font-size:12px; }
.muxue-pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; font-size:13px; }
.muxue-pager button { padding:5px 14px; border:1px solid rgba(128,128,128,.4); border-radius:6px; background:transparent; cursor:pointer; }
.muxue-pager button:disabled { opacity:.4; cursor:not-allowed; }
.muxue-barrier-select { border:1px solid rgba(128,128,128,.4); border-radius:6px; padding:3px 6px; font-size:12px; background:inherit; color:inherit; }
.muxue-entry-confirm-btn { padding:4px 14px; border:none; border-radius:6px; background:#34d399; color:#04211a; font-weight:700; cursor:pointer; font-size:13px; margin-right:8px; }