/* 任务分栏：胶囊（与 inv-filter-tab 同族，无实心金渐变） */
.task-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
    overflow-x: auto;
    scrollbar-width: none;
}

.task-tabs::-webkit-scrollbar {
    display: none;
}

.task-tab {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 0 var(--space-12);
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--font-label);
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        color 0.14s ease,
        border-color 0.14s ease,
        background 0.14s ease;
}

.task-tab:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color));
    color: var(--accent-gold);
    background: transparent;
}

.task-tab.active {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* #6379：修仙成就分组折叠 */
.task-ach-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.task-ach-group__head {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    min-height: var(--pattern-touch-target, 44px);
    padding: var(--space-6) var(--space-8);
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--bg-card) 92%, var(--accent-jade) 8%);
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}
.task-ach-group__head:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 45%, var(--border-color));
    color: var(--text-primary);
}
.task-ach-group__chev {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent currentColor;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.task-ach-group.is-expanded .task-ach-group__chev {
    transform: rotate(90deg);
}
.task-ach-group__title {
    flex: 1;
    min-width: 0;
}
.task-ach-group__count {
    flex-shrink: 0;
}
.task-ach-group__body {
    display: none;
    flex-direction: column;
    gap: var(--space-8);
}
.task-ach-group.is-expanded .task-ach-group__body {
    display: flex;
}

.task-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-body);
    padding: var(--space-20) 0;
}

.task-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-10) var(--space-12);
    transition: border-color 0.2s;
}

.task-card:hover {
    border-color: var(--accent-jade);
}

.task-card.task-completed {
    border-color: var(--accent-gold);
    background: color-mix(in srgb, var(--craft-gold-bright) 8%, transparent);
}

.task-card.task-claimed {
    opacity: 0.5;
}

.task-card.task-tutorial {
    border-left: 3px solid var(--accent-gold);
    background: color-mix(in srgb, var(--craft-gold-bright) 6%, transparent);
}

.task-type-tag {
    font-size: var(--font-micro);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xs);
    margin-right: var(--space-6);
    font-weight: 600;
    flex-shrink: 0;
}

.task-type-tutorial {
    background: var(--accent-gold);
    color: var(--bg-primary);
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.task-name {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-color);
}

.task-desc {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}

.task-progress-bar {
    height: 4px;
    background: var(--glass-white-1);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.task-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-jade), var(--accent-gold));
    border-radius: var(--radius-xs);
    transition: width 0.3s;
}

.task-footer {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-caption);
}

.task-progress-text {
    color: var(--text-muted);
}

.btn-task-claim {
    padding: var(--space-2) var(--space-10);
    font-size: var(--font-caption);
    background: linear-gradient(135deg, var(--accent-gold), color-mix(in srgb, var(--accent-gold) 85%, #fff));
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
}

.btn-task-claim:hover {
    filter: brightness(1.1);
}

/* 神庭任务红点。必须落在按钮内部：顶栏「更多」条目 overflow:hidden，负定位会被裁成半点。 */
.court-task-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    width: 8px;
    height: 8px;
    background: var(--accent-crimson, var(--danger-color));
    border-radius: 50%;
    animation: court-badge-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* #10331：灵渊/仙界「天策司」签上的同源红点 */
.guardian-tab {
    position: relative;
}
.guardian-tab .court-task-badge {
    top: 1px;
    right: 4px;
}

#courtBtn {
    position: relative;
}

/* #6572：太初锚点生效时的玉色状态点（非未读红点） */
.court-anchor-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    width: 8px;
    height: 8px;
    background: var(--accent-jade);
    border-radius: 50%;
    pointer-events: none;
}

@keyframes court-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

/* 新手引导按钮脉冲 */
.tutorial-pulse {
    animation: tutorial-btn-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px color-mix(in srgb, var(--craft-gold-bright) 60%, transparent);
}

@keyframes tutorial-btn-pulse {
    0%, 100% { box-shadow: 0 0 4px color-mix(in srgb, var(--craft-gold-bright) 30%, transparent); }
    50% { box-shadow: 0 0 16px color-mix(in srgb, var(--craft-gold-bright) 80%, transparent); }
}

/* 新手入道：常驻主操作区上沿，保证完成任务和领取下一步之间不断线。
   wrap 只给桌面横排：手机底栏已是纵向，再 wrap 会把收起条/横幅/按钮挤乱。 */
@media (min-width: 888px) {
    .action-bar:has(.novice-tutorial-banner:not(.hidden)) {
        flex-wrap: wrap;
    }
}

/* 情境引导复用入道横幅时允许正文换行（#5954 展示修正） */
.novice-tutorial-banner--feature .novice-tutorial-desc {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.novice-tutorial-banner--feature .novice-tutorial-progress {
    opacity: 0.45;
}

.novice-tutorial-banner {
    position: relative;
    /* #6805：勿用 flex-basis:100%。手机底栏是纵向，100% 会按父级高度把框拉满、盖住冥想。 */
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-self: flex-start;
    display: grid;
    /* 左标 · 中文案 · 右操作；进度条独占底行 */
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: auto 3px;
    grid-template-areas:
        "marker copy action"
        "progress progress progress";
    align-items: center;
    gap: var(--space-4) var(--space-10);
    padding: var(--space-8) var(--space-10) var(--space-6);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 50%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-panel));
    box-sizing: border-box;
    overflow: hidden;
}

.novice-tutorial-marker {
    grid-area: marker;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--accent-gold);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 58%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 11%, transparent);
    font-family: var(--font-serif);
    font-weight: 700;
    animation: novice-guide-marker-pulse 2.4s ease-in-out infinite;
}

.novice-tutorial-copy { grid-area: copy; min-width: 0; }
.novice-tutorial-kicker {
    color: var(--accent-gold);
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: .08em;
}
.novice-tutorial-title {
    margin-top: var(--space-2);
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--font-body-lg);
    font-weight: 700;
}
.novice-tutorial-desc {
    margin-top: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-caption);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.novice-tutorial-action {
    grid-area: action;
    align-self: center;
    justify-self: end;
    min-height: 34px;
    padding: 0 var(--space-14);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 66%, var(--border-color));
    border-radius: var(--radius-md);
    color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel));
    font-family: var(--font-serif);
    font-size: var(--font-label);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    writing-mode: horizontal-tb;
}
.novice-tutorial-action.is-claimable {
    color: var(--bg-panel);
    background: var(--accent-gold);
}
.novice-tutorial-action:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}
.novice-tutorial-progress {
    grid-area: progress;
    height: 3px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-gold) 14%, var(--border-color));
    overflow: hidden;
}
.novice-tutorial-progress > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-gold);
    transition: width .25s ease;
}

@keyframes novice-guide-marker-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-gold) 0%, transparent); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-gold) 13%, transparent); }
}

@media (max-width: 600px) {
    /* 单行：引 + 步骤/标题 + 去完成；说明藏掉，进度贴底，避免把冥想顶出屏 */
    .novice-tutorial-banner {
        grid-template-columns: 26px minmax(0, 1fr) auto;
        grid-template-rows: auto;
        grid-template-areas: "marker copy action";
        gap: var(--space-4) var(--space-8);
        padding: var(--space-6) var(--space-8);
    }
    .novice-tutorial-copy {
        display: flex;
        align-items: baseline;
        gap: var(--space-6);
        min-width: 0;
    }
    .novice-tutorial-marker { width: 26px; height: 26px; font-size: var(--font-label); }
    .novice-tutorial-kicker {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--font-micro);
    }
    .novice-tutorial-title {
        margin-top: 0;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--font-label);
    }
    .novice-tutorial-desc { display: none; }
    .novice-tutorial-progress {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 0;
    }
    .novice-tutorial-action {
        min-height: var(--pattern-touch-target);
        padding: 0 var(--space-10);
        font-size: var(--font-micro);
        white-space: nowrap;
        writing-mode: horizontal-tb;
    }
    .novice-tutorial-banner--feature .novice-tutorial-copy { flex-wrap: wrap; }
    .novice-tutorial-banner--feature .novice-tutorial-desc {
        display: -webkit-box;
        flex: 1 1 100%;
        margin-top: 0;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .novice-tutorial-marker,
    .tutorial-pulse { animation: none !important; }
    .novice-tutorial-progress > span { transition: none; }
}

/* ===== 许愿槽系统 · A 工坊笺 ===== */
.wish-slot-bar {
    margin-top: 0;
    cursor: pointer;
    padding: var(--space-10) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.wish-slot-bar:hover,
.wish-slot-bar:focus-visible {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-card));
    box-shadow: none;
    outline: none;
}
.wish-slot-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-10);
    font-size: var(--font-label);
    font-weight: 600;
    margin-bottom: var(--space-8);
    min-width: 0;
}
.wish-slot-header .wish-title {
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
    min-width: 0;
    color: var(--text-primary);
    letter-spacing: 0;
    font-weight: 600;
    overflow: hidden;
}
.wish-title__kicker {
    flex: 0 0 auto;
    color: var(--text-gold, var(--accent-gold));
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.8px;
}
.wish-slot-header .wish-title #wishTargetName {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wish-slot-header .wish-pct {
    flex: 0 0 auto;
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-gold, var(--accent-gold));
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}
.wish-progress-bg {
    width: 100%;
    height: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: none;
    box-sizing: border-box;
}
.wish-progress-fill {
    width: 0%;
    height: 100%;
    background: color-mix(in srgb, var(--accent-gold) 62%, transparent);
    transition: width 0.3s ease;
    box-shadow: none;
    border-radius: var(--radius-pill);
}

/* ═══ 许愿目标选择弹窗 · 对齐全局 gc-dialog 壳 ═══
   craft-gc-head 默认 padding:0（现网炼造弹窗靠外层 craft-modal-chrome 补 var(--space-14)），
   许愿弹窗无 chrome 包裹层，用 .wish-gc-head 补齐标题区左上间距，与内容区左对齐。 */
/* 桌面宽度由 game-dialog.css 登记档（wish-modal → wide 720）统一提供；
   此处只保留布局语义。 */
.wish-modal {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: hidden;
}
.wish-modal .wish-gc-head { padding: var(--space-20) var(--space-48) var(--space-4) var(--space-20) !important; }
.wish-modal .gc-title { letter-spacing: .02em; }
.wish-modal .gc-mid.wish-select-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    max-height: none;
    padding: var(--space-10) var(--space-20) var(--space-8);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* B · 清单直达：说明 + 当前愿牒 + 配方×品质二维表 */
.wish-select-intro {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: var(--font-body);
    line-height: 1.65;
    text-align: left;
    text-wrap: wrap;
}

.wish-status {
    flex: 0 0 auto;
    margin-top: var(--space-10);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 156px;
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-12) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 24%, var(--border-color));
    background: var(--craft-modal-raised, var(--bg-card-hover));
    background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel));
}
.wish-status__main { min-width: 0; text-align: left; }
.wish-status__eyebrow {
    margin-bottom: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-micro);
    letter-spacing: 1.2px;
}
.wish-status__line {
    display: flex;
    align-items: baseline;
    gap: var(--space-8);
    min-width: 0;
}
.wish-status__line b {
    min-width: 0;
    overflow: hidden;
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-action);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wish-status__line span {
    flex: 0 0 auto;
    color: var(--text-red, var(--accent-crimson));
    font-size: var(--font-caption);
    font-weight: 700;
}
.wish-status__tip {
    margin-top: var(--space-4);
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.4;
}
.wish-status__progress { min-width: 0; }
.wish-status__progress-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    color: var(--text-muted);
    font-size: var(--font-micro);
}
.wish-status__progress-head strong {
    color: var(--text-gold);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-body-lg);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.wish-status__track {
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--bg-active);
}
.wish-status__track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-gold);
    transition: width .2s ease;
}

.wish-select-table {
    min-height: 0;
    margin-top: var(--space-10);
    overflow: hidden;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--craft-modal-raised, var(--bg-card-hover));
}
.wish-select-head {
    flex: 0 0 34px;
    padding: 0 var(--space-12);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    align-items: center;
    gap: var(--space-14);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--craft-modal-bg, var(--bg-panel));
    font-size: var(--font-micro);
    letter-spacing: 1.2px;
}
.wish-select-head span:last-child { text-align: center; }
.wish-select-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.wish-empty-state {
    padding: var(--space-32) var(--space-12);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-body);
    line-height: 1.65;
}
.wish-row {
    min-height: 72px;
    padding: var(--space-10) var(--space-12);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    align-items: center;
    gap: var(--space-14);
    background: var(--craft-modal-bg, var(--bg-panel));
    transition: background .12s ease;
}
.wish-row + .wish-row { border-top: 1px solid var(--border-color); }
.wish-row:hover { background: var(--bg-card-hover); }
.wish-row.is-active {
    background: var(--gradient-gold, rgba(183, 120, 31, .08));
    background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel));
}
.wish-row__info { min-width: 0; text-align: left; }
.wish-row__head {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}
.wish-row__name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--font-action);
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wish-row__lock {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-6);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 34%, transparent);
    border-radius: var(--radius-pill);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 1.4;
}
.wish-row__meta {
    margin-top: var(--space-4);
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wish-row__grades {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

/* 品质 chip：点 chip 直达设为许愿 */
.wish-grade {
    min-width: 0;
    height: 36px;
    padding: 0 var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--craft-modal-panel, var(--bg-card));
    color: var(--wish-grade-color, var(--text-secondary));
    font-family: inherit;
    font-size: var(--font-caption);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.wish-grade:hover {
    border-color: color-mix(in srgb, var(--wish-grade-color) 45%, var(--border-color));
    background: color-mix(in srgb, var(--wish-grade-color) 6%, var(--bg-card));
}
.wish-grade.is-on {
    border-color: color-mix(in srgb, var(--wish-grade-color) 54%, var(--border-color));
    background: color-mix(in srgb, var(--wish-grade-color) 10%, var(--bg-card));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wish-grade-color) 7%, transparent);
}
.wish-grade:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--wish-grade-color) 65%, transparent);
    outline-offset: 2px;
}

.wish-modal .gc-foot {
    flex: 0 0 auto;
    margin-top: 0;
    padding: var(--space-10) var(--space-20) var(--space-14);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-14);
}
.wish-modal .gc-foot .wish-clear-btn {
    flex: 0 0 auto;
    min-width: 118px;
    min-height: 42px;
    border-radius: var(--radius-md);
    font-weight: 700;
}
.wish-foot-note {
    flex: 1 1 auto;
    max-width: 390px;
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.55;
    text-align: right;
    text-wrap: wrap;
}
.wish-foot-note strong {
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 600;
}

/* 宽度随 .wish-modal 同走登记档（wide 720 / 手机 392） */

@media (max-width: 560px) {
    .wish-modal {
        max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px));
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md);
    }
    body.game-page #wishSelectOverlay .modal-content.wish-modal {
        width: min(440px, calc(100vw - 12px)) !important;
        max-width: 440px !important;
        height: auto !important;
        max-height: calc(100vh - 16px - env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100dvh - 16px - env(safe-area-inset-bottom, 0px)) !important;
        border-radius: var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md) !important;
    }
    body.game-page #wishSelectOverlay {
        align-items: flex-end;
        padding: var(--space-8) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    }
    .wish-modal .wish-gc-head { padding: var(--space-16) var(--space-48) var(--space-2) var(--space-14) !important; }
    .wish-modal .gc-mid.wish-select-body { padding: var(--space-10) var(--space-14) var(--space-8); }
    .wish-select-intro {
        font-size: var(--font-label);
        line-height: 1.55;
    }
    .wish-status {
        margin-top: var(--space-8);
        padding: var(--space-10) var(--space-10);
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .wish-status__tip { display: none; }
    .wish-status__progress-head { margin-bottom: var(--space-6); }
    .wish-select-table { margin-top: var(--space-8); }
    .wish-select-head { display: none; }
    .wish-row {
        min-height: 96px;
        padding: var(--space-10) var(--space-10) var(--space-10);
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .wish-row__name { font-size: var(--font-body-lg); }
    .wish-row__meta { font-size: var(--font-micro); }
    .wish-row__grades {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-6);
    }
    .wish-grade {
        min-height: 44px;
        height: 44px;
        font-size: var(--font-label);
    }
    .wish-modal .gc-foot {
        padding: var(--space-8) var(--space-14) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
        flex-direction: column-reverse;
        align-items: stretch;
        gap: var(--space-8);
        border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    }
    .wish-modal .gc-foot .wish-clear-btn {
        width: 100%;
        min-height: 44px;
    }
    .wish-foot-note {
        max-width: none;
        font-size: var(--font-micro);
        text-align: center;
    }
}

@media (max-height: 690px) and (max-width: 560px) {
    .wish-select-intro { display: none; }
    .wish-modal .gc-mid.wish-select-body { padding-top: var(--space-8); }
    .wish-status { margin-top: 0; }
}

.wish-select-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-height: 0;
}

.wish-clear-btn {
    height: 34px;
    padding: 0 var(--space-12);
    font-size: var(--font-label);
}

.wish-select-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(58vh, 560px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-right: var(--space-4);
}

.wish-empty-state {
    padding: var(--space-32) var(--space-12);
    text-align: center;
    line-height: 1.7;
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
}

.wish-empty-state span {
    font-size: var(--font-label);
}

@media (max-width: 640px) {

    .wish-clear-btn {
        width: 100%;
    }
}

/* ===== 公告弹窗 · A 天诏笺 =====
 * 短金条头 + 版本印 + 要旨 + 章签锚点 + 通读分段 + 粘底扁平钮
 * 无左轨 / 无通栏装饰顶条；主钮走 modal-btn--gold（非实心渐变）
 */
/* 公告弹窗 · 已收敛到标准 gc-dialog 壳（modal-overlay + modal-content gc-dialog gold）。
   此处只保留公告业务专属细节（章签 / 章节列表 / 版本徽章 / 入场动画），
   壳层（遮罩 / 圆角 / 边框 / 背景 / 阴影 / 关闭叉 / 标题）全部由 game-dialog.css 的 gc-dialog 规则提供。 */
.modal-overlay.announce-overlay {
    /* 仅保留入场动画；遮罩位置/背景由 .modal-overlay 提供 */
    animation: announceFadeIn 0.22s ease;
}
.modal-overlay.announce-overlay.hidden { display: none; }

@keyframes announceFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 公告主体：入场动画（壳层宽高由 .gc-dialog 几何契约提供） */
.gc-dialog.announce-modal {
    max-height: var(--pattern-dialog-max-height);
    animation: announceSlideIn 0.24s ease;
}
/* #10936/#10960：版本 tagline 动辄数十字，标题只保留两行（全文由正文要旨承载），
   头部 flex-shrink:0，不钳制时会把正文滚动区挤成窄条且头部自身无法滚动 */
.announce-modal .gc-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@keyframes announceSlideIn {
    from { transform: translateY(-12px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* gc-head 由 game-dialog.css 全局接管；announce-head 仅作业务标识，不补样式。
   gc-title 样式也由 game-dialog.css 的 .gc-dialog .gc-title 全局规则统一。 */

.announce-ver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
}
.announce-seal {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-gold, color-mix(in srgb, var(--accent-gold) 40%, transparent));
    background: var(--gradient-gold, color-mix(in srgb, var(--accent-gold) 12%, transparent));
    color: var(--text-gold, var(--accent-gold));
    font-size: var(--font-caption);
    font-weight: 600;
    letter-spacing: 0.4px;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.announce-badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--accent-jade, var(--text-jade)) 40%, transparent);
    background: var(--gradient-jade, color-mix(in srgb, var(--accent-jade, var(--text-jade)) 12%, transparent));
    color: var(--text-jade, var(--accent-jade));
    font-size: var(--font-caption);
}
/* 公告关闭 × 由 game-dialog.css 的 .modal-header-close 全局规则统一（top:12px right:12px）。
   announce-close 仅作业务 hook，不补样式。 */

.announce-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4) var(--space-16) var(--space-10);
    font-size: var(--font-body);
    line-height: 1.7;
    color: var(--text-primary, var(--text-color));
    scrollbar-width: thin;
}
.announce-body::-webkit-scrollbar { width: 4px; }
.announce-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-radius: var(--radius-xs);
}

.announce-lead {
    margin: var(--space-4) 0 var(--space-12);
    padding: var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-gold, var(--accent-gold)) 45%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    font-size: var(--font-body);
    line-height: 1.7;
    color: var(--text-secondary, var(--text-muted));
    text-wrap: wrap;
}
.announce-lead b,
.announce-lead-label {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}

.announce-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    margin: 0 0 var(--space-12);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.announce-chips::-webkit-scrollbar { display: none; }
.announce-chip {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 var(--space-10);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-caption);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}
.announce-chip.is-on,
.announce-chip:hover {
    border-color: var(--border-gold, var(--accent-gold));
    color: var(--text-gold, var(--accent-gold));
    background: var(--gradient-gold, color-mix(in srgb, var(--accent-gold) 12%, transparent));
}

.announce-sec {
    margin: 0 0 var(--space-14);
    scroll-margin-top: var(--space-8);
}
.announce-sec-h {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
}
.announce-sec-stamp {
    flex-shrink: 0;
    height: 20px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-gold, color-mix(in srgb, var(--accent-gold) 40%, transparent));
    color: var(--text-gold, var(--accent-gold));
    font-size: var(--font-caption);
    font-weight: 600;
    letter-spacing: 1px;
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}
.announce-sec-title {
    font-family: var(--font-display, var(--font-serif, serif));
    font-size: var(--font-body-lg);
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-primary, var(--text-color));
}
.announce-sec ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.announce-sec li {
    position: relative;
    padding: var(--space-6) 0 var(--space-6) var(--space-12);
    font-size: var(--font-label);
    line-height: 1.65;
    color: var(--text-secondary, var(--text-muted));
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.announce-sec li:last-child { border-bottom: none; }
.announce-sec li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-gold) 55%, transparent);
}

/* 兼容旧 HTML 内容回退（若仍注入 raw content） */
.announce-body > h3 {
    font-family: var(--font-display, var(--font-serif, serif));
    font-size: var(--font-body-lg);
    color: var(--text-primary, var(--text-color));
    margin: var(--space-12) 0 var(--space-8);
    text-align: left;
    letter-spacing: 1px;
}
.announce-body > p { margin: var(--space-6) 0; color: var(--text-secondary, var(--text-muted)); }
.announce-body > ul { padding-left: 0; list-style: none; margin: var(--space-8) 0; }
.announce-body > ul > li {
    position: relative;
    padding: var(--space-6) 0 var(--space-6) var(--space-12);
    color: var(--text-secondary, var(--text-muted));
    font-size: var(--font-label);
    line-height: 1.65;
}
.announce-body > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-gold) 55%, transparent);
}

.announce-foot {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-10);
    margin: 0;
    padding: var(--space-12) var(--space-16) var(--space-16);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}
.announce-foot .modal-btn,
.announce-foot .announce-confirm,
.announce-foot .announce-changelog-btn {
    flex: 1;
}
/* 若 modal-btn 未加载，保证底钮仍有基线外观 */
.announce-foot .announce-confirm:not(.modal-btn),
.announce-foot .announce-changelog-btn:not(.modal-btn) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-14);
    border-radius: var(--radius-md);
    font-size: var(--font-body);
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.announce-foot .announce-confirm:not(.modal-btn) {
    background: var(--gradient-gold, color-mix(in srgb, var(--accent-gold) 12%, transparent));
    border: 1px solid var(--border-gold, var(--accent-gold));
    color: var(--text-gold, var(--accent-gold));
}
.announce-foot .announce-changelog-btn:not(.modal-btn) {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary, var(--text-muted));
}

/* ===== 试炼塔 · 坊市同壳 workbench ===== */
#trialTowerPanel.trial-workbench {
    --trial-sticky-sub-top: 0px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 0 !important;
    margin: 0;
    background: var(--bg-panel) !important;
    background-image: none !important;
    overflow: hidden !important;
}
#trialTowerPanel.trial-workbench .trial-workbench__header {
    flex: none;
    background: var(--bg-panel);
}
#trialTowerPanel.trial-workbench .trial-workbench__chrome {
    flex: none;
    background: var(--bg-panel);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
#trialTowerPanel.trial-workbench .trial-workbench__tabs.inventory-filter-tabs {
    flex: none;
    margin: 0 !important;
    padding: 0 var(--space-12) var(--space-8) !important;
    gap: var(--space-6);
}
/* Tab：透明底；选中仅描边+金字，无填充底 */
#trialTowerPanel.trial-workbench .inv-filter-tab {
    background: transparent !important;
}
#trialTowerPanel.trial-workbench .inv-filter-tab.active,
#trialTowerPanel.trial-workbench .inv-filter-tab.active:hover {
    background: transparent !important;
    color: var(--text-gold) !important;
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent) !important;
}
#trialTowerPanel.trial-workbench .trial-workbench__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--space-8) var(--space-12) var(--space-12);
    -webkit-overflow-scrolling: touch;
}
/* 子模块内容区占满 body 滚动容器 */
#trialTowerPanel.trial-workbench #trialTowerContent,
#trialTowerPanel.trial-workbench #elementalTowerContent,
#trialTowerPanel.trial-workbench #ghostTowerContent,
#trialTowerPanel.trial-workbench #arenaContent,
#trialTowerPanel.trial-workbench #fairDuelContent {
    min-height: 0;
}

/* ===== 传功/试炼等：.market-tabs 胶囊（与 inv-filter-tab 同族） ===== */
.market-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.market-tabs::-webkit-scrollbar {
    display: none;
}

.market-tab {
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    padding: 0 var(--space-12);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-label);
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.market-tab:hover {
    background: transparent;
    color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color));
}

.market-tab:active {
    transform: none;
}

.market-tab.active {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    font-weight: 600;
}

.market-filter {
    margin-bottom: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

#marketFilter {
    gap: var(--space-6);
}

#auctionBrowseFilter {
    gap: var(--space-6);
}

.market-filter-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6);
    align-items: stretch;
}

#marketFilter .market-sort-inline {
    height: 32px;
    padding: 0 var(--space-4);
    font-size: var(--font-caption);
}

.auction-filter-search-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.market-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: stretch;
}

.market-filter-grid.is-collapsed {
    display: none;
}

.market-filter-grid--advanced {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── 坊市工作台壳（对齐储物 inventory-workbench） ── */
#marketPanel.market-workbench,
#auctionPanel.auction-workbench,
#shopPanel.shop-workbench {
    position: relative;
}

.lv-scroll-top {
    position: absolute;
    right: var(--space-12);
    bottom: var(--space-16);
    z-index: 8;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 38%, var(--border-color));
    background: var(--bg-card);
    color: var(--text-gold);
    font-size: var(--font-label);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--text-primary) 8%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease;
}
.lv-scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}
.lv-scroll-top:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
}

#marketPanel.market-workbench {
    --mkt-line: color-mix(in srgb, var(--border-color) 82%, transparent);
    --mkt-line-strong: color-mix(in srgb, var(--accent-gold) 38%, var(--border-color));
    --mkt-raised: var(--bg-card);
    --mkt-surface: var(--bg-panel);
    --mkt-accent: var(--accent-gold);
    --mkt-radius: var(--radius-md);
    --mkt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* 与储物 inv-filter-tab 共用 token，避免两套 tab 色差 */
    --inv-wb-line: var(--mkt-line);
    --inv-wb-accent: var(--mkt-accent);
    --inv-wb-radius: var(--mkt-radius);
    --inv-wb-ease: var(--mkt-ease);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 0 !important;
    margin: 0;
    background-color: var(--mkt-surface) !important;
    background-image: none !important;
    overflow: hidden !important;
}

#marketPanel.market-workbench .market-workbench__header {
    flex: none;
    background: var(--mkt-surface);
}

.market-workbench__balance {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-8);
    border: 1px solid color-mix(in srgb, var(--mkt-accent, var(--accent-gold)) 28%, var(--border-color));
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--mkt-accent, var(--accent-gold)) 7%, transparent);
    color: var(--mkt-accent, var(--accent-gold));
    font-size: var(--font-caption);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, ui-monospace, monospace);
    flex: none;
    align-self: center;
    animation: marketBalBreath 3.6s var(--mkt-ease, ease) infinite;
}

.market-workbench__balance.hidden {
    display: none;
}

.market-workbench__balance-label {
    font-style: normal;
    font-weight: 500;
    font-family: var(--font-serif);
    opacity: 0.75;
    margin-right: var(--space-2);
}

.market-workbench__balance-value {
    font-weight: 700;
    font-style: normal;
}

@keyframes marketBalBreath {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 10%, transparent); }
}

.market-workbench__header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    flex: none;
    margin-left: auto;
}

#marketPanel.market-workbench .market-tool-btn,
#marketPanel.market-workbench .btn-panel-close {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    border: 1px solid var(--mkt-line);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-caption);
    font-weight: 600;
    font-family: var(--font-serif);
    cursor: pointer;
    transition: border-color 140ms var(--mkt-ease), color 140ms var(--mkt-ease), background 140ms var(--mkt-ease), transform 120ms var(--mkt-ease);
}

#marketPanel.market-workbench .market-tool-btn {
    padding: 0 var(--space-10);
}

#marketPanel.market-workbench .btn-panel-close {
    width: 30px;
    min-width: 30px;
    padding: 0;
    margin-left: 0;
    font-size: var(--font-action);
    font-weight: 400;
}

#marketPanel.market-workbench .market-tool-btn:hover,
#marketPanel.market-workbench .btn-panel-close:hover {
    border-color: var(--mkt-line-strong);
    color: var(--mkt-accent);
}

#marketPanel.market-workbench .market-tool-btn:active,
#marketPanel.market-workbench .btn-panel-close:active {
    transform: translateY(1px);
}

.market-workbench__chrome {
    flex: none;
    background: var(--mkt-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--mkt-line) 70%, transparent);
}

/* Tab：坊市已改用 inv-filter-tab，样式见 game-inventory.css 与储物共用 */

.market-workbench__toolbar {
    display: grid;
    /* #9661：搜索 / 排序 / 筛选 / 储物 四列，储物按钮不换行 */
    grid-template-columns: minmax(0, 1fr) minmax(56px, 68px) auto auto;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-12) var(--space-8);
}

#marketPanel .market-search-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 32px;
    padding: 0 var(--space-10);
    border: 1px solid var(--mkt-line);
    border-radius: var(--radius-md);
    background: var(--mkt-raised);
    transition: border-color 160ms var(--mkt-ease), box-shadow 160ms var(--mkt-ease);
}

#marketPanel .market-search-wrap:focus-within {
    border-color: color-mix(in srgb, var(--mkt-accent) 42%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mkt-accent) 10%, transparent);
}

#marketPanel .market-search-icon {
    flex: none;
    display: inline-flex;
    margin-right: var(--space-6);
    color: var(--text-muted);
    transition: color 0.15s;
}

#marketPanel .market-search-wrap:focus-within .market-search-icon {
    color: var(--mkt-accent);
}

#marketPanel .market-search-input {
    flex: 1;
    min-width: 0;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--font-label);
    outline: none;
    padding: 0;
}

#marketPanel .market-search-input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
}

@media (max-width: 640px) {
    #marketPanel .market-search-input {
        font-size: var(--font-title);
    }
}

#marketPanel.market-workbench .market-sort-inline {
    height: 32px;
    border: 1px solid var(--mkt-line);
    border-radius: var(--radius-md);
    background: var(--mkt-raised);
    color: var(--text-secondary);
    font-size: var(--font-caption);
    padding: 0 var(--space-6);
}

#marketPanel .market-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    height: 32px;
    min-height: 32px;
    padding: 0 var(--space-10);
    border: 1px solid var(--mkt-line);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-weight: 600;
    font-family: var(--font-serif);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 140ms var(--mkt-ease), color 140ms var(--mkt-ease), background 140ms var(--mkt-ease);
}

#marketPanel .market-filter-toggle__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
    transition: background 0.15s, transform 0.2s var(--mkt-ease);
}

#marketPanel .market-filter-toggle.is-open {
    border-color: color-mix(in srgb, var(--mkt-accent) 42%, transparent);
    color: var(--mkt-accent);
    background: color-mix(in srgb, var(--mkt-accent) 10%, transparent);
}

#marketPanel .market-filter-toggle.has-active {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    color: var(--text-jade);
    background: color-mix(in srgb, var(--accent-jade) 9%, transparent);
}

#marketPanel .market-filter-toggle.has-active .market-filter-toggle__dot {
    background: var(--accent-jade);
    transform: scale(1.15);
}

#marketPanel.market-workbench #marketFilter {
    margin: 0;
    gap: 0;
}

#marketPanel.market-workbench #marketFilterGrid,
#marketPanel.market-workbench #buyReqFilterGrid {
    margin: 0 var(--space-12) var(--space-8);
    gap: var(--space-6);
}

#marketPanel.market-workbench #marketFilterGrid.is-collapsed,
#marketPanel.market-workbench #buyReqFilterGrid.is-collapsed {
    display: none;
}

#marketPanel.market-workbench #marketFilter select,
#marketPanel.market-workbench #marketFilter .market-multi-select-header,
#marketPanel.market-workbench #marketBuyReqFilter select,
#marketPanel.market-workbench #marketBuyReqFilter .market-multi-select-header {
    height: 30px;
    border-radius: var(--radius-md);
    border-color: var(--mkt-line);
    background: var(--mkt-raised);
    font-size: var(--font-caption);
}

/* ── 求购 tab chrome（与市场同壳） ── */
#marketPanel.market-workbench .market-buyreq-chrome {
    margin: 0;
    gap: 0;
}

#marketPanel.market-workbench .market-buyreq-chrome.hidden,
#marketPanel.market-workbench .market-buyreq-chrome[hidden] {
    display: none !important;
}

#marketPanel.market-workbench .market-buyreq-scope-tabs {
    margin: 0;
    padding: var(--space-8) var(--space-12) var(--space-6);
}

#marketPanel.market-workbench .market-workbench__toolbar--buyreq {
    grid-template-columns: minmax(0, 1fr) minmax(56px, 68px) auto auto;
}

#marketPanel.market-workbench .market-buyreq-chrome.is-mine-scope .market-search-wrap,
#marketPanel.market-workbench .market-buyreq-chrome.is-mine-scope .market-sort-inline,
#marketPanel.market-workbench .market-buyreq-chrome.is-mine-scope .market-filter-toggle,
#marketPanel.market-workbench .market-buyreq-chrome.is-mine-scope .market-filter-grid,
#marketPanel.market-workbench .market-buyreq-chrome.is-mine-scope .market-buyreq-hint {
    display: none !important;
}

#marketPanel.market-workbench .market-buyreq-chrome.is-mine-scope .market-workbench__toolbar--buyreq {
    grid-template-columns: auto;
    justify-content: end;
}

#marketPanel .market-buyreq-post-btn {
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    padding: 0 var(--space-12);
    border: 1px solid color-mix(in srgb, var(--mkt-accent, var(--accent-gold)) 42%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--mkt-accent, var(--accent-gold)) 10%, transparent);
    color: var(--text-gold);
    font-size: var(--font-label);
    font-weight: 600;
    font-family: var(--font-serif);
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 140ms var(--mkt-ease, ease), background 140ms var(--mkt-ease, ease), color 140ms var(--mkt-ease, ease), transform 120ms ease;
}

#marketPanel .market-buyreq-post-btn:hover {
    border-color: color-mix(in srgb, var(--mkt-accent, var(--accent-gold)) 55%, transparent);
    background: color-mix(in srgb, var(--mkt-accent, var(--accent-gold)) 16%, transparent);
}

#marketPanel .market-buyreq-post-btn:active {
    transform: translateY(1px);
}

#marketPanel .market-buyreq-hint {
    margin: 0;
    padding: 0 var(--space-12) var(--space-8);
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* ── 拍卖工作台壳（对齐坊市 market-workbench / 储物） ── */
#auctionPanel.auction-workbench {
    --auc-line: color-mix(in srgb, var(--border-color) 82%, transparent);
    --auc-line-strong: color-mix(in srgb, var(--accent-gold) 38%, var(--border-color));
    --auc-raised: var(--bg-card);
    --auc-surface: var(--bg-panel);
    --auc-accent: var(--accent-gold);
    --auc-radius: var(--radius-md);
    --auc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --inv-wb-line: var(--auc-line);
    --inv-wb-accent: var(--auc-accent);
    --inv-wb-radius: var(--auc-radius);
    --inv-wb-ease: var(--auc-ease);
    --mkt-accent: var(--auc-accent);
    --mkt-ease: var(--auc-ease);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 0 !important;
    margin: 0;
    background-color: var(--auc-surface) !important;
    background-image: none !important;
    overflow: hidden !important;
}

#auctionPanel.auction-workbench .auction-workbench__header {
    flex: none;
    background: var(--auc-surface);
}

.auction-workbench__balance {
    /* 复用 .market-workbench__balance 视觉；此处只补对齐 */
    align-self: center;
}

.auction-workbench__header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    flex: none;
    margin-left: auto;
}

#auctionPanel.auction-workbench .auction-tool-btn,
#auctionPanel.auction-workbench .btn-panel-close {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    border: 1px solid var(--auc-line);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-caption);
    font-weight: 600;
    font-family: var(--font-serif);
    cursor: pointer;
    transition: border-color 140ms var(--auc-ease), color 140ms var(--auc-ease), background 140ms var(--auc-ease);
}

#auctionPanel.auction-workbench .auction-tool-btn {
    padding: 0 var(--space-10);
}

#auctionPanel.auction-workbench #auctionBulkAcceptBtn {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--auc-accent) 42%, var(--border-color));
}

#auctionPanel.auction-workbench #auctionBulkAcceptBtn:disabled {
    cursor: wait;
    opacity: 0.65;
}

#auctionPanel.auction-workbench .btn-panel-close {
    width: 30px;
    min-width: 30px;
    padding: 0;
    margin-left: 0;
    font-size: var(--font-action);
    font-weight: 400;
}

#auctionPanel.auction-workbench .auction-tool-btn:hover {
    border-color: var(--auc-line-strong);
    color: var(--auc-accent);
}

#auctionPanel.auction-workbench .btn-panel-close:hover {
    color: var(--accent-crimson);
    border-color: color-mix(in srgb, var(--accent-crimson) 36%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 7%, transparent);
}

.auction-workbench__chrome {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: 0 0 var(--space-10);
    background: var(--auc-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--auc-line) 70%, transparent);
}

/* Tab 视觉见 game-inventory.css 与储物/坊市共用的 inv-filter-tab 规则 */

.auction-filter {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: 0 var(--space-12);
    min-width: 0;
}

.auction-filter.hidden {
    display: none !important;
}

#auctionPanel .auction-search-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 34px;
    padding: 0 var(--space-10);
    border: 1px solid var(--auc-line);
    border-radius: var(--radius-md);
    background: var(--auc-raised);
    transition: border-color 160ms var(--auc-ease), box-shadow 160ms var(--auc-ease);
}

#auctionPanel .auction-search-wrap:focus-within {
    border-color: color-mix(in srgb, var(--auc-accent) 42%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--auc-accent) 10%, transparent);
}

#auctionBrowseFilter .auction-filter-search-row .auction-refresh-btn {
    min-width: 54px;
    height: 34px;
    padding: 0 var(--space-10);
    border: 1px solid var(--auc-line);
    border-radius: var(--radius-md);
    background: var(--auc-raised);
    color: var(--text-secondary);
    font-family: var(--font-serif);
    font-size: var(--font-caption);
    cursor: pointer;
    transition: border-color 160ms var(--auc-ease), color 160ms var(--auc-ease), background 160ms var(--auc-ease);
}

#auctionBrowseFilter .auction-filter-search-row .auction-refresh-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--auc-accent) 42%, var(--border-color));
    color: var(--auc-accent);
}

#auctionBrowseFilter .auction-filter-search-row .auction-refresh-btn:disabled {
    cursor: wait;
    opacity: 0.62;
}

#auctionPanel .auction-search-icon {
    flex: none;
    display: inline-flex;
    margin-right: var(--space-6);
    color: var(--text-muted);
}

#auctionPanel .auction-search-wrap:focus-within .auction-search-icon {
    color: var(--auc-accent);
}

#auctionPanel .auction-search-input {
    flex: 1;
    min-width: 0;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--font-label);
    outline: none;
    padding: 0;
}

#auctionPanel .auction-search-input::placeholder {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
}

.auction-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.auction-filter-grid--history {
    grid-template-columns: 1fr 1fr 1fr;
}

#auctionPanel.auction-workbench .auction-filter-grid select,
#auctionPanel.auction-workbench .auction-filter-grid .fx-select,
#auctionHistoryFilter .auction-filter-grid select,
#auctionHistoryFilter .auction-filter-grid .fx-select {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
}
#auctionPanel.auction-workbench .auction-filter-grid select,
#auctionHistoryFilter .auction-filter-grid select {
    height: 30px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--auc-line);
    background: var(--auc-raised);
    color: var(--text-secondary);
    font-size: var(--font-caption);
    font-family: var(--font-serif);
}
/* FixedSelect 升级后：按钮撑满格子，否则缩成内容宽、像点不动/选不了 */
#auctionPanel.auction-workbench .auction-filter-grid .fx-select__btn,
#auctionHistoryFilter .auction-filter-grid .fx-select__btn {
    width: 100%;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    padding: 0 var(--space-10);
    border: 1px solid var(--auc-line, var(--border-color));
    border-radius: var(--radius-md);
    background: var(--auc-raised, var(--bg-card));
    color: var(--text-secondary);
    font-size: var(--font-caption);
    font-family: var(--font-serif);
    box-sizing: border-box;
}

#auctionPanel .auction-history-hint {
    margin: 0;
    padding: 0 var(--space-2);
    font-size: var(--font-caption);
    line-height: 1.4;
    color: var(--text-muted);
}

#auctionPanel .auction-history-summary {
    margin: 0 0 var(--space-8);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--auc-line) 80%, transparent);
    background: color-mix(in srgb, var(--auc-raised) 88%, transparent);
    font-size: var(--font-label);
    line-height: 1.45;
    color: var(--text-secondary);
    font-family: var(--font-serif);
}

#auctionPanel .auction-history-summary b {
    color: var(--accent-gold, var(--text-gold));
    font-weight: 600;
}

/* #5539：渐进列表「还有 N 件」 */
#auctionPanel .auction-list-more {
    display: flex;
    justify-content: center;
    padding: var(--space-10) var(--space-4) var(--space-14);
}
#auctionPanel .auction-list-more__btn {
    min-width: 60%;
    min-height: 36px;
}

.auction-subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding: 0 var(--space-12);
}

.auction-subtabs.hidden {
    display: none !important;
}

.auction-subtab {
    height: 30px;
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    font-weight: 600;
    font-family: var(--font-serif);
    border: 1px solid var(--auc-line);
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition: border-color 120ms, color 120ms, background 120ms;
}

.auction-subtab.active {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.auction-personal-outcome {
    grid-column: 1 / -1;
    height: 30px;
    min-height: 30px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--auc-line);
    background: var(--auc-raised);
    color: var(--text-secondary);
    font-size: var(--font-caption);
    font-family: var(--font-serif);
}

.auction-personal-outcome.hidden {
    display: none !important;
}

.auction-workbench__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#auctionPanel.auction-workbench .auction-list {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-10) var(--space-12) var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

#auctionPanel.auction-workbench .auction-list.hidden {
    display: none !important;
}

/* ── 商铺工作台壳（对齐坊市 / 拍卖 workbench） ── */
#shopPanel.shop-workbench {
    --shop-line: color-mix(in srgb, var(--border-color) 82%, transparent);
    --shop-line-strong: color-mix(in srgb, var(--accent-gold) 38%, var(--border-color));
    --shop-raised: var(--bg-card);
    --shop-surface: var(--bg-panel);
    --shop-accent: var(--accent-gold);
    --shop-radius: var(--radius-md);
    --shop-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --inv-wb-line: var(--shop-line);
    --inv-wb-accent: var(--shop-accent);
    --inv-wb-radius: var(--shop-radius);
    --inv-wb-ease: var(--shop-ease);
    --mkt-accent: var(--shop-accent);
    --mkt-ease: var(--shop-ease);
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding: 0 !important;
    margin: 0;
    background-color: var(--shop-surface) !important;
    background-image: none !important;
    overflow: hidden !important;
}

#shopPanel.shop-workbench .shop-workbench__header {
    flex: none;
    background: var(--shop-surface);
}

/* 商铺购买数量 · 对齐坊市 trade 笺（gc-dialog + ml-stepper） */
.shop-buy-dialog.gc-dialog,
.modal-content.modal--decorated.gc-dialog.shop-buy-dialog {
    max-width: min(392px, 94vw);
}

.shop-buy-mid.gc-mid,
.shop-buy-dialog .shop-buy-mid {
    text-align: left;
}

.shop-buy-desc {
    margin-top: var(--space-6);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-buy-facts {
    margin-top: var(--space-12);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-10);
}

.shop-buy-fact {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
}

.shop-buy-fact b {
    color: var(--text-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
}

.shop-buy-fact b.is-jade {
    color: var(--text-jade);
}

.shop-buy-quick {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.shop-buy-note {
    margin-top: var(--space-10);
    text-align: left;
}

/* 黑市购入冻结提醒：警示色小字条，置于单价事实行与数量步进器之间 */
.shop-buy-cooldown {
    margin-top: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border: 1px solid color-mix(in srgb, var(--text-warn) 32%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--text-warn) 8%, transparent);
    color: var(--text-warn);
    font-size: var(--font-caption);
    line-height: 1.45;
    text-align: left;
}

.ml-summary__v--jade {
    color: var(--text-jade) !important;
}

/* .shop-workbench__balance 复用 .market-workbench__balance 视觉 */
.shop-workbench__balance.is-token {
    border-color: color-mix(in srgb, var(--accent-purple) 36%, var(--border-color));
    background: color-mix(in srgb, var(--accent-purple) 10%, transparent);
    color: var(--accent-purple);
    animation: none;
}

.shop-workbench__header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    flex: none;
    margin-left: auto;
}

#shopPanel.shop-workbench .btn-panel-close {
    box-sizing: border-box;
    height: 30px;
    min-height: 30px;
    width: 30px;
    min-width: 30px;
    padding: 0;
    margin-left: 0;
    border: 1px solid var(--shop-line);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-action);
    font-weight: 400;
    cursor: pointer;
    transition: border-color 140ms var(--shop-ease), color 140ms var(--shop-ease), background 140ms var(--shop-ease);
}

#shopPanel.shop-workbench .btn-panel-close:hover {
    border-color: var(--shop-line-strong);
    color: var(--shop-accent);
}

.shop-workbench__chrome {
    flex: none;
    background: var(--shop-surface);
    border-bottom: 1px solid color-mix(in srgb, var(--shop-line) 70%, transparent);
    padding-bottom: var(--space-2);
}

.shop-workbench__chrome[hidden] {
    display: none !important;
}

/*
 * 商铺分柜 Tab：与坊市/拍卖/储物 workbench 完全同款（见 game-inventory.css inv-filter-tab）
 * 此处只补计数 chip，不另起一套布局/底色。
 */
#shopPanel.shop-workbench .shop-workbench__tabs .inv-filter-tab .shop-tab-count {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 var(--space-6);
    margin-left: var(--space-2);
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-muted);
}

#shopPanel.shop-workbench .shop-workbench__tabs .inv-filter-tab.active .shop-tab-count {
    background: color-mix(in srgb, var(--inv-wb-accent, var(--accent-gold)) 18%, transparent);
    color: var(--inv-wb-accent, var(--accent-gold));
}

.shop-workbench__toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 0 var(--space-12) var(--space-8);
}

.shop-search-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
}

.shop-search-icon {
    position: absolute;
    left: 10px;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    pointer-events: none;
    display: inline-flex;
}

.shop-search-wrap .shop-search-input {
    width: 100%;
    height: 34px;
    padding: 0 var(--space-32) 0 var(--space-32);
    border-radius: var(--radius-md);
    border: 1px solid var(--shop-line, var(--border-color));
    background: var(--bg-input, color-mix(in srgb, var(--text-primary) 4%, transparent));
    color: var(--text-primary);
    font-size: var(--font-label);
}

.shop-search-wrap .shop-search-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--shop-accent, var(--accent-gold)) 48%, transparent);
}

.shop-search-clear {
    position: absolute;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-body-lg);
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.shop-search-clear:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

#shopPanel.shop-workbench .shop-section-hint {
    margin: 0 var(--space-12) var(--space-8);
    padding: var(--space-8) var(--space-10);
    font-size: var(--font-caption);
    line-height: 1.55;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 22%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-card));
    text-wrap: wrap;
}

#shopPanel.shop-workbench .shop-section-hint b {
    color: var(--text-gold);
    font-weight: 600;
}

.shop-workbench__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--space-10) var(--space-12) var(--space-14);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#shopPanel.shop-workbench .shop-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: 0;
    flex: none;
    overflow: visible;
}

/* 紧凑货卡 */
#shopPanel.shop-workbench .shop-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--shop-radius, var(--radius-md));
    border: 1px solid var(--shop-line, var(--border-color));
    background: var(--shop-raised, var(--bg-card));
    transition: border-color 0.12s ease, background 0.12s ease;
}

#shopPanel.shop-workbench .shop-item:hover {
    border-color: color-mix(in srgb, var(--shop-accent, var(--accent-gold)) 34%, transparent);
    background: color-mix(in srgb, var(--shop-accent, var(--accent-gold)) 3%, var(--shop-raised, var(--bg-card)));
}

#shopPanel.shop-workbench .shop-item.locked {
    opacity: 0.72;
    background: color-mix(in srgb, var(--text-primary) 2%, var(--shop-raised, var(--bg-card)));
}

.shop-item__row1 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
}

.shop-item__name {
    min-width: 0;
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 价格单行：2400 灵石（不换行） */
.shop-item__price {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-4);
    white-space: nowrap;
    line-height: 1.2;
    text-align: right;
}

.shop-item__price-num {
    display: inline;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}

.shop-item__price-unit {
    display: inline;
    margin-top: 0;
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.shop-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    align-items: center;
}

.shop-chip {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    font-size: var(--font-micro);
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1;
    background: transparent;
}

.shop-chip--r1 {
    color: var(--rarity-1);
    border-color: color-mix(in srgb, var(--rarity-1) 32%, transparent);
    background: color-mix(in srgb, var(--rarity-1) 8%, transparent);
}

.shop-chip--r2 {
    color: var(--rarity-2);
    border-color: color-mix(in srgb, var(--rarity-2) 32%, transparent);
    background: color-mix(in srgb, var(--rarity-2) 8%, transparent);
}

.shop-chip--r3 {
    color: var(--rarity-3);
    border-color: color-mix(in srgb, var(--rarity-3) 35%, transparent);
    background: color-mix(in srgb, var(--rarity-3) 8%, transparent);
}

.shop-chip--r4 {
    color: var(--rarity-4);
    border-color: color-mix(in srgb, var(--rarity-4) 35%, transparent);
    background: color-mix(in srgb, var(--rarity-4) 8%, transparent);
}

.shop-chip--r5 {
    color: var(--rarity-5);
    border-color: color-mix(in srgb, var(--rarity-5) 35%, transparent);
    background: color-mix(in srgb, var(--rarity-5) 8%, transparent);
}

.shop-chip--hot {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.shop-chip--type {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.shop-chip--stage {
    color: var(--text-secondary);
}

.shop-chip--lock {
    color: var(--accent-crimson, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 30%, transparent);
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 7%, transparent);
}

.shop-chip--section {
    color: var(--text-muted);
}

.shop-item__desc {
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-item__desc .item-desc-effect {
    margin-top: 0;
    display: inline;
}

.shop-item__stats {
    font-size: var(--font-caption);
    color: var(--text-secondary);
    line-height: 1.4;
}

.shop-item__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-top: var(--space-2);
}

.shop-item__owned {
    font-size: var(--font-micro);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.shop-item__owned b {
    color: var(--text-jade);
    font-weight: 600;
}

.shop-item__btn {
    flex: none;
    height: 28px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    font-size: var(--font-caption);
    font-weight: 600;
    font-family: inherit;
    border: 1px solid color-mix(in srgb, var(--accent-jade) 42%, transparent);
    color: var(--text-jade);
    background: color-mix(in srgb, var(--accent-jade) 9%, transparent);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.shop-item__btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-jade) 15%, transparent);
}

.shop-item__btn--exchange {
    border-color: color-mix(in srgb, var(--accent-purple) 42%, transparent);
    color: var(--accent-purple);
    background: color-mix(in srgb, var(--accent-purple) 9%, transparent);
}

.shop-item__btn--exchange:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-purple) 15%, transparent);
}

.shop-item__btn:disabled,
.shop-item__btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: var(--border-color);
    color: var(--text-muted);
    background: transparent;
}

/* 空态 */
#shopPanel.shop-workbench .shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-40) var(--space-20) var(--space-32);
    text-align: center;
    gap: var(--space-8);
}

#shopPanel.shop-workbench .shop-empty__t {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-action);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}

#shopPanel.shop-workbench .shop-empty__s {
    max-width: 28ch;
    font-size: var(--font-label);
    line-height: 1.6;
    color: var(--text-muted);
}

#shopPanel.shop-workbench .shop-empty__cta {
    margin-top: var(--space-8);
    height: 36px;
    padding: 0 var(--space-20);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 45%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    color: var(--text-jade);
    font-size: var(--font-body);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

#shopPanel.shop-workbench .shop-empty__cta:hover {
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
}

/* 造化秘匣 · 货卡同族 */
#shopPanel.shop-workbench .mystery-box-section {
    margin-top: var(--space-4);
    padding: var(--space-12) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-card));
    border-top: 1px solid color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
}

#shopPanel.shop-workbench .mystery-box-divider {
    text-align: left;
    margin-bottom: var(--space-4);
}

#shopPanel.shop-workbench .mystery-box-divider::before,
#shopPanel.shop-workbench .mystery-box-divider::after {
    display: none;
}

#shopPanel.shop-workbench .mystery-box-divider span {
    font-size: var(--font-micro);
    letter-spacing: 0.14em;
    font-weight: 600;
    padding: 0;
}

#shopPanel.shop-workbench .mystery-box-info {
    text-align: left;
}

#shopPanel.shop-workbench .mystery-box-tier {
    justify-content: flex-start;
    gap: var(--space-10);
    padding: 0;
}

#shopPanel.shop-workbench .mystery-box-name {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-body-lg);
}

#shopPanel.shop-workbench .mystery-box-weights {
    margin: var(--space-6) 0 0;
}

#shopPanel.shop-workbench .mystery-box-weight-row {
    justify-content: flex-start;
}

#shopPanel.shop-workbench .btn-mystery-box {
    margin-top: var(--space-10);
    width: 100%;
    height: 34px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 11%, transparent);
    color: var(--text-gold);
    font-size: var(--font-label);
    font-weight: 600;
    box-shadow: none;
}

#shopPanel.shop-workbench .btn-mystery-box:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    #shopPanel.shop-workbench .shop-item,
    #shopPanel.shop-workbench .shop-item__btn {
        transition: none;
    }
}

/* 拍品卡 · 三行密度（对齐原型 B） */
.auction-lot {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--auc-radius, var(--radius-md));
    border: 1px solid var(--auc-line, var(--border-color));
    background: var(--auc-raised, var(--bg-card));
    text-align: left;
    width: 100%;
    color: inherit;
    cursor: pointer;
    transition: border-color 120ms var(--auc-ease, ease), background 120ms var(--auc-ease, ease);
}

.auction-lot:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-card));
}

/* 世界告示「前往拍卖行」定位高亮 */
.auction-lot.is-locate-focus {
    border-color: color-mix(in srgb, var(--accent-gold) 58%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, var(--bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 26%, transparent);
    animation: auction-locate-pulse 1.1s ease 2;
}

@keyframes auction-locate-pulse {
    0%, 100% {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 22%, transparent);
    }
    50% {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 18%, transparent);
    }
}

.auction-lot__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8) var(--space-10);
    align-items: start;
}

.auction-lot__main { min-width: 0; }

.auction-lot__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    min-width: 0;
}

.auction-lot__name {
    font-family: var(--font-serif);
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.25;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.auction-lot__refine {
    flex: none;
    color: var(--accent-orange, var(--text-gold));
    font-weight: 700;
    font-size: var(--font-caption);
    font-family: var(--font-mono, ui-monospace, monospace);
}

.auction-lot__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.auction-lot__chip {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 600;
    border: 1px solid var(--auc-line, var(--border-color));
    color: var(--text-muted);
    line-height: 1;
    white-space: nowrap;
}

.auction-lot__chip--rarity {
    color: var(--auction-rarity-color, var(--text-muted));
    border-color: color-mix(in srgb, var(--auction-rarity-color, var(--text-muted)) 35%, transparent);
    background: color-mix(in srgb, var(--auction-rarity-color, var(--text-muted)) 8%, transparent);
}

.auction-lot__chip--gold {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.auction-lot__chip--jade {
    color: var(--text-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 35%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}

.auction-lot__chip--ok {
    color: var(--text-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}

.auction-lot__chip--mute {
    color: var(--text-muted);
}

.auction-lot__chip--stage {
    color: var(--text-secondary);
}

.auction-lot__price-col {
    text-align: right;
    min-width: 64px;
    flex: none;
}

.auction-lot__price-lab {
    font-size: var(--font-micro);
    color: var(--text-muted);
    letter-spacing: 0.04em;
    line-height: 1.15;
}

.auction-lot__price {
    margin-top: var(--space-2);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    white-space: nowrap;
}

.auction-lot__meta {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: var(--space-2);
}

.auction-lot__meta .sep {
    margin: 0 var(--space-6);
    opacity: 0.45;
    user-select: none;
}

.auction-lot__meta .hi {
    color: var(--text-secondary);
    font-weight: 500;
}

.auction-lot__meta .auction-lot__note {
    color: var(--accent-orange, var(--text-gold));
}

.auction-lot__foot {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-2);
    min-height: 28px;
}

.auction-lot__cd {
    flex: 1;
    min-width: 0;
    font-size: var(--font-caption);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--text-gold);
}

.auction-lot__cd.is-urgent {
    color: var(--accent-crimson, var(--text-danger));
}

.auction-lot__cd.is-ended {
    color: var(--text-muted);
    font-weight: 500;
    font-family: var(--font-serif);
}

.auction-lot__acts {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
}

.auction-lot__btn {
    height: 28px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    font-size: var(--font-caption);
    font-weight: 700;
    font-family: var(--font-serif);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 48%, transparent);
    color: var(--text-jade);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.auction-lot__btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
}

.auction-lot__btn:disabled {
    opacity: 0.48;
    cursor: default;
    border-color: var(--auc-line, var(--border-color));
    color: var(--text-muted);
    background: transparent;
}

.auction-lot__btn--ghost {
    border-color: var(--auc-line, var(--border-color));
    color: var(--text-secondary);
    background: transparent;
    font-weight: 600;
}

.auction-lot__btn--ghost:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
}

/* 分区标题 · 对齐储物/市场列表层级 */
#marketPanel .market-section-head {
    margin: var(--space-4) 0 var(--space-8);
    padding: 0 var(--space-2);
}

#marketPanel .market-section-head:not(:first-child) {
    margin-top: var(--space-14);
    padding-top: var(--space-10);
    border-top: 1px solid color-mix(in srgb, var(--mkt-line, var(--border-color)) 70%, transparent);
}

#marketPanel .market-section-head__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

#marketPanel .market-section-head__title {
    font-size: var(--font-label);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-gold);
    font-family: var(--font-serif);
    min-width: 0;
    flex: 1 1 auto;
}

#marketPanel .market-section-head__count {
    font-size: var(--font-caption);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    flex: none;
}
#marketPanel .market-section-head__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
#marketPanel .market-section-head__actions button {
    min-height: 44px;
    min-width: 44px;
    padding: 0 var(--space-8);
}

#marketPanel .market-section-head__hint {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
}

#marketPanel .market-chip--qty {
    color: var(--text-secondary);
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    font-weight: 600;
}

#marketPanel .market-buyreq-note {
    color: var(--text-orange, var(--accent-orange));
    margin-top: var(--space-4);
}

#marketPanel .market-buyreq-escrow {
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}

#marketPanel .market-buyreq-progress {
    margin: var(--space-6) 0 var(--space-2);
    height: 3px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--border-color) 80%, transparent);
    overflow: hidden;
}

#marketPanel .market-buyreq-progress__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-jade) 55%, transparent);
    transition: width 0.25s ease;
}

#marketPanel .market-buyreq-summary {
    display: block;
}

#marketPanel .market-buyreq-price-range {
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

#marketPanel .market-buyreq-order-list {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}

#marketPanel .market-buyreq-order-list > .market-card {
    margin: 0;
    background: color-mix(in srgb, var(--bg-panel) 72%, var(--bg-card));
}

#marketPanel .market-buyreq-load-more,
#marketPanel .market-buyreq-order-more {
    width: 100%;
    min-height: 40px;
}

.market-workbench__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--space-10) var(--space-12) var(--space-14);
    -webkit-overflow-scrolling: touch;
}

#marketPanel.market-workbench .market-list {
    padding: 0;
    gap: var(--space-8);
    flex: none;
    overflow: visible;
}

/* 挂单卡 · inv-card 级悬停 */
#marketPanel .market-card {
    border-radius: var(--radius-md);
    transition:
        border-color 180ms var(--mkt-ease, ease),
        background 180ms var(--mkt-ease, ease),
        transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 180ms var(--mkt-ease, ease);
    animation: marketCardIn 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* #10029：坊市「上次浏览后新上架」徽标 */
.market-new-badge {
    display: inline-block;
    margin-left: var(--space-6);
    padding: 0 var(--space-6);
    border: 1px solid color-mix(in srgb, var(--accent-gold, #c9a15a) 52%, transparent);
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--accent-gold, #c9a15a) 12%, transparent);
    color: var(--accent-gold, #c9a15a);
    font-size: var(--font-label);
    line-height: 1.6;
    vertical-align: middle;
}

#marketPanel .market-list > .market-card:nth-child(1) { animation-delay: 0.02s; }
#marketPanel .market-list > .market-card:nth-child(2) { animation-delay: 0.05s; }
#marketPanel .market-list > .market-card:nth-child(3) { animation-delay: 0.08s; }
#marketPanel .market-list > .market-card:nth-child(4) { animation-delay: 0.11s; }
#marketPanel .market-list > .market-card:nth-child(5) { animation-delay: 0.14s; }
#marketPanel .market-list > .market-card:nth-child(6) { animation-delay: 0.17s; }

@keyframes marketCardIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

#marketPanel .market-card:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 30%, var(--border-color));
    transform: translateY(-1px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--text-primary) 6%, transparent);
}

#marketPanel .market-card.market-group-summary.is-open {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-card));
}

#marketPanel .market-card:hover .market-item-price {
    transform: scale(1.03);
}

#marketPanel .market-item-price {
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 品阶 / 想要 胶囊 */
.market-chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--text-secondary);
}

.market-chip--grade {
    border-color: color-mix(in srgb, currentColor 28%, var(--border-color));
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.market-chip--want {
    border-color: color-mix(in srgb, var(--accent-crimson) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent-crimson) 8%, transparent);
    color: var(--text-danger);
}

/* #8087：已领悟 / 同种已有，与仓库角标同翡翠语义 */
.market-chip--owned {
    border-color: color-mix(in srgb, var(--accent-jade) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    color: var(--accent-jade);
}

.market-chip--hot {
    border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold);
    animation: marketHotPulse 2.4s ease infinite;
}

@keyframes marketHotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
    .market-workbench__balance,
    #marketPanel .market-card,
    .market-chip--hot,
    .watch-badge {
        animation: none !important;
    }
    #marketPanel .market-card:hover {
        transform: none;
    }
}

/* 坊市挂单：价在右、品阶下行、购买主操作 */
.market-item-head {
    align-items: flex-start;
    gap: var(--space-8);
}

.market-item-price {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    text-align: right;
    color: var(--text-gold);
    min-width: 4.5em;
}

.market-item-price__num {
    font-size: var(--font-body-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--text-gold);
    font-family: var(--font-mono, ui-monospace, monospace);
}

.market-item-price__unit {
    margin-top: var(--space-2);
    font-size: var(--font-micro);
    font-weight: 400;
    color: var(--text-muted);
}

.market-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6) var(--space-6);
    margin: 0 0 var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
}

.market-item-seller {
    margin-bottom: var(--space-6);
}
.market-item-seller .ranking-name-link {
    color: inherit;
}
.market-item-seller .ranking-name-link:hover {
    color: var(--text-gold);
}

.market-item-actions {
    align-items: center;
}

.market-item-actions .btn-buy-market {
    background: color-mix(in srgb, var(--craft-gold) 12%, transparent);
    border: 1px solid var(--border-gold);
    color: var(--text-gold);
    font-weight: 600;
    padding: var(--space-2) var(--space-12);
    border-radius: var(--radius-xs);
    font-size: var(--font-caption);
    font-family: var(--font-serif);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.market-item-actions .btn-buy-market:hover {
    background: color-mix(in srgb, var(--craft-gold) 22%, transparent);
    color: var(--text-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--craft-gold) 12%, transparent);
}

.market-item-actions .btn-buy-market:active {
    transform: translateY(1px) scale(0.98);
}

.market-item-actions .btn-buy-market--secondary {
    background: var(--bg-card-hover);
    border-color: var(--border-color);
    color: var(--text-secondary);
    font-weight: 400;
    box-shadow: none;
}

.market-item-actions .btn-buy-market--secondary:hover {
    background: var(--bg-panel);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: none;
}

.market-group-summary .market-item-price__num {
    color: var(--accent-gold);
}

.market-filter-grid > *,
.market-filter-search-row > * {
    min-width: 0;
}

.market-filter input[type="text"] {
    width: 100%;
    padding: var(--space-8) var(--space-10);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-label);
    font-family: var(--font-serif);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.market-filter input[type="text"]:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--craft-gold) 15%, transparent);
}

.market-filter input[type="text"]::placeholder {
    color: var(--text-muted);
}

.market-filter select {
    width: 100%;
    padding: var(--space-6) var(--space-10);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-label);
    font-family: var(--font-serif);
}

#marketFilter select,
#marketBuyReqFilter select,
#auctionBrowseFilter select,
#marketFilter .market-multi-select-header,
#marketBuyReqFilter .market-multi-select-header {
    height: 32px;
    padding: 0 var(--space-6);
    font-size: var(--font-caption);
}

#auctionBrowseFilter .auction-refresh-btn {
    min-width: 54px;
    height: 32px;
    padding: 0 var(--space-8);
    justify-content: center;
}

/* 坊市高级筛选：FixedSelect 单选与境界多选统一外观 */
#marketPanel.market-workbench #marketFilterGrid .fx-select__btn,
#marketPanel.market-workbench #marketFilterGrid .market-multi-select-header,
#marketPanel.market-workbench #buyReqFilterGrid .fx-select__btn,
#marketPanel.market-workbench #buyReqFilterGrid .market-multi-select-header {
    width: 100%;
    height: 32px;
    min-height: 32px;
    padding: 0 var(--space-10);
    border: 1px solid var(--mkt-line);
    border-radius: var(--radius-md);
    background: var(--mkt-raised);
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--font-caption);
    box-sizing: border-box;
}

#marketPanel.market-workbench #buyReqFilterGrid .market-fulfill-filter {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: 30px;
    padding: 0 var(--space-10);
    border: 1px solid var(--mkt-line);
    border-radius: var(--radius-md);
    background: var(--mkt-raised);
    font-size: var(--font-caption);
    color: var(--text-primary);
    cursor: pointer;
}
#marketPanel.market-workbench #buyReqFilterGrid .market-fulfill-filter:has(input:checked) {
    border-color: var(--mkt-line-strong);
    color: var(--mkt-accent);
}

/* Custom Multi Select for Market */
.market-multi-select {
    position: relative;
    width: 100%;
    user-select: none;
}
.market-multi-select-header {
    width: 100%;
    padding: var(--space-6) var(--space-10);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-label);
    font-family: var(--font-serif);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.market-multi-select-header:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: var(--space-6);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    opacity: 0.6;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.market-multi-select.open .market-multi-select-header:after {
    transform: rotate(180deg);
}
.market-multi-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-top: var(--space-4);
    max-height: 250px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 12px var(--shadow-black-1);
    box-sizing: border-box;
}
.market-multi-select.open .market-multi-select-dropdown {
    display: block;
}
.market-multi-select-dropdown label {
    display: flex;
    align-items: center;
    padding: var(--space-8) var(--space-10);
    font-size: var(--font-body);
    color: var(--text-primary);
    cursor: pointer;
}
.market-multi-select-dropdown label:hover {
    background: var(--bg-card-hover);
}
.market-multi-select-dropdown input[type="checkbox"] {
    margin-right: var(--space-8);
    accent-color: var(--accent-gold);
}

#marketFilter .market-multi-select-dropdown {
    left: auto;
    right: 0;
    width: min(240px, calc(100vw - 24px));
}

.market-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    flex: 1;
    overflow-y: auto;
}

.own-tag {
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-style: italic;
}

/* 坊市关注红点 */
.watch-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--accent-crimson, var(--danger-color));
    border-radius: 50%;
    animation: court-badge-pulse 1.5s ease-in-out infinite;
}
.watch-badge.hidden { display: none; }

/* 关注列表 "想要" 按钮 */
.btn-watch-market {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-xs);
    font-size: var(--font-caption);
    cursor: pointer;
    font-family: var(--font-serif);
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-watch-market:hover {
    border-color: var(--accent-gold);
    color: var(--text-gold);
}
.btn-watch-market.watched {
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    color: var(--text-jade);
}

/* 关注列表卡片 */
.watch-item {
    padding: var(--space-10) var(--space-12);
    background: var(--glass-white-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.watch-item:hover { border-color: var(--accent-jade); }
.watch-item.sold-out {
    opacity: 0.65;
    border-color: color-mix(in srgb, var(--jimo-crimson) 30%, transparent);
    background: color-mix(in srgb, var(--jimo-crimson) 4%, transparent);
}
.watch-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}
.watch-item-name {
    font-size: var(--font-body);
    font-weight: 600;
}
.watch-item-name.sold-out-text {
    text-decoration: line-through;
    color: var(--text-muted) !important;
}
.watch-item-meta {
    font-size: var(--font-caption);
    color: var(--text-muted);
    display: flex;
    gap: var(--space-8);
    align-items: center;
    flex-wrap: wrap;
}
.watch-sold-tag {
    color: var(--danger-color);
    font-weight: 600;
    font-size: var(--font-caption);
}
.watch-count-tag {
    color: var(--text-jade);
    font-size: var(--font-caption);
}
.watch-item-actions {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-6);
}
.watch-item-actions button {
    padding: var(--space-4) var(--space-10);
    font-size: var(--font-caption);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-serif);
    transition: all 0.2s;
}
.watch-item-actions button:hover {
    border-color: var(--accent-gold);
    color: var(--text-gold);
}
.btn-watch-notify {
    background: color-mix(in srgb, var(--craft-gold) 10%, transparent) !important;
    border-color: var(--border-gold) !important;
    color: var(--text-gold) !important;
}
.btn-watch-notify.active {
    background: color-mix(in srgb, var(--changsheng-green) 10%, transparent) !important;
    border-color: var(--success-color) !important;
    color: var(--success-color) !important;
}
.btn-watch-delete {
    color: var(--text-muted) !important;
}
.btn-watch-delete:hover {
    border-color: var(--danger-color) !important;
    color: var(--danger-color) !important;
}

.empty-text,
.loading-text {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-24) 0;
    font-size: var(--font-body);
    font-family: var(--font-serif);
}

/* ===== 坊市上架 · gc-dialog C（价格优先） ===== */
.market-list-dialog.gc-dialog {
    max-width: 392px;
}
.market-list-dialog .gc-mid.is-form {
    padding-top: var(--space-14);
}
.market-list-dialog .gc-q {
    font-size: var(--font-title);
}
.market-list-dialog .gc-sub {
    margin-top: var(--space-4);
}
.ml-label {
    display: block;
    font-size: var(--font-caption);
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}
.ml-field {
    margin-top: var(--space-12);
}
.ml-realm-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}
.ml-realm-control {
    display: grid;
    gap: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-caption);
}
.ml-realm-control .fx-select,
.ml-realm-control .fx-select__btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
}
.ml-realm-select {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-input, var(--bg-panel));
    color: var(--text-primary);
    font: inherit;
}
.ml-realm-select:focus {
    border-color: var(--border-gold, var(--accent-gold));
    outline: none;
}
/* #6771：限购不要套数量步进器四列网格，否则会被挤进 40px 只剩一个「不」 */
.ml-max-per-buyer {
    display: block;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 var(--space-12);
    -moz-appearance: textfield;
    appearance: textfield;
}
.ml-max-per-buyer::-webkit-outer-spin-button,
.ml-max-per-buyer::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.ml-field-hint {
    margin-top: var(--space-6);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.5;
}
.ml-price-block {
    margin-top: var(--space-12);
    padding: var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.ml-price-block .ml-price {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-input, rgba(42, 42, 38, 0.04));
    color: var(--text-gold);
    font-size: var(--font-heading);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    letter-spacing: 0.5px;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.ml-price-block .ml-price:focus {
    border-color: var(--border-gold, var(--accent-gold));
}
.ml-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-8);
}
.ml-quick__btn {
    height: 26px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ml-quick__btn:hover:not(:disabled) {
    border-color: var(--border-gold, var(--accent-gold));
    color: var(--text-gold);
}
.ml-quick__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ml-stepper {
    display: grid;
    grid-template-columns: 40px 1fr 40px 52px;
    gap: var(--space-6);
}
.ml-stepper input[type="number"] {
    height: 38px;
    width: 100%;
    text-align: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-input, rgba(42, 42, 38, 0.04));
    color: var(--text-primary);
    font-size: var(--font-action);
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.ml-stepper input[type="number"]:focus {
    border-color: var(--border-gold, var(--accent-gold));
}
.ml-stepper__btn {
    height: 38px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-size: var(--font-action);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.ml-stepper__btn:hover {
    border-color: var(--border-gold, var(--accent-gold));
    color: var(--text-gold);
}
.ml-stepper__max {
    font-size: var(--font-caption);
    letter-spacing: 0.5px;
    color: var(--text-gold);
    border-color: var(--border-gold, var(--accent-gold));
    font-weight: 600;
}
.market-list-dialog .ml-price-ref {
    margin-top: var(--space-12);
}
.ml-summary {
    margin-top: var(--space-12);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-gold, var(--border-color));
    background: rgba(183, 120, 31, 0.08);
}
@supports (background: color-mix(in srgb, red, blue)) {
    .ml-summary {
        border-color: color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
        background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-panel));
    }
}
.ml-summary__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-10);
    font-size: var(--font-label);
    line-height: 1.5;
}
.ml-summary__row + .ml-summary__row { margin-top: var(--space-4); }
.ml-summary__k { color: var(--text-muted); }
.ml-summary__v {
    color: var(--text-gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-label);
}
.ml-desc {
    width: 100%;
    height: 40px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-input, rgba(42, 42, 38, 0.04));
    color: var(--text-primary);
    font-size: var(--font-body-lg);
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
}
.ml-desc:focus {
    border-color: var(--border-gold, var(--accent-gold));
}
.ml-notify {
    margin-top: var(--space-12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.ml-notify .market-notify-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-label);
    color: var(--text-secondary);
    cursor: pointer;
}
.ml-notify input { accent-color: var(--accent-gold); }
.ml-notify__remain {
    font-size: var(--font-caption);
    color: var(--text-muted);
    white-space: nowrap;
}
.ml-notify--stack {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
}
.ml-time-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}
.ml-time-row input {
    width: 72px;
    height: 34px;
    text-align: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-input, rgba(42, 42, 38, 0.04));
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-body-lg);
}
.ml-time-row span {
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.ml-rules-note {
    text-align: left;
    margin-top: var(--space-8);
}
.ml-warn-note {
    text-align: left;
    color: var(--accent-crimson, var(--accent-crimson));
}
.ml-anon {
    margin-top: var(--space-12);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.ml-anon__opt {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-6);
    font-size: var(--font-label);
    color: var(--text-secondary);
    cursor: pointer;
}
.ml-stepper--qty-hint {
    grid-template-columns: 1fr;
}
.market-trade-dialog.gc-dialog {
    max-width: 392px;
}
.market-trade-dialog .market-buy-compare {
    margin-top: var(--space-12);
    margin-bottom: 0;
}

/* ===== 坊市求购挂单 · 对齐上架 gc-dialog ===== */
.market-buy-req-dialog.gc-dialog {
    max-width: 392px;
}
.market-buy-req-dialog .gc-mid.is-form {
    padding-top: var(--space-14);
}
.market-buy-req-dialog .ip-select-card {
    margin-bottom: 0;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.market-buy-req-dialog .ip-select-card:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--bg-card) 76%, var(--accent-gold) 8%);
}
.market-buy-req-dialog .ip-select-card__action {
    color: var(--text-gold);
    border-color: var(--border-gold, var(--border-color));
}
.market-buy-req-dialog .ml-summary__v {
    font-size: var(--font-body-lg);
}

/* ===== 交易筛选 · 屏蔽管理（gc-dialog B：容量条 + 紧凑行） ===== */
body.game-page .modal-content.modal--decorated.gc-dialog.tb-dialog,
.modal-content.modal--decorated.gc-dialog.tb-dialog,
.gc-dialog.tb-dialog {
    max-height: var(--pattern-dialog-max-height);
    display: flex;
    flex-direction: column;
}

.tb-dialog .gc-mid.tb-mid {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    text-align: left;
    max-height: min(55vh, 420px);
    padding-top: var(--space-12);
    /* 屏蔽管理弹窗无 gc-foot（只有 head + mid），mid 是末元素。
     * 共享 .gc-mid 默认 padding-bottom:var(--space-4) 是给「下方有 foot 接管底距」的弹窗留的接缝；
     * 这里没有 foot，var(--space-4) 会让列表底行几乎贴到弹窗底边（玩家反馈「底部间距不对」）。
     * 显式补到 var(--space-16)，与顶距视觉对称。
     */
    padding-bottom: var(--space-16);
}

.tb-dialog .tb-sub {
    margin: 0;
    text-align: left;
}

/* #10736：按境界隐藏选择器 */
.tb-stage-row {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin-top: var(--space-10);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-panel));
}

/* #10734：同款批量上架弹窗 */
.mbl-dialog .gc-sub {
    margin: 0;
    text-align: left;
}

.mbl-ref {
    margin-top: var(--space-8);
    font-size: var(--font-small, var(--font-body));
    color: var(--text-secondary, inherit);
}

.mbl-list {
    display: grid;
    gap: var(--space-8);
    margin-top: var(--space-10);
    max-height: 46vh;
    overflow-y: auto;
}

.mbl-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}

.mbl-check {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.mbl-affix {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mbl-qty-label {
    color: var(--text-muted, inherit);
    font-size: var(--font-small, var(--font-body));
}

.mbl-qty,
.mbl-price {
    width: 76px;
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, var(--radius-md));
    background: var(--bg-elevated, var(--bg-panel));
    color: inherit;
    font-family: inherit;
    font-size: var(--font-small, var(--font-body));
}

.mbl-price {
    width: 112px;
}

.mbl-submit-row {
    display: flex;
    justify-content: center;
    margin-top: var(--space-12);
}

.tb-stage-label {
    flex: none;
    font-size: var(--font-body);
    color: var(--text-secondary, inherit);
}

.tb-stage-select {
    flex: 1;
    min-width: 0;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm, var(--radius-md));
    border: 1px solid var(--border-color);
    background: var(--bg-panel, var(--bg-elevated, #1c1f26));
    color: inherit;
    font-size: var(--font-body);
    font-family: inherit;
}

.tb-stage-hint {
    margin: var(--space-6) 0 0;
    font-size: var(--font-small, var(--font-body));
    line-height: 1.6;
    text-align: left;
    color: var(--text-muted, var(--text-secondary, inherit));
}

.tb-cap {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-panel));
}

.tb-cap.is-near {
    border-color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 32%, var(--border-color));
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 6%, var(--bg-panel));
}

.tb-cap.is-near .tb-cap__nums {
    color: var(--accent-crimson, var(--accent-crimson));
}

.tb-cap.is-near .tb-cap__fill {
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 72%, transparent);
}

.tb-cap__nums {
    flex: none;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}

.tb-cap__nums small {
    font-weight: 500;
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.tb-cap__bar {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    overflow: hidden;
}

.tb-cap__fill {
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, var(--accent-gold) 70%, transparent);
    min-width: 0;
    transition: width 0.18s ease;
}

.tb-cap__hint {
    flex: none;
    font-size: var(--font-micro);
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.tb-clear-row {
    display: flex;
    justify-content: flex-end;
    flex: none;
}

.tb-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.tb-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    text-align: left;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.tb-row:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-panel));
}

.tb-row__main {
    min-width: 0;
}

.tb-row__name {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tb-row__meta {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    align-items: center;
    font-size: var(--font-micro);
    color: var(--text-muted);
    line-height: 1.3;
}

.tb-chip {
    display: inline-flex;
    align-items: center;
    height: 16px;
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    font-size: var(--font-micro);
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
}

.tb-chip--r3 {
    color: var(--rarity-3);
    border-color: color-mix(in srgb, var(--rarity-3) 35%, transparent);
    background: color-mix(in srgb, var(--rarity-3) 8%, transparent);
}

.tb-chip--r4 {
    color: var(--rarity-4);
    border-color: color-mix(in srgb, var(--rarity-4) 35%, transparent);
    background: color-mix(in srgb, var(--rarity-4) 8%, transparent);
}

.tb-chip--r5 {
    color: var(--rarity-5);
    border-color: color-mix(in srgb, var(--rarity-5) 35%, transparent);
    background: color-mix(in srgb, var(--rarity-5) 8%, transparent);
}

.tb-row__act {
    flex: none;
    height: 28px;
    padding: 0 var(--space-10);
    border-radius: var(--radius-md);
    font-size: var(--font-caption);
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 32%, transparent);
    color: var(--accent-crimson, var(--accent-crimson));
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 7%, transparent);
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.tb-row__act:hover {
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 48%, transparent);
}

.tb-empty {
    padding: var(--space-32) var(--space-12);
    text-align: center;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
}

.tb-empty__t {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-body-lg);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
}

.tb-empty__s {
    margin-top: var(--space-6);
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.55;
}

.tb-dialog .gc-foot {
    flex-shrink: 0;
}

.tb-dialog .gc-foot > .modal-btn {
    flex: 1;
}

@media (prefers-reduced-motion: reduce) {
    .tb-cap__fill,
    .tb-row,
    .tb-row__act {
        transition: none;
    }
}
.market-buy-req-dialog .gc-detail.ml-price-ref {
    margin-top: var(--space-12);
}

/* 坊市购买对比 */
.market-buy-compare {
    background: var(--glass-white-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-8) var(--space-12);
    margin-bottom: var(--space-14);
    font-size: var(--font-label);
}

.compare-header {
    color: var(--text-muted);
    margin-bottom: var(--space-4);
    font-size: var(--font-caption);
}

.compare-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.compare-stat {
    color: var(--text-secondary);
    font-size: var(--font-label);
}

.compare-up {
    color: var(--success-color);
    font-weight: 600;
}

.compare-down {
    color: var(--danger-color);
    font-weight: 600;
}

.compare-empty {
    color: var(--text-muted);
    font-size: var(--font-label);
    font-style: italic;
}

.btn-market-confirm {
    flex: 1;
    padding: var(--space-10) 0;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-size: var(--font-body);
    font-family: var(--font-serif);
    transition: all 0.15s;
}

.btn-market-confirm {
    background: var(--gradient-gold);
    color: var(--text-gold);
    font-weight: bold;
}

.btn-market-confirm:hover {
    filter: brightness(1.1);
}

/* ===== 通用游戏弹窗 ===== */
.game-dialog {
    max-width: 420px;
    width: 90vw;
    text-align: center;
}

.auto-explore-timeout-hint {
    margin-top: var(--space-10);
    padding: var(--space-8) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 24%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.5;
    text-align: center;
}

.auto-explore-timeout-hint strong {
    color: var(--accent-gold);
    font-weight: 700;
}

.absorb-qty-row {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    margin-top: var(--space-12);
}

.absorb-custom-row {
    display: flex;
    gap: var(--space-6);
    align-items: center;
    justify-content: center;
    margin-top: var(--space-10);
}

.absorb-custom-input {
    width: 90px;
    padding: var(--space-6) var(--space-10);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    font-size: var(--font-body);
    text-align: center;
    font-family: var(--font-serif);
    outline: none;
    transition: border-color 0.2s;
}

.absorb-custom-input:focus {
    border-color: var(--accent-gold);
}

.absorb-custom-input::placeholder {
    color: var(--text-muted);
    font-size: var(--font-label);
}

/* 自定义数量提交按钮已统一用 .modal-btn--gold（见 game.js/game-storage.js）。 */

/* ===== 弹窗内丹药快捷使用 ===== */
.dialog-pill-section {
    margin-top: var(--space-14);
    padding-top: var(--space-10);
    border-top: 1px dashed var(--border-color);
}

.dialog-pill-header {
    font-size: var(--font-label);
    color: var(--text-muted);
    text-align: center;
    margin-bottom: var(--space-8);
    letter-spacing: 1px;
}

.dialog-pill-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: 160px;
    overflow-y: auto;
}

.dialog-pill-item {
    display: flex;
    /* .dialog-pill-list 为 flex column + max-height + overflow:auto 的滚动容器,
       子项默认 flex-shrink:1 会被压扁, 导致卡片内"名称+描述+按钮"多行内容
       溢出卡片边界叠到相邻卡片。改为不收缩, 超长时由列表滚动承担。 */
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-10);
    background: var(--glass-white-3);
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}

.dialog-pill-item:hover {
    border-color: color-mix(in srgb, var(--craft-gold-bright) 20%, transparent);
}

.dialog-pill-name {
    font-size: var(--font-label);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.dialog-pill-desc {
    flex: 1;
    font-size: var(--font-caption);
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.btn-dialog-pill-use {
    flex-shrink: 0;
    padding: var(--space-4) var(--space-12);
    border: 1px solid var(--accent-jade);
    background: color-mix(in srgb, var(--changsheng-green) 10%, transparent);
    color: var(--text-jade);
    border-radius: var(--radius-xs);
    font-size: var(--font-caption);
    cursor: pointer;
    font-family: var(--font-serif);
    transition: all 0.15s;
    white-space: nowrap;
}

.btn-dialog-pill-use:hover {
    background: color-mix(in srgb, var(--changsheng-green) 25%, transparent);
    border-color: var(--text-jade);
}

/* 字体选择按钮组 */
.font-select-group {
    display: flex;
    gap: var(--space-4);
}

.font-select-btn {
    flex: 1;
    padding: var(--space-6) 0;
    font-size: var(--font-label);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.4;
}

.font-select-btn:hover {
    border-color: var(--border-gold);
    color: var(--text-primary);
}

.font-select-btn.active {
    background: color-mix(in srgb, var(--craft-gold) 12%, transparent);
    border-color: var(--accent-gold);
    color: var(--text-gold);
    font-weight: 600;
}

/* 自定义字体输入区 */
.custom-font-input {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-8);
    align-items: center;
}

.custom-font-input .app-input {
    flex: 1;
    min-width: 0;
    font-size: var(--font-label);
}
/* 「应用」钮：替代旧内联 style="flex:none;padding:var(--space-4) var(--space-12);" */
.custom-font-input .custom-font-apply {
    flex: none;
    padding: var(--space-4) var(--space-12);
}

.ui-palette-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.ui-palette-btn {
    min-width: 0;
    height: 38px;
    padding: 0 var(--space-6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-label);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.ui-palette-btn:hover,
.ui-palette-btn.active {
    border-color: var(--ui-button-border, var(--accent-gold));
    color: var(--ui-button-text, var(--text-gold));
    background: var(--ui-button-bg, var(--gradient-gold));
}

.ui-palette-btn__swatch {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 50%;
    border: 1px solid var(--glass-white-1);
    background: linear-gradient(135deg, var(--swatch-primary) 0 34%, var(--swatch-bg, var(--bg-card)) 34% 66%, var(--swatch-secondary) 66% 100%);
    box-shadow: 0 0 0 1px var(--shadow-black-3);
}

.ui-palette-custom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
    align-items: end;
}

.ui-palette-custom label {
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--font-label);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ui-palette-color-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
}

.ui-palette-custom input[type="color"] {
    width: 42px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    padding: var(--space-4);
    cursor: pointer;
}

.ui-palette-hex-input {
    width: 100%;
    min-width: 0;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    padding: 0 var(--space-8);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--font-label);
    line-height: 34px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ui-palette-hex-input:focus {
    outline: none;
    border-color: var(--ui-button-border, var(--accent-gold));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 14%, transparent);
}

.ui-palette-hex-input.is-invalid {
    border-color: var(--text-red);
    color: var(--text-red);
    background: color-mix(in srgb, var(--jimo-crimson) 8%, transparent);
}

.ui-palette-apply {
    grid-column: 1 / -1;
    height: 32px;
}

/* font-select 可保留金底；modal-btn 扁平样式由 inventory + themes 统一 */
body.game-page :where(.font-select-btn.active) {
    background: var(--ui-button-bg, var(--gradient-gold));
    border: 1px solid var(--ui-button-border, var(--border-gold));
    color: var(--ui-button-text, var(--text-gold));
}

body.game-page :where(.font-select-btn.active:hover) {
    background: var(--ui-button-bg-hover, var(--gradient-gold));
    border-color: var(--ui-button-border, var(--border-gold));
    color: var(--ui-button-text, var(--text-gold));
}

.fw-setting-row {
    margin-bottom: var(--space-12);
}
.settings-group__body > .fw-setting-row:last-child {
    margin-bottom: 0;
}

.fw-setting-row>label:first-child {
    display: block;
    font-size: var(--font-body);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
}

/* 开关行: label + toggle 同行 */
.fw-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
}
.fw-toggle-row>label:first-child {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

/* ===== 设置弹窗 · 已收敛到 gc-dialog[data-tone="gold"] 共享壳（game-dialog.css 接管） ===== */
/* 原 .settings-modal 同构壳（padding:0/max-width/flex/border-radius）+ .settings-modal__head 已删除
   —— 和 gc-dialog 重复造轮子。HTML 现用 gc-dialog class + gc-head + gc-mid。
   gc-head 补了 × 关闭钮（旧版只能点 overlay 关）。手风琴业务卡 .settings-group 等全保留。 */
/*
 * 设置弹窗只有 head + mid，没有 gc-foot。
 * 共享 .gc-mid 默认 padding-bottom:var(--space-4)（≤640px 时 var(--space-2)）是给「下方有 foot 接管底距」的弹窗留的接缝；
 * game-dialog.css 后载且同为单 class，会盖掉 .settings-modal__body 的底距，导致末分组几乎贴底。
 * 用更高 specificity 压过 .gc-mid，补齐底距（与屏蔽管理 tb-mid 同因）。
 */
body.game-page .modal-content.modal--decorated.gc-dialog.settings-modal > .gc-mid.settings-modal__body,
.modal-content.modal--decorated.gc-dialog.settings-modal > .gc-mid.settings-modal__body,
.gc-dialog.settings-modal > .gc-mid.settings-modal__body,
.settings-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-14) var(--space-20);
    /* 覆盖 .gc-mid 默认 text-align:center，设置行/分组应左齐 */
    text-align: left;
    /* 可滚但不显示右侧滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.settings-modal__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.settings-group {
    flex-shrink: 0; /* 禁止在 modal 限高时被压扁，改由 body 滚动 */
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 70%, var(--bg-card));
    overflow: hidden;
}
.settings-group.is-open {
    border-color: color-mix(in srgb, var(--accent-gold) 22%, var(--border-color));
}
.settings-group--danger {
    border-color: color-mix(in srgb, var(--text-danger) 28%, var(--border-color));
    background: color-mix(in srgb, var(--text-danger) 4%, var(--bg-card));
}
.settings-group__head {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    margin: 0;
    padding: var(--space-12) var(--space-12);
    border: 0;
    border-bottom: 1px dashed transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.settings-group.is-open > .settings-group__head {
    border-bottom-color: color-mix(in srgb, var(--border-color) 70%, transparent);
}
.settings-group__head:hover {
    background: color-mix(in srgb, var(--accent-gold) 5%, transparent);
}
.settings-group__head:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: -2px;
}
.settings-group__title {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--font-body);
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--text-gold);
    line-height: 1.3;
}
.settings-group--danger .settings-group__title {
    color: var(--text-danger);
}
.settings-group__chev {
    flex: none;
    color: var(--text-muted);
    transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1);
}
.settings-group.is-open > .settings-group__head .settings-group__chev {
    transform: none;
}
.settings-group__body {
    padding: var(--space-4) var(--space-12) var(--space-12);
    box-sizing: border-box;
}
/* 折叠手风琴：高度/透明度展开收起动画（由 JS 驱动 height） */
.settings-modal--accordion .settings-group__body {
    overflow: hidden;
    transition:
        height 0.28s cubic-bezier(0.33, 1, 0.68, 1),
        opacity 0.22s ease,
        padding-top 0.28s cubic-bezier(0.33, 1, 0.68, 1),
        padding-bottom 0.28s cubic-bezier(0.33, 1, 0.68, 1);
}
.settings-modal--accordion .settings-group:not(.is-open) > .settings-group__body {
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    pointer-events: none;
}
/* 仅动画中覆盖 [hidden]，结束后恢复 display:none 以脱离焦点树 */
.settings-modal--accordion .settings-group__body.is-animating {
    display: block !important;
    visibility: visible;
}
.settings-modal--accordion .settings-group.is-open > .settings-group__body {
    opacity: 1;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .settings-modal--accordion .settings-group__body,
    .settings-group__chev {
        transition: none !important;
    }
}
.settings-row-hint {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-micro);
    line-height: 1.4;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0;
}
.fw-toggle-row > label:first-child .settings-row-hint {
    display: block;
}
/* 邮箱行内联提示保持同行 */
#settingCurrentEmailText.settings-row-hint {
    display: inline;
    margin-top: 0;
    margin-left: var(--space-4);
}
.settings-action-btn {
    flex: none !important;
    padding: var(--space-6) var(--space-14) !important;
}
.settings-action-btn--danger,
.settings-danger-label {
    color: var(--text-danger) !important;
}
.settings-action-btn--danger {
    border-color: color-mix(in srgb, var(--text-danger) 55%, transparent) !important;
}
.settings-group .fw-preview {
    margin-bottom: 0;
    margin-top: var(--space-2);
}
.settings-group .fw-slider-wrap {
    flex: 1;
}
.settings-group .fw-value {
    flex: none;
}

@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .settings-group {
        border-color: var(--border-color);
        background: var(--bg-card);
    }
    .settings-group.is-open {
        border-color: var(--border-gold);
    }
    .settings-group--danger {
        border-color: var(--text-danger);
        background: var(--bg-card);
    }
}

/* ===== 自动处理 · A 问劫分章 ===== */
.auto-process-modal-overlay {
    --ap-bg: var(--bg-panel);
    --ap-panel: var(--bg-card);
    --ap-panel-raised: var(--bg-card-hover);
    
    --ap-line: var(--border-color);
    --ap-line-strong: var(--border-jade);
    --ap-text: var(--text-primary);
    --ap-muted: var(--text-muted);
    --ap-accent: var(--accent-jade);
    --ap-accent-2: var(--accent-gold);
    
    
    
    
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .auto-process-modal-overlay {
        --ap-bg: color-mix(in srgb, var(--bg-panel) 96%, var(--bg-primary));
        --ap-panel: color-mix(in srgb, var(--bg-card) 92%, var(--bg-panel));
        --ap-panel-raised: color-mix(in srgb, var(--bg-card-hover) 68%, var(--bg-card));
        
        --ap-line: color-mix(in srgb, var(--border-color) 76%, transparent);
        --ap-line-strong: color-mix(in srgb, var(--accent-jade) 42%, var(--border-color));
        
        
    }
}

/*
 * 不支持 color-mix 的旧 WebView/浏览器兜底：
 * 弹窗内部很多元素用单层 color-mix(..., transparent) 做半透明底，
 * 旧引擎会把整条 background 声明丢弃而退回透明，造成"透明底"。
 */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .auto-process-modal-overlay .auto-process-tabs,
    .auto-process-modal-overlay .auto-process-tab.active,
    .auto-process-modal-overlay .auto-process-tab:hover,
    .auto-process-modal-overlay .auto-process-section,
    .auto-process-modal-overlay .auto-process-field,
    .auto-process-modal-overlay .auto-process-actions,
    .auto-process-modal-overlay .auto-process-field .app-input {
        background: var(--bg-card) !important;
    }

    .auto-process-modal-overlay .auto-process-actions .modal-btn--outline,
    body.game-page .auto-process-modal-overlay .auto-process-actions .modal-btn--outline {
        background: var(--bg-card) !important;
        background-image: none !important;
    }

    .auto-process-modal-overlay .auto-process-actions .modal-btn--gold,
    body.game-page .auto-process-modal-overlay .auto-process-actions .modal-btn--gold {
        background: var(--accent-jade) !important;
        background-image: none !important;
    }

    .auto-process-modal-overlay .modal-content,
    .auto-process-modal-overlay .gc-mid,
    .auto-process-modal-overlay .gc-head,
    .auto-process-modal-overlay .gc-foot {
        background-image: none !important;
    }
}

/* 壳：gc 纵排，头/底固定，中区滚动隐条 */
.auto-process-modal-overlay .modal-content.gc-dialog,
.auto-process-modal-overlay .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: var(--pattern-dialog-max-height);
    padding: 0 !important;
    border: 1px solid var(--ap-line-strong, var(--border-color));
    border-radius: var(--radius-lg);
    background: var(--ap-bg) !important;
    box-shadow: var(--shadow-md);
    color: var(--ap-text);
    overflow: hidden;
}

.auto-process-modal-overlay .gc-head {
    flex: 0 0 auto;
    padding: var(--space-20) var(--space-48) 0 var(--space-16);
    background: var(--ap-bg);
}

.auto-process-modal-overlay .gc-title {
    font-size: var(--font-heading);
    letter-spacing: 0.12em;
}

.auto-process-modal-overlay .gc-sub.da-desc {
    margin-top: var(--space-6);
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: var(--font-label);
    color: var(--ap-muted);
    text-align: left;
}

/* Tab / 状态：固定在头与中区之间，不随面板滚动 */
.auto-process-modal-overlay .auto-process-chrome {
    flex: 0 0 auto;
    padding: var(--space-8) var(--space-14) var(--space-4);
    background: var(--ap-bg);
}

.auto-process-modal-overlay .modal-header-close {
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--ap-line);
    background: transparent;
    color: var(--ap-muted);
    box-shadow: none;
}

.auto-process-modal-overlay .modal-header-close:hover,
.auto-process-modal-overlay .modal-header-close:focus-visible {
    color: var(--accent-crimson);
    border-color: color-mix(in srgb, var(--accent-crimson) 36%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 7%, transparent);
}

.auto-process-modal-overlay .gc-mid.auto-process-mid,
.auto-process-modal-overlay .gc-mid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: var(--space-4) var(--space-14) var(--space-12); /* 与上方 Tab 间距收紧 */
    text-align: left;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--ap-bg);
    /* 可滚隐条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.auto-process-modal-overlay .gc-mid.auto-process-mid::-webkit-scrollbar,
.auto-process-modal-overlay .gc-mid::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.auto-process-modal-overlay .gc-foot.auto-process-actions,
.auto-process-modal-overlay .auto-process-actions {
    position: static;
    flex: 0 0 auto;
    z-index: 2;
    margin: 0 !important;
    padding: var(--space-12) var(--space-14) var(--space-16) !important;
    border-top: 1px solid var(--ap-line);
    background: var(--ap-bg);
    gap: var(--space-10);
}

.auto-process-modal {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0;
    color: var(--ap-text);
}

.auto-process-modal--loading {
    min-height: 160px;
    padding-bottom: 0;
    justify-content: center;
}

.auto-process-loading {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    border: 1px solid var(--ap-line);
    border-radius: var(--radius-lg);
    background: var(--ap-panel);
    color: var(--ap-muted);
    font-size: var(--font-body);
}

.auto-process-loading__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ap-accent);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-jade) 14%, transparent);
    animation: autoProcessPulse 1s ease-in-out infinite;
}

.auto-process-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.auto-process-tab {
    position: relative;
    min-height: 36px;
    height: 36px;
    min-width: 0;
    padding: 0 var(--space-4);
    border: 1px solid var(--ap-line);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--ap-muted);
    cursor: pointer;
    text-align: center;
    font-size: var(--font-label);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.auto-process-tab:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 30%, var(--border-color));
    color: var(--ap-text);
}

.auto-process-tab.active {
    color: var(--ap-accent-2);
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

.auto-process-tab__label {
    font-size: var(--font-label);
    font-weight: 600;
}

/* 兼容旧类名（入口卡/测试仍可能引用） */
.auto-process-tab__main,
.auto-process-tab__count,
.auto-process-tab__desc {
    display: none;
}

.auto-process-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    min-width: 0;
}

.auto-process-section {
    position: relative;
    border: 1px solid var(--ap-line);
    border-radius: var(--radius-lg);
    background: var(--ap-panel);
    overflow: hidden;
}

.auto-process-section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-10);
    align-items: start;
    padding: var(--space-12) var(--space-12) var(--space-8);
    border-bottom: 1px solid var(--ap-line);
}

.auto-process-section--collapsed .auto-process-section__head {
    border-bottom: 0;
}

.auto-process-section__head-text {
    min-width: 0;
}

.auto-process-section__action {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding-top: var(--space-2);
}

.auto-process-header-toggle {
    margin-top: 0;
}

.auto-process-section__title {
    color: var(--ap-text);
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

.auto-process-section__note {
    margin-top: var(--space-4);
    color: var(--ap-muted);
    font-size: var(--font-caption);
    line-height: 1.5;
}

.auto-process-section__note--warn {
    color: var(--accent-orange);
    font-size: var(--font-caption);
    font-weight: 600;
    line-height: 1.55;
    padding: var(--space-8) var(--space-10);
    margin: var(--space-2) 0 var(--space-8);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-orange) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-orange) 40%, transparent);
}

.auto-process-section__note--warn::before {
    content: '⚠ ';
}

.auto-process-section__body {
    padding: var(--space-4) var(--space-12) var(--space-12);
}

/* 单列 setting 行 */
.auto-process-setting-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--space-4);
}
.auto-process-setting-grid.auto-process-locked {
    opacity: 0.5;
    pointer-events: none;
}

.auto-process-field {
    display: grid;
    grid-template-columns: minmax(72px, 38%) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10) var(--space-12);
    min-height: 40px;
    padding: var(--space-6) 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--ap-line) 80%, transparent);
    border-radius: 0;
    background: transparent;
    transition: none;
}

.auto-process-setting-grid > .auto-process-field:first-child {
    border-top: 0;
}

.auto-process-field:hover {
    border-color: color-mix(in srgb, var(--ap-line) 80%, transparent);
    transform: none;
    background: transparent;
}

.auto-process-field__lab {
    min-width: 0;
}

.auto-process-field__lab label,
.auto-process-field label {
    margin: 0;
    color: var(--ap-text);
    font-size: var(--font-label);
    font-weight: 600;
    line-height: 1.35;
}
.auto-process-field__lab [data-csel-label] {
    cursor: pointer;
}

.auto-process-field__control {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    min-width: 0;
    width: auto;
    max-width: 100%;
    justify-self: end;
    min-height: 36px;
    padding: 0 var(--space-10);
    border: 1px solid var(--ap-line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 70%, var(--bg-card));
    color: var(--ap-muted);
    font-size: var(--font-label);
    white-space: nowrap;
    box-sizing: border-box;
}

.auto-process-field__control--toggle {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
}

.auto-process-field__affix {
    flex: 0 0 auto;
    font-size: var(--font-caption);
    color: var(--ap-muted);
}

/* ===== 自定义下拉（替换原生 select）· 方案 A：可搜索分组名录 =====
 * 保留隐藏的原生 <select>（.csel-native）作值载体；叠加 .csel 触发按钮 + .csel-panel 面板。
 * 视觉对齐 .auto-process-field__control（--ap-line / --ap-text / --ap-muted）。
 * 扁平描边、无左竖条/顶横条 accent。移动端点击区 ≥40px。
 */
.auto-process-field__control.csel-instance {
    padding: 0;          /* 触发按钮自带内边距 */
    border: 0;
    background: transparent;
    justify-self: stretch;
}
.csel-native {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
    border: 0; padding: 0; margin: calc(-1 * var(--space-2));
    overflow: hidden; clip: rect(0 0 0 0);
}
.csel {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-8);
    min-height: 36px;
    padding: 0 var(--space-10);
    border: 1px solid var(--ap-line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 70%, var(--bg-card));
    color: var(--ap-text);
    font-family: inherit; font-size: var(--font-label);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
}
.csel:hover { border-color: color-mix(in srgb, var(--accent-gold) 50%, var(--ap-line)); }
.csel.is-open {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px rgba(183, 120, 31, 0.15);
}
.csel__val {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: left;
}
.csel__val.is-placeholder { color: var(--ap-muted); }
.csel__caret { flex: 0 0 auto; color: var(--ap-muted); }
.csel.is-open .csel__caret { transform: rotate(180deg); }

.csel-panel {
    /* fixed 定位由 JS 设置坐标（positionAutoProcessSelectPanel），脱离 gc-mid 的 overflow:auto 裁切。
       z-index 必须高于 modal-overlay(--z-overlay-top:120000)，否则被遮罩盖住不显示。 */
    z-index: 130000;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, var(--radius-md));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-sizing: border-box;
}
.csel-search {
    flex: 0 0 auto;
    padding: var(--space-8);
    border-bottom: 1px solid var(--color-border-default);
    background: var(--color-bg-subtle);
}
.csel-search__input {
    width: 100%;
    padding: var(--space-6) var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, var(--radius-xs));
    color: var(--text-primary);
    font-family: inherit; font-size: var(--font-body);
    outline: none;
}
.csel-search__input:focus { border-color: var(--accent-gold); }
.csel-list {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}
.csel-list::-webkit-scrollbar { width: 4px; }
.csel-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--radius-xs); }
.csel-group {
    position: sticky; top: 0; z-index: 1;
    padding: var(--space-6) var(--space-12) var(--space-4);
    background: var(--bg-panel);
    color: var(--ap-muted);
    font-size: var(--font-caption); letter-spacing: 1px; font-weight: 600;
}
.csel-opt {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-8);
    min-height: 40px;
    padding: var(--space-8) var(--space-12);
    color: var(--ap-text);
    font-size: var(--font-body);
    cursor: pointer;
    transition: background .12s;
}
.csel-opt:hover { background: var(--bg-card-hover, var(--bg-secondary)); }
.csel-opt.is-selected .csel-opt__label { color: var(--accent-gold); font-weight: 600; }
.csel-opt__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-opt__check { flex: 0 0 auto; color: var(--accent-gold); font-size: var(--font-label); opacity: 0; }
.csel-opt.is-selected .csel-opt__check { opacity: 1; }

.auto-process-field .app-input.auto-process-field__num,
.auto-process-field .app-input {
    /* 原 width: 2.75em 在 13px tabular-nums 下只有 ~36px，仅够显示 2 位数字；
     * 玩家反馈「输入 100 只显示 10」。放宽到能容纳 4-5 位常见数值（9999 / 10000）。
     * max-width 同步放宽避免被 5em 截断。 */
    width: 4em;
    min-width: 3.5em;
    max-width: 7em;
    min-height: 32px;
    padding: var(--space-4) var(--space-6);
    text-align: right;
    font-size: var(--font-body);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--ap-text) !important;
    box-shadow: none !important;
}

.auto-process-field .app-input:focus,
.auto-process-field select.app-input:focus {
    border-color: transparent;
    outline: none;
    box-shadow: none;
}

.auto-process-field select.app-input,
.auto-process-field .app-input.auto-process-field__select {
    width: auto;
    min-width: 5.5em;
    max-width: 11em;
    text-align: left;
    font-weight: 600;
    padding: var(--space-4) 0;
}

.auto-process-entry-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.auto-process-entry-card__text {
    min-width: 0;
}

.auto-process-entry-card__title {
    color: var(--ap-text);
    font-size: var(--font-body);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.auto-process-entry-card__desc {
    color: var(--ap-muted);
    font-size: var(--font-caption);
    line-height: 1.45;
}

.auto-process-save-status {
    min-height: 0;
    margin-top: var(--space-4);
    color: var(--ap-accent-2);
    font-size: var(--font-caption);
    text-align: left;
    line-height: 1.3;
}
.auto-process-save-status:empty {
    display: none;
    margin: 0;
}

.auto-process-actions .modal-btn {
    flex: 1;
    min-height: 40px;
    height: 40px;
    border-radius: var(--radius-md);
}

/* 扁平钮：覆盖旧实心渐变金钮 */
.auto-process-actions .modal-btn--outline,
body.game-page .auto-process-modal-overlay .auto-process-actions .modal-btn--outline {
    border-color: var(--ap-line);
    background: transparent !important;
    background-image: none !important;
    color: var(--ap-muted) !important;
    box-shadow: none !important;
}

.auto-process-actions .modal-btn--gold,
body.game-page .auto-process-modal-overlay .auto-process-actions .modal-btn--gold {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent) !important;
    background-image: none !important;
    color: var(--ap-accent-2) !important;
    box-shadow: none !important;
    filter: none;
}

.auto-process-actions .modal-btn--outline:hover,
.auto-process-actions .modal-btn--outline:focus-visible {
    border-color: var(--ap-line-strong) !important;
    color: var(--ap-text) !important;
}

.auto-process-actions .modal-btn--gold:hover,
.auto-process-actions .modal-btn--gold:focus-visible {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent) !important;
    filter: none;
}

/* 优先级列表 */
.auto-process-panel .auto-refill-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    min-height: 40px;
    margin-bottom: var(--space-6) !important;
    padding: var(--space-8) var(--space-10) !important;
    border: 1px solid var(--ap-line);
    border-radius: var(--radius-md) !important;
    background: color-mix(in srgb, var(--bg-panel) 55%, var(--bg-card)) !important;
    opacity: 1 !important;
}

.auto-process-panel .auto-refill-row:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
}

.auto-process-panel .auto-refill-row label {
    display: grid !important;
    grid-template-columns: 16px 22px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
    min-width: 0 !important;
    color: var(--ap-text) !important;
    font-size: var(--font-label) !important;
}

.auto-process-panel .auto-refill-toggle {
    accent-color: var(--ap-accent);
}

.auto-process-panel .auto-refill-rank {
    color: var(--ap-accent-2) !important;
    margin-right: 0 !important;
    font-variant-numeric: tabular-nums;
}

.auto-process-panel .auto-refill-actions {
    display: flex;
    gap: var(--space-4);
    flex-shrink: 0;
}

.auto-process-panel .auto-refill-actions .app-input {
    width: 28px;
    min-height: 28px;
    padding: 0 !important;
    text-align: center;
    border-color: var(--ap-line);
    background: transparent !important;
    color: var(--ap-muted) !important;
    border-radius: var(--radius-sm);
}

.auto-process-talisman-summary-field .auto-process-field__control {
    justify-content: flex-start;
    max-width: 100%;
    width: 100%;
}

.auto-process-talisman-summary {
    min-height: 32px;
    color: var(--ap-accent-2);
    font-size: var(--font-label);
    white-space: normal;
}

.auto-process-talisman-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.auto-process-talisman-option {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: 34px;
    border: 1px solid var(--ap-line);
    border-radius: var(--radius-md);
    padding: var(--space-6) var(--space-10);
    background: color-mix(in srgb, var(--bg-card-hover) 22%, transparent);
    color: var(--ap-text);
    font-size: var(--font-label);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.auto-process-talisman-option.is-selected {
    border-color: color-mix(in srgb, var(--ap-accent-2) 70%, var(--ap-line));
    background: color-mix(in srgb, var(--ap-accent-2) 12%, var(--bg-card-hover));
}

.auto-process-talisman-name {
    white-space: nowrap;
}

.auto-process-talisman-count {
    color: var(--ap-muted);
    font-size: var(--font-caption);
}

.auto-process-talisman-count--owned {
    color: var(--ap-accent-2);
}

.auto-process-talisman-empty {
    color: var(--ap-muted);
    font-size: var(--font-label);
    line-height: 1.5;
}

@keyframes autoProcessPulse {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.86);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 420px) {
    .auto-process-modal-overlay .modal-content.gc-dialog,
    .auto-process-modal-overlay .modal-content {
        width: min(96vw, 420px);
    }

    .auto-process-field {
        grid-template-columns: minmax(64px, 36%) minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auto-process-tab,
    .auto-process-loading__dot {
        animation: none;
        transition: none;
    }

    .auto-process-tab:hover {
        transform: none;
    }
}

/* 滑动开关 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-secondary, #ccc);
    border-radius: var(--radius-xl);
    transition: background 0.3s;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--text-jade, var(--accent-blue));
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.fw-slider-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

.fw-label {
    font-size: var(--font-label);
    color: var(--text-muted);
    flex-shrink: 0;
}

.fw-slider-wrap input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--border-color);
    border-radius: var(--radius-xs);
    outline: none;
}

.fw-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-gold);
    cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 6px color-mix(in srgb, var(--craft-gold) 40%, transparent);
}

.fw-value {
    font-size: var(--font-body);
    color: var(--color-action-primary);
    min-width: 30px;
    text-align: center;
    font-family: monospace;
}

.fw-preview {
    padding: var(--space-12);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-body-lg);
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: var(--space-16);
    text-align: center;
}

/* ===== 炼丹/炼器/制符 系统 ===== */

/* 炼造弹窗体系：主弹窗、许愿目标和从炼造内打开的二级弹窗共用 */
.craft-modal-overlay,
.equip-loadout-modal-overlay,
.craft-equipment-modal-overlay {
    --craft-modal-bg: var(--bg-panel);
    --craft-modal-panel: var(--bg-card);
    --craft-modal-raised: var(--bg-card-hover);
    --craft-modal-line: var(--border-color);
    --craft-modal-line-strong: var(--border-gold);
    
    
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .craft-modal-overlay,
    .equip-loadout-modal-overlay,
    .craft-equipment-modal-overlay {
        --craft-modal-line: color-mix(in srgb, var(--border-color) 78%, transparent);
        --craft-modal-line-strong: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
    }
}

/* 不支持 color-mix 的旧 WebView 兜底：凡 color-mix 装饰层一律关掉，只留实色底板。 */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .craft-modal-overlay .modal-content,
.equip-loadout-modal-overlay .modal-content,
.craft-equipment-modal-overlay .modal-content,
.craft-modal-overlay .modal-header-deco,
.equip-loadout-modal-overlay .modal-header-deco,
.craft-equipment-modal-overlay .modal-header-deco,
.craft-modal-overlay .craft-dialog-body,
.equip-loadout-modal .modal-body-padded,
.craft-equipment-body,
.craft-modal-overlay .craft-dialog-choice,
.equip-loadout-modal-overlay .craft-dialog-choice,
.craft-equipment-modal-overlay .craft-dialog-choice {
        background-color: var(--craft-modal-bg, var(--bg-panel)) !important;
        background-image: none !important;
        background: var(--craft-modal-bg, var(--bg-panel)) !important;
    }

    .craft-modal-overlay .modal-header-deco,
.equip-loadout-modal-overlay .modal-header-deco,
.craft-equipment-modal-overlay .modal-header-deco,
.craft-modal-overlay .craft-dialog-choice,
.equip-loadout-modal-overlay .craft-dialog-choice,
.craft-equipment-modal-overlay .craft-dialog-choice {
        background-color: var(--craft-modal-raised, var(--bg-card-hover)) !important;
        background: var(--craft-modal-raised, var(--bg-card-hover)) !important;
        background-image: none !important;
    }
}

/*
 * 炼造弹窗外壳：必须先有实色 background-color。
 * 部分浏览器（旧 Android WebView / 部分 iOS / 内置浏览器）会因多层 background 里的
 * color-mix(..., transparent) 整条声明失效而透底；把装饰只放 background-image，
 * 且与实色底板混色而不是 transparent，避免失败时退回透明。
 */
.craft-modal-overlay .modal-content,
.equip-loadout-modal-overlay .modal-content,
.craft-equipment-modal-overlay .modal-content,
html body.game-page .craft-modal-overlay .modal-content,
html body.game-page .equip-loadout-modal-overlay .modal-content,
html body.game-page .craft-equipment-modal-overlay .modal-content {
    width: min(94vw, 620px);
    max-width: 620px;
    max-height: min(92dvh, 760px);
    border: 1px solid var(--craft-modal-line-strong);
    border-radius: var(--radius-lg);
    /* 实色底板（永不依赖 color-mix） */
    background-color: var(--craft-modal-bg, var(--bg-panel, var(--bg-panel))) !important;
    background-image: none;
    background-repeat: no-repeat;
    /* 兼容旧选择器断言：保留不依赖 color-mix 的实底 background fallback */
    background: var(--craft-modal-bg, var(--bg-panel, var(--bg-panel))) !important;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .craft-modal-overlay .modal-content,
    .equip-loadout-modal-overlay .modal-content,
    .craft-equipment-modal-overlay .modal-content,
    html body.game-page .craft-modal-overlay .modal-content,
    html body.game-page .equip-loadout-modal-overlay .modal-content,
    html body.game-page .craft-equipment-modal-overlay .modal-content {
        /* 装饰层只写 image；混色终点用实色底板，失败时 background-color 仍不透明 */
        background-color: var(--craft-modal-bg, var(--bg-panel, var(--bg-panel))) !important;
        background-image:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--bg-card-hover) 18%, var(--craft-modal-bg, var(--bg-panel))),
                var(--craft-modal-bg, var(--bg-panel)) 36%
            ),
            radial-gradient(
                circle at 18% 0%,
                color-mix(in srgb, var(--accent-gold) 10%, var(--craft-modal-bg, var(--bg-panel))),
                var(--craft-modal-bg, var(--bg-panel)) 34%
            );
        background-repeat: no-repeat;
    }
}

.craft-modal-overlay .modal-header-deco,
.equip-loadout-modal-overlay .modal-header-deco,
.craft-equipment-modal-overlay .modal-header-deco,
html body.game-page .craft-modal-overlay .modal-header-deco,
html body.game-page .equip-loadout-modal-overlay .modal-header-deco,
html body.game-page .craft-equipment-modal-overlay .modal-header-deco {
    padding: var(--space-16) var(--space-24) var(--space-14);
    border-bottom: 1px solid var(--craft-modal-line);
    /* 标题栏也必须不透明：旧写法 62% card + transparent 会透出底层日志 */
    background-color: var(--craft-modal-panel, var(--bg-card, var(--bg-card))) !important;
    background-image: none;
    background: var(--craft-modal-panel, var(--bg-card, var(--bg-card))) !important;
    text-align: left;
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .craft-modal-overlay .modal-header-deco,
    .equip-loadout-modal-overlay .modal-header-deco,
    .craft-equipment-modal-overlay .modal-header-deco,
    html body.game-page .craft-modal-overlay .modal-header-deco,
    html body.game-page .equip-loadout-modal-overlay .modal-header-deco,
    html body.game-page .craft-equipment-modal-overlay .modal-header-deco {
        background-color: var(--craft-modal-panel, var(--bg-card, var(--bg-card))) !important;
        background-image:
            linear-gradient(
                90deg,
                color-mix(in srgb, var(--accent-gold) 11%, var(--craft-modal-panel, var(--bg-card))),
                var(--craft-modal-panel, var(--bg-card)) 66%
            );
        background-repeat: no-repeat;
    }
}

.craft-modal-overlay .modal-header-deco__subtitle,
.equip-loadout-modal-overlay .modal-header-deco__subtitle,
.craft-equipment-modal-overlay .modal-header-deco__subtitle {
    color: var(--text-gold) !important;
    font-size: var(--font-title);
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: none;
}

.craft-modal-overlay .modal-header-deco > div[style],
.equip-loadout-modal-overlay .modal-header-deco > div[style],
.craft-equipment-modal-overlay .modal-header-deco > div[style],
.craft-dialog-desc {
    color: var(--text-muted) !important;
    font-size: var(--font-label) !important;
    letter-spacing: 0 !important;
    line-height: 1.5;
}

.craft-dialog-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    min-height: 0;
    overflow-y: auto;
    background-color: var(--craft-modal-bg, var(--bg-panel)) !important;
    background-image: none;
    background: var(--craft-modal-bg, var(--bg-panel)) !important;
    padding-top: var(--space-8);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .craft-dialog-body {
        background-color: var(--craft-modal-bg, var(--bg-panel)) !important;
        background-image:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--bg-card-hover) 8%, var(--craft-modal-bg, var(--bg-panel))),
                var(--craft-modal-bg, var(--bg-panel)) 34%
            );
        background-repeat: no-repeat;
    }
}

.craft-dialog-body > .modal-info-card {
    margin-top: 0 !important;
}

.craft-dialog-summary {
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 1.65;
    white-space: pre-wrap;
}

.craft-dialog-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-height: 0;
    max-height: min(48dvh, 360px);
    overflow-y: auto;
    padding-right: var(--space-2);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent-gold) 34%, transparent) transparent;
}

.craft-dialog-list::-webkit-scrollbar { width: 5px; }
.craft-dialog-list::-webkit-scrollbar-track { background: transparent; }
.craft-dialog-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-gold) 30%, transparent);
    border-radius: var(--radius-xs);
}

.craft-dialog-choice {
    width: 100%;
    /* .craft-dialog-list 为 flex column 且带 max-height+overflow:auto。
       若允许 flex-shrink(默认1)，列表项会被压扁到 min-height:44px，
       其内部内容(尤其手机端纵向布局的丹炉：名称+说明+装备按钮)会向下溢出 item 边界，
       叠到下一个 item 的标题上。改为不收缩，超长时由列表滚动承担。 */
    flex-shrink: 0;
    min-height: 44px;
    padding: var(--space-12);
    border: 1px solid var(--craft-modal-line, var(--border-color));
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    background-color: var(--bg-panel);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
/* 与配方卡一致：纯纸面，不用斜向装饰渐变 */

.craft-dialog-choice:hover,
.craft-dialog-choice:focus-visible {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, var(--craft-modal-line, var(--border-color)));
    background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-panel));
    transform: none;
    outline: none;
}

.craft-dialog-choice__stats {
    text-align: right;
    flex: 0 0 auto;
}

.craft-dialog-choice__inscriptions {
    width: 100%;
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.45;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.craft-dialog-choice__inscriptions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2) var(--space-6);
    margin-top: var(--space-2);
}

.craft-dialog-choice__inscriptions .stat-inscription {
    max-width: 100%;
    margin: 0;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}

.craft-dialog-choice__inscriptions .stat-inscription svg {
    margin-right: var(--space-2);
    vertical-align: -2px;
}

.craft-furnace-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    cursor: default;
}

.craft-furnace-option:hover {
    transform: none;
}

.craft-furnace-option__main {
    min-width: 0;
}

.craft-furnace-option__name {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    font-weight: 700;
}

.craft-furnace-stage {
    flex: 0 0 auto;
    padding: var(--space-2) var(--space-6);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 18%, var(--border-color));
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-micro);
    font-weight: 500;
}

.craft-furnace-option__meta {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.craft-dialog-actions {
    margin-top: var(--space-4) !important;
    padding: var(--space-12) 0 0 !important;
    border-top: 1px solid var(--craft-modal-line);
}

.craft-dialog-actions .modal-btn {
    min-height: 40px;
    border-radius: var(--radius-md);
}

.craft-modal-shell {
    position: relative;
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   一键换装 · A 方案笺（gc-dialog gold · 手机优先）
   ═══════════════════════════════════════════════════════════════ */
.equip-loadout-modal-overlay .modal-content.eql-dialog {
    width: min(94vw, 480px);
    max-width: 480px;
    max-height: min(92dvh, 800px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.equip-loadout-modal-overlay .modal-content.eql-dialog.modal-content--self-scroll {
    overflow: hidden;
}

.eql-head {
    position: relative;
    padding: var(--space-14) var(--space-48) var(--space-10) var(--space-16);
    border-bottom: none;
    flex-shrink: 0;
}
.eql-head .gc-rule { margin-bottom: var(--space-10); }
.eql-head .modal-header-close {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
}

.eql-body,
.equip-loadout-modal.eql-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: var(--space-2) var(--space-14) var(--space-12);
    scrollbar-width: none;
    -ms-overflow-style: none;
    color: var(--text-primary);
    background: transparent !important;
}
.eql-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.eql-group,
.equip-loadout-group {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-14);
}
.eql-group__title,
.equip-loadout-group-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-8);
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    border-top: none;
    padding-top: 0;
}
.eql-group__title span,
.equip-loadout-group-title span {
    font-size: var(--font-caption);
    font-weight: 400;
    color: var(--text-muted);
}

.eql-card,
.equip-loadout-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    padding: var(--space-12);
    margin-top: 0 !important;
    min-width: 0;
}
.eql-card--empty { opacity: 0.92; }
/* 月卡过期后的第 4/5 套：仅供查看、重命名与删除，不渲染穿/存按钮 */
.eql-card--locked { opacity: 0.72; border-style: dashed; }

.eql-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-10);
    margin-bottom: var(--space-8);
}
.eql-card__name {
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}
.eql-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-6);
}
.eql-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
    font-size: var(--font-caption);
    color: var(--text-muted);
    background: var(--bg-card);
}
.eql-badge--ok {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    color: var(--text-jade, var(--accent-jade));
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .eql-badge--ok {
        border-color: var(--border-color);
    }
}
.eql-badge--muted { color: var(--text-muted); }

.eql-card__tools {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 0 0 auto;
}
.eql-rename,
.equip-loadout-rename,
.eql-delete,
.equip-loadout-delete {
    flex: 0 0 auto;
    min-height: 32px;
    min-width: 44px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-label);
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    padding: var(--space-4) var(--space-2);
    -webkit-tap-highlight-color: transparent;
}
.eql-rename:hover,
.eql-rename:focus-visible,
.equip-loadout-rename:hover,
.equip-loadout-rename:focus-visible {
    color: var(--text-gold);
    outline: none;
}
.eql-delete:hover,
.eql-delete:focus-visible,
.equip-loadout-delete:hover,
.equip-loadout-delete:focus-visible {
    color: var(--accent-crimson, var(--accent-crimson));
    outline: none;
}

.eql-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}
.eql-item,
.equip-loadout-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    font-size: var(--font-label);
    line-height: 1.4;
}
.eql-slot,
.equip-loadout-slot {
    flex-shrink: 0;
    min-width: 40px;
    text-align: center;
    font-size: var(--font-micro);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: transparent;
}
.eql-item__name {
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eql-item__missing,
.equip-loadout-item__missing {
    color: var(--text-muted);
    font-style: italic;
}
.eql-item__eq,
.equip-loadout-equipped {
    flex-shrink: 0;
    font-size: var(--font-micro);
    color: var(--text-jade, var(--accent-jade));
    border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    border-radius: var(--radius-xs);
    padding: var(--space-2) var(--space-6);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .eql-item__eq,
    .equip-loadout-equipped {
        border-color: var(--border-color);
    }
}
.eql-empty,
.equip-loadout-empty {
    text-align: center;
    padding: var(--space-14) var(--space-8);
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-bottom: var(--space-8);
}

.eql-skill-link {
    display: grid;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px solid var(--border-color);
}
.eql-skill-link__label {
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-weight: 600;
}
/* #6280：字段入口（对齐 App 点选），避免可滚动 modal 内 native/FixedSelect 点不开 */
.eql-skill-link__field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-10) var(--space-12);
    box-sizing: border-box;
    border: 1px solid var(--border-gold, var(--border-color));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 6%, var(--bg-card, var(--bg-panel)));
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .eql-skill-link__field {
        background: var(--bg-card, var(--bg-panel));
    }
}
.eql-skill-link__field:hover,
.eql-skill-link__field:focus-visible {
    outline: none;
    border-color: var(--accent-gold, var(--border-gold));
    color: var(--text-gold, var(--accent-gold));
}
.eql-skill-link__value {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}
.eql-skill-link__value.is-linked {
    color: var(--text-gold, var(--accent-gold));
}
.eql-skill-link__chev {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--text-muted);
    opacity: 0.7;
}
.eql-skill-link__hint {
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.5;
}

/* #6280 叠层技能套装选择器（保留底层一键换装） */
.eql-skill-pick-overlay .modal-content.eql-skill-pick-dialog {
    width: min(90vw, 392px);
    max-width: 392px;
    max-height: min(88dvh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.eql-skill-pick__head {
    flex-shrink: 0;
    padding: var(--space-14) var(--space-48) var(--space-10) var(--space-16);
}
.eql-skill-pick__mid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: var(--space-4) var(--space-14) var(--space-12);
}
.eql-skill-pick__desc {
    margin-bottom: var(--space-10);
    text-align: left;
}
.eql-skill-pick__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.eql-skill-pick__opt {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10);
    min-height: 44px;
    margin: 0;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel, var(--bg-card));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.eql-skill-pick__opt input {
    flex: 0 0 auto;
    margin-top: var(--space-4);
    accent-color: var(--accent-gold, #c9a227);
}
.eql-skill-pick__opt-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.eql-skill-pick__opt-title {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}
.eql-skill-pick__opt-sub {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
}
.eql-skill-pick__opt.is-on {
    border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 48%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 10%, var(--bg-panel, var(--bg-card)));
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .eql-skill-pick__opt.is-on {
        border-color: var(--border-gold, var(--border-color));
    }
}
.eql-skill-pick__opt.is-on .eql-skill-pick__opt-title {
    color: var(--text-gold, var(--accent-gold));
}
.eql-skill-pick__empty {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.5;
}
.eql-skill-pick__foot {
    flex-shrink: 0;
    padding: var(--space-10) var(--space-14) var(--space-14);
}

.eql-actions,
.equip-loadout-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
/* 宽屏：保存 | 穿上 并排 */
@media (min-width: 480px) {
    .eql-actions:not(.eql-actions--single),
    .equip-loadout-actions:not(.eql-actions--single) {
        grid-template-columns: 1fr 1fr;
    }
}
/* 手机：穿上置顶（order） */
@media (max-width: 479px) {
    .eql-actions:not(.eql-actions--single) .eql-btn--gold {
        order: -1;
    }
}
/* 桌面：叠层选择器可略宽，仍落在 compact～standard 之间 */
@media (min-width: 480px) {
    .eql-skill-pick-overlay .modal-content.eql-skill-pick-dialog {
        width: min(92vw, 480px);
        max-width: 480px;
    }
}
.eql-actions--single { grid-template-columns: 1fr; }

.eql-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-body);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
.eql-btn--gold {
    border-color: var(--border-gold, rgba(183, 120, 31, 0.40));
    background: var(--gradient-gold, rgba(183, 120, 31, 0.12));
    color: var(--text-gold);
    font-weight: 600;
}
.eql-btn--gold:hover {
    background: color-mix(in srgb, var(--accent-gold) 20%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .eql-btn--gold:hover {
        background: var(--gradient-gold, rgba(183, 120, 31, 0.18));
    }
}
.eql-btn--outline:hover {
    border-color: var(--border-gold, var(--border-color));
    color: var(--text-primary);
}

.eql-note,
.equip-loadout-note {
    margin-top: var(--space-2);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.65;
    text-align: center;
}

.eql-dialog .gc-foot {
    flex-shrink: 0;
    padding: var(--space-10) var(--space-14) max(var(--space-12), env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}
.eql-dialog .gc-foot .modal-btn {
    min-height: 44px;
    height: 44px;
}

.craft-equipment-modal-overlay {
    color: var(--text-primary);
}
.craft-equipment-shell {
    min-height: 0;
}

/* 主弹窗尺寸 */
.alchemy-modal.modal--decorated {
    width: min(94vw, 640px);
    max-width: 640px;
}

@media (max-width: 640px) {
    .equip-loadout-modal-overlay .modal-content.eql-dialog {
        width: min(96vw, 480px);
        max-height: 94dvh;
        border-radius: var(--radius-lg);
    }
    .eql-body,
    .equip-loadout-modal.eql-body {
        padding: var(--space-2) var(--space-12) var(--space-10);
    }

    .craft-modal-overlay .modal-content,
    .craft-equipment-modal-overlay .modal-content {
        width: min(96vw, 560px);
        max-height: 94dvh;
        border-radius: var(--radius-md);
    }

    .craft-modal-overlay .modal-header-deco,
    .craft-equipment-modal-overlay .modal-header-deco {
        padding: var(--space-14) var(--space-16) var(--space-12);
    }

    .craft-dialog-body {
        padding: var(--space-12) !important;
    }

    .craft-dialog-choice__stats {
        text-align: left;
    }

    .craft-furnace-option {
        align-items: stretch;
        flex-direction: column;
    }
    /* 更换丹炉弹窗：手机端装备按钮占满整行。button 默认 inline-block，
       即便父级 flex 的 align-items:stretch 在部分浏览器对 button 不生效，
       显式 width:100% + box-sizing 能兜底保证按钮与名称行对齐。 */
    .craft-furnace-option > .btn-craft,
    .craft-furnace-option > button {
        width: 100%;
        box-sizing: border-box;
    }

    .craft-dialog-actions {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--space-8);
    }

    .equip-loadout-modal .modal-body-padded,
    .craft-equipment-body {
        padding: var(--space-12) !important;
    }

    .craft-equipment-body .modal-action-list {
        grid-template-columns: 1fr;
    }

    .alchemy-modal.modal--decorated {
        max-height: 94dvh;
        width: 94%;
        max-width: none;
    }
    .crafting-tab {
        padding: var(--space-6) var(--space-14);
        font-size: var(--font-body);
    }
    .alchemy-body {
        padding: var(--space-8) var(--space-10) var(--space-12);
        gap: var(--space-6);
    }
}
.crafting-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.crafting-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-body-lg);
    padding: var(--space-8) var(--space-20);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    letter-spacing: 2px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.crafting-tab:hover {
    color: var(--text-primary);
    background: var(--glass-white-2);
}
.crafting-tab.active {
    color: var(--accent-gold);
    border-bottom-color: var(--accent-gold);
}

/* 主体可滚动容器 */
.alchemy-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-12) var(--space-16) var(--space-16);
    gap: var(--space-10);
    overflow: hidden;
}

/* === 炉子信息卡 · 工坊笺 v2（分段概率条 + 元信息行，无左轨/无顶条） === */
.alchemy-furnace-bar,
.craft-furnace-card {
    margin-top: 0;
    padding: var(--space-12) var(--space-12) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: none;
    box-sizing: border-box;
}
.furnace-row,
.craft-furnace-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-10) var(--space-12);
    flex-wrap: wrap;
}
.craft-furnace-card__title-wrap {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    flex: 1 1 140px;
}
.craft-furnace-card__kicker {
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    line-height: 1.2;
}
.furnace-name {
    color: var(--text-primary);
    font-size: var(--font-action);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.35;
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-display, var(--font-serif));
}
.furnace-name::before {
    content: none;
    display: none;
}
.furnace-actions {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    align-items: center;
}
.furnace-actions__btns {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}
/* 炉卡操作钮：扁平、矮一档，与主炼制钮区分 */
.furnace-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 28px;
    min-height: 28px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font: inherit;
    font-size: var(--font-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.furnace-btn:active { opacity: 0.88; }
.furnace-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.furnace-btn--ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--border-color) 85%, transparent);
    color: var(--text-secondary);
}
.furnace-btn--ghost:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-gold) 32%, var(--border-color));
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}
.furnace-btn--jade {
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 38%, transparent);
    color: var(--text-jade, var(--accent-jade));
}
.furnace-btn--jade:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 52%, transparent);
}
.furnace-row-trail {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    flex: 0 1 auto;
    justify-content: flex-end;
}
.furnace-collapse-toggle {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    color: var(--text-muted);
    min-height: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-8);
    flex: none;
    font-size: var(--font-caption);
    font-weight: 600;
    line-height: 1;
    gap: var(--space-4);
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
    box-sizing: border-box;
}
.furnace-collapse-toggle:hover {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}
.furnace-collapse-label {
    display: none;
}
@media (max-width: 640px) {
    .furnace-collapse-toggle {
        min-height: 36px;
        padding: 0 var(--space-12);
        font-size: var(--font-label);
        border-radius: var(--radius-md);
    }
    .furnace-collapse-label {
        display: inline;
    }
}
.furnace-collapse-arrow {
    line-height: 1;
}
/* 收起时：只留标题行，隐藏 body */
.alchemy-furnace-bar.collapsed .furnace-collapse-arrow {
    transform: rotate(-90deg);
}
.alchemy-furnace-bar.collapsed .craft-furnace-card__body,
.alchemy-furnace-bar.collapsed .alchemy-chances,
.alchemy-furnace-bar.collapsed .craft-influence-row,
.alchemy-furnace-bar.collapsed .spirit-warn,
.alchemy-furnace-bar.collapsed .forge-mastery-bar {
    display: none !important;
}
.alchemy-furnace-bar.collapsed {
    gap: 0;
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
}
@media (max-width: 640px) {
    .alchemy-furnace-bar.collapsed {
        padding-top: var(--space-10);
        padding-bottom: var(--space-10);
    }
    .alchemy-furnace-bar.collapsed .furnace-name {
        font-size: var(--font-body);
    }
}
.alchemy-furnace-bar.collapsed ~ .wish-slot-bar {
    display: none !important;
}

.craft-furnace-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    min-width: 0;
    padding-top: 0;
}
.craft-furnace-card__body:empty {
    display: none;
}

/* 品阶概率：分段条 + 图例 */
.alchemy-chances {
    display: block;
    min-width: 0;
}
.alchemy-chances:empty {
    display: none;
}
.chance-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    min-width: 0;
}
.chance-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    background: color-mix(in srgb, var(--text-primary) 5%, var(--bg-panel));
    gap: var(--space-2);
}
.chance-bar__seg {
    min-width: 0;
    height: 100%;
    border-radius: var(--radius-xs);
}
.chance-bar__seg.rarity-1 { background: color-mix(in srgb, var(--rarity-1) 55%, transparent); }
.chance-bar__seg.rarity-2 { background: color-mix(in srgb, var(--rarity-2) 70%, transparent); }
.chance-bar__seg.rarity-3 { background: color-mix(in srgb, var(--rarity-3) 75%, transparent); }
.chance-bar__seg.rarity-4 { background: color-mix(in srgb, var(--rarity-4) 80%, transparent); }
.chance-bar__seg.rarity-5 { background: color-mix(in srgb, var(--rarity-5) 85%, transparent); }
.chance-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-10);
}
.chance-leg {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--font-caption);
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.chance-leg i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
    background: currentColor;
}
.chance-leg em {
    font-style: normal;
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    color: var(--text-primary);
}
.chance-leg.rarity-1 { color: var(--rarity-1); }
.chance-leg.rarity-1 em { color: var(--rarity-1); }
.chance-leg.rarity-2 { color: var(--rarity-2); }
.chance-leg.rarity-2 em { color: var(--rarity-2); }
.chance-leg.rarity-3 { color: var(--rarity-3); }
.chance-leg.rarity-3 em { color: var(--rarity-3); }
.chance-leg.rarity-4 { color: var(--rarity-4); }
.chance-leg.rarity-4 em { color: var(--rarity-4); }
.chance-leg.rarity-5 { color: var(--rarity-5); }
.chance-leg.rarity-5 em { color: var(--rarity-5); }
/* 旧 chip 兼容（别处若仍引用） */
.chance-tag {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    font-size: var(--font-caption);
    font-weight: 600;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    line-height: 1.4;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}
.chance-tag.rarity-1 { color: var(--rarity-1); }
.chance-tag.rarity-2 { color: var(--rarity-2); border-color: color-mix(in srgb, var(--rarity-2) 34%, var(--border-color)); background: color-mix(in srgb, var(--rarity-2) 8%, transparent); }
.chance-tag.rarity-3 { color: var(--rarity-3); border-color: color-mix(in srgb, var(--rarity-3) 36%, var(--border-color)); background: color-mix(in srgb, var(--rarity-3) 9%, transparent); }
.chance-tag.rarity-4 { color: var(--rarity-4); border-color: color-mix(in srgb, var(--rarity-4) 40%, var(--border-color)); background: color-mix(in srgb, var(--rarity-4) 10%, transparent); }
.chance-tag.rarity-5 { color: var(--rarity-5); border-color: color-mix(in srgb, var(--rarity-5) 44%, var(--border-color)); background: color-mix(in srgb, var(--rarity-5) 12%, transparent); }

/* 影响项：元信息列表 */
.craft-influence-row {
    display: block;
    min-width: 0;
}
.craft-influence-row:empty {
    display: none;
}
.craft-inf-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 78%, var(--bg-card));
    padding: var(--space-2) 0;
}
.craft-inf {
    display: grid;
    grid-template-columns: minmax(72px, 0.38fr) minmax(0, 1fr);
    gap: var(--space-8) var(--space-12);
    align-items: baseline;
    padding: var(--space-8) var(--space-12);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
    font-size: var(--font-caption);
    line-height: 1.45;
}
.craft-inf:first-child { border-top: 0; }
.craft-inf__k {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    min-width: 0;
}
.craft-inf__v {
    color: var(--text-muted);
    min-width: 0;
    word-break: break-word;
}
.craft-inf--positive .craft-inf__k { color: var(--text-jade, var(--accent-jade)); }
.craft-inf--negative .craft-inf__k { color: var(--text-red, var(--accent-crimson)); }

/* 神识提示：纯文字行，不再叠框 */
.spirit-warn {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.5;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: 0;
    background: transparent;
}
.spirit-warn.spirit-warn--danger {
    color: var(--text-red, var(--accent-crimson));
    border: 0;
    background: transparent;
}
.spirit-warn.spirit-warn--danger::before {
    content: none;
}

/* 熟练度行：轻底，少一层框感 */
.forge-mastery-bar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-label);
    padding: var(--space-8) var(--space-10);
    border: 0;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 78%, var(--bg-card));
}
.mastery-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-gold, var(--accent-gold));
    font-weight: 700;
    white-space: nowrap;
    font-size: var(--font-label);
    letter-spacing: 0.3px;
}
.mastery-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-gold, var(--accent-gold));
    font: inherit;
    font-size: var(--font-label);
    line-height: 1;
    cursor: pointer;
}
.mastery-info-btn:hover {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
}
.mastery-progress {
    flex: 1;
    height: 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    overflow: hidden;
    min-width: 60px;
    box-shadow: none;
    box-sizing: border-box;
}
.mastery-fill {
    height: 100%;
    min-width: 4px;
    background: color-mix(in srgb, var(--accent-gold) 62%, transparent);
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
    box-shadow: none;
}
.mastery-fill[style*="width:0%"] {
    min-width: 0;
}
.mastery-exp {
    color: var(--text-secondary);
    font-size: var(--font-caption);
    font-weight: 600;
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}

/* === 二级 Tab（配方分类） - 轻量下划线样式 === */
.craft-subtabs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
}
.craft-subtab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-label);
    padding: var(--space-6) var(--space-10);
    cursor: pointer;
    border-radius: 0;
    transition: color 0.2s, border-color 0.2s;
    letter-spacing: 0.5px;
    margin-bottom: calc(-1 * var(--space-2));
}
.craft-subtab:hover {
    color: var(--text-primary);
}
.craft-subtab.active {
    color: var(--accent-gold);
    border-bottom-color: var(--accent-gold);
    background: transparent;
}
.craft-subtab .craft-subtab-count {
    margin-left: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-micro);
    opacity: 0.7;
}
.craft-subtab.active .craft-subtab-count {
    color: color-mix(in srgb, var(--accent-gold) 65%, transparent);
}

/* === 配方列表区 === */
.alchemy-recipes {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent-gold) 35%, transparent) transparent;
}
.alchemy-recipes::-webkit-scrollbar { width: 5px; }
.alchemy-recipes::-webkit-scrollbar-track { background: transparent; }
.alchemy-recipes::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-gold) 28%, transparent);
    border-radius: var(--radius-xs);
}
.alchemy-recipes::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

/* === 配方卡片 · A 工坊笺（无左轨 / 无顶条） === */
.craft-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    overflow: hidden;
}
.craft-card::before {
    content: none;
    display: none;
}
.craft-card:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-panel));
    transform: none;
}
.craft-card.craft-card-blueprint {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-panel));
    box-shadow: none;
}
.craft-card.craft-card-blueprint:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 9%, var(--bg-panel));
}
.craft-card.craft-card-disabled {
    opacity: 0.62;
}
.craft-card.craft-card-disabled:hover {
    border-color: var(--border-color);
    background: var(--bg-panel);
    transform: none;
}
.craft-card.craft-card--wish-target,
.craft-card.craft-card--wish-target:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 42%, var(--accent-gold));
    background: color-mix(in srgb, var(--accent-jade) 7%, var(--bg-panel));
    box-shadow: none;
    opacity: 1;
}
.craft-card.craft-card--wish-target.craft-card-disabled,
.craft-card.craft-card--wish-target.craft-card-disabled:hover {
    opacity: 0.82;
    background: color-mix(in srgb, var(--accent-jade) 5%, var(--bg-panel));
}

/* 卡片头部：名称、徽章、灵力/神识 chip */
.craft-card-topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-8) var(--space-10);
    padding-bottom: 0;
    border-bottom: none;
}
.craft-card-title-wrap {
    min-width: 0;
    display: grid;
    gap: var(--space-6);
}
/* #5945：品名 + 成品持有量同一行，窄屏可折 */
.recipe-name-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    min-width: 0;
}
.recipe-name {
    min-width: 0;
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.2px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.recipe-owned {
    flex: 0 0 auto;
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.recipe-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.recipe-kind-badge,
.bp-badge,
.recipe-type-badge,
.recipe-stage-badge,
.recipe-no-exp,
.recipe-wish-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.2px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    white-space: nowrap;
}
.recipe-kind-badge {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}
.bp-badge {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold) 46%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
}
.recipe-type-badge {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
}
.recipe-stage-badge {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}
.recipe-stage-badge-low,
.recipe-no-exp {
    color: var(--text-red, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent-crimson) 8%, transparent);
}
.recipe-no-exp {
    border-style: dashed;
}
.recipe-wish-badge {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}

/* 灵力 / 神识 消耗 chip */
.recipe-cost-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    flex-shrink: 0;
    justify-content: flex-end;
    max-width: 100%;
}
.recipe-mp-cost {
    font-size: var(--font-caption);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.recipe-mp-cost.recipe-cost-spirit {
    color: var(--text-gold, var(--accent-gold));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
}

.craft-card-desc-row,
.craft-card-content {
    display: grid;
    gap: var(--space-8);
    min-width: 0;
    max-width: 100%;
}

/* 配方描述：软底段落，无左边轨 */
.recipe-desc {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.55;
    padding: var(--space-8) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-card) 72%, transparent);
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}
.recipe-desc-label {
    color: var(--text-gold, var(--accent-gold));
    font-size: var(--font-micro);
    font-weight: 700;
    margin-right: var(--space-6);
    letter-spacing: 0.4px;
}

/* 配方成功率行（制符用） */
.recipe-rate-row {
    display: flex;
    gap: var(--space-10);
    flex-wrap: wrap;
    align-items: center;
    font-size: var(--font-caption);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    padding: var(--space-2) 0;
}
.recipe-rate-success { color: var(--text-jade, var(--accent-jade)); font-weight: 600; }
.recipe-rate-success.warn { color: var(--text-gold, var(--accent-gold)); }
.recipe-rate-success.danger { color: var(--text-red, var(--accent-crimson)); }
.recipe-rate-fail { color: var(--text-red, var(--accent-crimson)); opacity: 0.8; }

/* 材料列表：圆角 chip */
.recipe-mats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    font-size: var(--font-caption);
    line-height: 1.45;
    align-items: center;
}
.recipe-mats-label {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.4px;
    margin-right: var(--space-2);
}
.recipe-mats .mat-ok,
.recipe-mats .mat-lack,
.inc-mats .mat-ok,
.inc-mats .mat-lack {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-sm);
    font-size: var(--font-caption);
    line-height: 1.4;
    border: 1px solid;
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    background: var(--bg-card);
}
.recipe-mats button.mat-ok,
.recipe-mats button.mat-lack,
.inc-mats button.mat-ok,
.inc-mats button.mat-lack {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    font: inherit;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    color: inherit;
}
.mat-ok {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}
.mat-lack {
    color: var(--text-red, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent-crimson) 7%, transparent);
}

/* 装备属性 chip */
.forge-stat-tags {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.forge-stat-tag {
    font-size: var(--font-caption);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
.forge-stat-atk { color: var(--text-red, var(--accent-crimson)); }
.forge-stat-def { color: var(--accent-cyan, var(--ghost-purple)); }
.forge-stat-hp  { color: var(--text-jade, var(--accent-jade)); }
.forge-stat-mp  { color: color-mix(in srgb, var(--accent-jade) 55%, var(--accent-cyan, #6ab)); }
.forge-stat-spr,
.forge-stat-cap { color: var(--text-gold, var(--accent-gold)); }

/* 卡片底部按钮区 */
.craft-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-top: var(--space-2);
    padding-top: var(--space-10);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
}

/* === 按钮（统一金/翠扁平 · A 工坊笺） === */
.btn-craft {
    flex-shrink: 0;
    min-height: 36px;
    padding: 0 var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-gold, var(--accent-gold));
    border-radius: var(--radius-md);
    font-size: var(--font-label);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
    font-family: inherit;
    white-space: nowrap;
    letter-spacing: 0.5px;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}
.btn-craft:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, var(--border-color));
    box-shadow: none;
}
.btn-craft:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--border-color);
    color: var(--text-muted);
    background: var(--bg-card);
    box-shadow: none;
}
.btn-craft-sm {
    font-size: var(--font-label);
    min-height: 32px;
    padding: 0 var(--space-10);
    letter-spacing: 0.5px;
}
.btn-craft.btn-batch {
    border-color: var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
}
.btn-craft.btn-quickbuy {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    color: var(--text-jade);
}
/* 配方旁快捷许愿 */
.btn-craft.btn-wish {
    border-color: color-mix(in srgb, var(--accent-purple, #9b7bb8) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent-purple, #9b7bb8) 12%, transparent);
    color: var(--accent-purple, #9b7bb8);
}
.btn-craft.btn-wish:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-purple, #9b7bb8) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-purple, #9b7bb8) 55%, var(--border-color));
}
.btn-craft.btn-wish.is-on {
    border-color: color-mix(in srgb, var(--accent-gold) 50%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
    color: var(--text-gold, var(--accent-gold));
}
.recipe-wish-grade-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-4);
}
.recipe-wish-grade-btn {
    min-height: 40px;
    font-weight: 700;
}

/* 升阶面板 · A · #6237 头区纵排，一键钮高对比始终可见 */
.craft-pu-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
    padding: 0 0 var(--space-8);
    width: 100%;
    box-sizing: border-box;
}
.craft-pu-head__text {
    min-width: 0;
    width: 100%;
    flex: 0 0 auto;
}
.craft-pu-all-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    justify-content: stretch;
    box-sizing: border-box;
}
.craft-pu-all {
    flex: 1 1 calc(50% - 4px);
    min-width: 132px;
    min-height: 44px;
    font-weight: 700;
    /* 压过 .alchemy-modal .btn-craft 浅透明底，避免浅色主题下「像没按钮」 */
    border-width: 1px !important;
    border-style: solid !important;
}
.craft-pu-all--primary {
    border-color: color-mix(in srgb, var(--accent-gold) 60%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent-gold) 22%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}
.craft-pu-all--jade {
    border-color: color-mix(in srgb, var(--accent-jade, #3d8b6e) 55%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent-jade, #3d8b6e) 18%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
}
html.theme-light .craft-pu-all--primary {
    border-color: color-mix(in srgb, var(--accent-crimson) 42%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent-crimson) 12%, var(--bg-card)) !important;
    color: var(--accent-crimson) !important;
}
html.theme-light .craft-pu-all--jade {
    border-color: color-mix(in srgb, var(--success-color, #2f7a5f) 48%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--success-color, #2f7a5f) 14%, var(--bg-card)) !important;
    color: var(--success-color, #2f7a5f) !important;
}
.craft-pu-all:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}
.btn-craft-fixed {
    flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   批量炼制 / 锻造 / 绘制 · cb-* 工坊笺
   flat gc-dialog：无 craft-dialog-shell 嵌套；高度随内容自适应
   ═══════════════════════════════════════════════════════════ */
.craft-modal-overlay .cb-dialog.gc-dialog,
.cb-dialog.gc-dialog {
    max-width: min(392px, 94vw);
    width: min(392px, 94vw);
}
.craft-batch-dialog,
.cb-mid.craft-batch-dialog {
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: left;
    padding-top: var(--space-4);
}
/* flat 批量：去掉旧 shell 默认间距干扰 */
.craft-dialog-body.craft-batch-dialog.cb-mid {
    padding: var(--space-10) var(--space-16) var(--space-12);
}

.cb-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-14);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 9%, var(--bg-card));
    margin-bottom: var(--space-12);
}
.cb-product__name {
    font-family: var(--font-serif, "Songti SC", STSong, serif);
    font-size: var(--font-title);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.cb-product__meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.45;
}
.cb-product__kind {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 var(--space-10);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    color: var(--text-secondary);
}
.cb-product__kind--pill {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 36%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}
.cb-product__kind--forge {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
}
.cb-product__kind--talisman {
    color: var(--text-purple, var(--accent-purple, #9b7bb8));
    border-color: color-mix(in srgb, var(--accent-purple, #9b7bb8) 36%, transparent);
    background: color-mix(in srgb, var(--accent-purple, #9b7bb8) 12%, transparent);
}

.cb-lead {
    margin: 0 0 var(--space-12);
    font-size: var(--font-label);
    line-height: 1.55;
    color: var(--text-secondary);
}
.cb-field-label {
    display: block;
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-8);
}
.cb-count-wrap {
    position: relative;
    margin-bottom: var(--space-10);
}
.cb-count,
.craft-batch-dialog .cb-count.app-input {
    width: 100%;
    box-sizing: border-box;
    height: 48px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
    background: var(--bg-input, var(--bg-card));
    color: var(--text-gold);
    font: inherit;
    font-size: var(--font-page-title);
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: 0 var(--space-40) 0 var(--space-12);
    -moz-appearance: textfield;
}
.cb-count::-webkit-outer-spin-button,
.cb-count::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cb-count:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 12%, transparent);
}
.cb-count-unit {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-label);
    color: var(--text-muted);
    pointer-events: none;
}

.cb-quick {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.cb-quick__btn {
    min-height: 28px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-label);
    cursor: pointer;
}
.cb-quick__btn.is-on {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    font-weight: 700;
}
.cb-quick__btn:active { opacity: 0.88; }

.cb-auto-refill {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10);
    margin: var(--space-2) 0 var(--space-12);
    padding: var(--space-10) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 32%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-panel, var(--bg-card)));
    color: var(--text-primary);
    cursor: pointer;
}
.cb-auto-refill input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: var(--space-2) 0 0;
    accent-color: var(--accent-jade);
}
.cb-auto-refill span {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    font-size: var(--font-label);
    line-height: 1.4;
}
.cb-auto-refill strong { font-weight: 700; }
.cb-auto-refill small { color: var(--text-muted); font-size: var(--font-caption); }

.cb-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}
.cb-fact {
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    background: var(--bg-panel, var(--bg-card));
}
.cb-fact__k {
    font-size: var(--font-micro);
    color: var(--text-muted);
    letter-spacing: 0.4px;
}
.cb-fact__v {
    margin-top: var(--space-4);
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.cb-fact__v.is-gold { color: var(--text-gold); }
.cb-fact__v.is-muted { color: var(--text-muted); font-weight: 600; }

.cb-note {
    margin: var(--space-12) 0 0;
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-muted);
}

/* 批量：金色描边次要按钮（透明底） */
.btn-batch {
    background: transparent;
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    color: color-mix(in srgb, var(--accent-gold) 85%, #fff);
}
.btn-batch:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border-color: var(--accent-gold);
    box-shadow: none;
}
/* 补充材料：翠玉色调（生机/丹药感） */
.btn-quickbuy {
    background: transparent;
    border-color: color-mix(in srgb, var(--accent-jade) 60%, transparent);
    color: color-mix(in srgb, var(--accent-jade) 90%, #fff);
}
.btn-quickbuy:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    border-color: var(--accent-jade);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-jade) 25%, transparent);
}

/* 空状态 */
.craft-empty {
    text-align: center;
    padding: var(--space-40) 0;
    color: var(--text-muted);
    font-size: var(--font-body);
    letter-spacing: 1px;
}
.craft-empty::before {
    content: '✦';
    display: block;
    color: color-mix(in srgb, var(--accent-gold) 60%, transparent);
    font-size: var(--font-page-title);
    margin-bottom: var(--space-8);
}

.craft-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    min-height: 168px;
    padding: var(--space-32) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-radius: var(--radius-md);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 6%, transparent), transparent 62%),
        color-mix(in srgb, var(--bg-card-hover) 18%, transparent);
    color: var(--text-muted);
    font-size: var(--font-body);
}

.craft-loading-state__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-gold);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-gold) 30%, transparent);
    animation: craftLoadingPulse 1.1s ease-in-out infinite;
}

.craft-loading-state__text {
    line-height: 1.5;
}

@keyframes craftLoadingPulse {
    0%, 100% {
        opacity: 0.45;
        transform: scale(0.85);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* #7966+#10851：批量一次 HTTP 无真百分比。整屏遮罩改为顶部细进度条 + 透明点击护层：
   护层仍拦截误触，但炼造画面不再被盖掉；填充为模拟推进（快进渐缓至 ~90%，响应即满格），
   「炉火未歇」冷却复用同一根条按剩余时间倒计时。 */
.craft-batch-progress {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-10, 8px) var(--space-14, 12px) 0;
    background: transparent;
}

.craft-batch-progress__bar {
    pointer-events: none;
    padding: var(--space-8, 6px) var(--space-12, 10px);
    border: 1px solid var(--craft-modal-line-strong, var(--border-gold));
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--craft-modal-bg, var(--bg-panel)) 94%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.craft-batch-progress__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8, 8px);
}

.craft-batch-progress__title {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.craft-batch-progress__meta {
    flex: none;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
}

.craft-batch-progress__track {
    margin-top: var(--space-6, 5px);
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.craft-batch-progress__fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-gold, #c8a04a), var(--accent-jade, var(--accent-gold, #7fae8a)));
    transition: width 0.24s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .craft-batch-progress__fill {
        transition: none;
    }

    .craft-loading-state__dot {
        animation: none;
    }
}

/* ===== 化身面板 ===== */

/* 化身面板外壳卡片（金色调 modal-info-card 变体） */
#incarnationCraftPanel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent-gold) 35%, transparent) transparent;
}
#incarnationCraftPanel::-webkit-scrollbar { width: 5px; }
#incarnationCraftPanel::-webkit-scrollbar-track { background: transparent; }
#incarnationCraftPanel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-gold) 28%, transparent);
    border-radius: var(--radius-xs);
}
#incarnationCraftPanel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

.inc-panel-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

/* C · 阶梯折叠：纸面栈 + 默认收起分卷 */
.inc-panel-card--c {
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12) var(--space-14);
    box-sizing: border-box;
    --inv-wb-raised: var(--bg-panel);
}

.inc-fold {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    overflow: hidden;
}

.inc-fold__head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-10);
    min-height: 44px;
    padding: var(--space-10) var(--space-12);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.inc-fold__head:hover {
    background: color-mix(in srgb, var(--accent-gold) 4%, transparent);
}

.inc-fold__title {
    font-family: var(--font-serif, inherit);
    font-size: var(--font-label);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-gold, var(--accent-gold));
}

.inc-fold__hint {
    flex: 0 0 auto;
    font-size: var(--font-micro);
    font-weight: 600;
    color: var(--text-muted);
}

.inc-fold.is-open .inc-fold__hint {
    color: var(--text-gold, var(--accent-gold));
}

.inc-fold__body {
    display: none;
    padding: 0 var(--space-12) var(--space-12);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

.inc-fold.is-open .inc-fold__body {
    display: block;
    padding-top: var(--space-10);
}

/* ── 化身名牒卡（顶卡 · 无左轨） ── */
.inc-hero {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    align-items: stretch;
    padding: var(--space-14);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 34%, var(--border-color));
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    box-shadow: none;
}

.inc-hero--c {
    /* C 壳：单列纸面名牒 */
}

.inc-hero--ready {
    border-color: color-mix(in srgb, var(--accent-gold) 38%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-gold) 7%, transparent), transparent 42%),
        var(--bg-panel);
}

.inc-hero--forming {
    border-color: color-mix(in srgb, var(--accent-jade) 36%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-jade) 7%, transparent), transparent 42%),
        var(--bg-panel);
}

.inc-hero--locked {
    border-color: var(--border-color);
    background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-panel));
    opacity: 0.96;
}

.inc-hero--garrison {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--accent-gold));
}

.inc-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-10);
    min-width: 0;
}

.inc-hero__head {
    min-width: 0;
    flex: 1 1 auto;
}

.inc-hero__stamp {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: var(--space-2) var(--space-10);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold, var(--accent-gold));
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.6px;
    white-space: nowrap;
    line-height: 1.3;
}

.inc-hero--forming .inc-hero__stamp {
    border-color: color-mix(in srgb, var(--accent-jade) 36%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    color: var(--text-jade, var(--accent-jade));
}

.inc-hero--locked .inc-hero__stamp {
    border-color: var(--border-color);
    background: var(--bg-card);
    color: var(--text-muted);
}

.inc-hero--garrison .inc-hero__stamp {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    color: var(--text-jade, var(--accent-jade));
}

.inc-hero-kicker {
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: var(--space-6);
    line-height: 1.3;
}

.inc-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-8);
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--font-title);
    letter-spacing: 0.5px;
    line-height: 1.3;
    min-width: 0;
}

.inc-title__name {
    font-family: var(--font-serif, inherit);
    font-size: var(--font-heading);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.inc-title__rename.btn-craft,
.inc-title .inc-title__rename {
    min-height: 28px;
    padding: 0 var(--space-10);
    font-size: var(--font-caption);
    font-weight: 600;
}

.inc-subtitle {
    margin-top: var(--space-6);
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.55;
    text-wrap: wrap;
    max-width: 42ch;
}

/* 境界 / 祭炼 / 成长 · 三格数据条 */
.inc-meta-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    border: 0;
}

.inc-meta-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 92%, transparent);
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
    line-height: 1.3;
}

.inc-meta-item__k,
.inc-meta-item b {
    font-size: var(--font-micro);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.4px;
}

.inc-meta-item__v,
.inc-meta-item em {
    font-size: var(--font-body);
    font-weight: 700;
    font-style: normal;
    color: var(--text-gold, var(--accent-gold));
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.inc-hero--c .inc-action-stack {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    margin: 0;
    padding-top: var(--space-2);
}

.inc-hero--c .inc-action-stack .btn-craft {
    min-height: 36px;
}

/* 修为嵌套软底 */
.inc-hero-detail,
.inc-hero--c .inc-hero-detail {
    margin: 0;
    padding: 0;
    grid-column: auto;
}

.inc-hero-cult {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
}

.inc-hero-cult .inc-res-block {
    margin: 0;
}

.inc-hero-cult .inc-inline-actions {
    justify-content: flex-start;
}

.inc-hero-cult__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-8);
}

.inc-hero-cult__label {
    font-size: var(--font-caption);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.4px;
}

@media (max-width: 420px) {
    .inc-meta-strip {
        grid-template-columns: 1fr;
    }
}

.inc-craft-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.45;
    cursor: pointer;
}

.inc-craft-toggle b {
    color: var(--text-gold, var(--accent-gold));
}

.inc-craft-toggle input {
    margin-top: var(--space-2);
    flex: 0 0 auto;
}

@media (max-width: 520px) {
    .inc-hero--c .inc-action-stack .btn-craft {
        flex: 1 1 auto;
        min-height: 44px;
    }
}

/* ===== 化身装备区块：对齐法相 craft-asp- 结构（竖排单列） ===== */
/* 覆写法相双列网格为单列竖排；化身三槽纵向依次排列，移动端更舒展 */
.inc-section--equip .craft-aspect-grid,
.inc-equip-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

/* 已装备槽位卡用 div 承载（内部含操作 button，避免 button 嵌套）：
   补 cursor 让 div 具备可点击语义；hover/边框/底色由 craft-asp-slot 本体提供 */
.craft-asp-slot.inc-asp-slot--clickable {
    cursor: pointer;
}

/* 槽内操作行（化身独有）：祭炼/铭文/卸下 三键横排，顶部细分隔线与上方信息隔开 */
.craft-asp-slot__ops {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}
.craft-asp-slot__ops .btn-craft {
    flex: 1 1 calc(33.33% - 6px);
    min-width: 0;
    min-height: 32px;
    padding: 0 var(--space-4);
    font-size: var(--font-caption);
    white-space: nowrap;
}
/* 桌面双列槽内三键仍横排；极窄时避免字被裁成「隐形」 */
@media (max-width: 360px) {
    .craft-asp-slot__ops {
        flex-direction: column;
    }
    .craft-asp-slot__ops .btn-craft {
        flex: 1 1 auto;
        width: 100%;
        min-height: 40px;
    }
}

.inc-hero-main { min-width: 0; }
.inc-action-stack,
.inc-inline-actions {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}
.inc-refine-inline-card {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-radius: var(--radius-md);
    background: var(--shadow-black-3);
}
.inc-refine-inline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-10);
}
.inc-refine-inline-title {
    color: var(--text-gold);
    font-size: var(--font-label);
    font-weight: 700;
}
.inc-refine-inline-target,
.inc-refine-inline-subtitle {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.45;
}
.inc-refine-inline-preview {
    display: grid;
    gap: var(--space-6);
}
.inc-section-note {
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.45;
}

/* 资源条 */
.inc-res-block {
    display: grid;
    gap: var(--space-4);
}
.inc-res-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    font-size: var(--font-label);
    color: var(--text-secondary);
}
.inc-res-row span:last-child {
    color: var(--text-primary);
    font-family: monospace;
    white-space: nowrap;
}
.inc-res-track {
    height: 6px;
    background: var(--shadow-black-2);
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: inset 0 1px 2px var(--shadow-black-2);
}
.inc-res-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
}
.inc-res-fill--mp {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-jade) 60%, var(--ghost-purple-soft)), var(--accent-jade));
    box-shadow: 0 0 4px color-mix(in srgb, var(--accent-jade) 35%, transparent);
}
.inc-res-fill--spirit {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-gold) 60%, color-mix(in srgb, var(--craft-gold-soft) 20%, var(--bg-card))), var(--accent-gold));
    box-shadow: 0 0 4px color-mix(in srgb, var(--accent-gold) 35%, transparent);
}

.inc-vital-grid,
.inc-preview-grid,
.inc-stats-grid,
.inc-recovery-grid {
    display: grid;
    gap: var(--space-8);
}
.inc-vital-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.inc-vital-chip {
    min-width: 0;
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    background: var(--glass-white-3);
    border: 1px solid var(--glass-white-1);
}
.inc-vital-chip__label {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-caption);
}
.inc-vital-chip strong {
    display: block;
    margin-top: var(--space-4);
    color: var(--text-primary);
    font-size: var(--font-body);
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.inc-vital-chip em {
    color: var(--accent-jade);
    font-size: var(--font-caption);
    font-style: normal;
    margin-left: var(--space-4);
}
.inc-vital-chip--atk strong { color: color-mix(in srgb, var(--accent-crimson) 55%, var(--bg-card)); }
.inc-vital-chip--def strong { color: var(--ghost-purple); }
.inc-vital-chip--hp strong { color: color-mix(in srgb, var(--success-color) 50%, white); }

.inc-recovery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-2);
}
.inc-recovery-item {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    background: var(--shadow-black-3);
}
.inc-recovery-item span,
.inc-recovery-item small {
    color: var(--text-muted);
    font-size: var(--font-caption);
}
.inc-recovery-item strong {
    color: var(--text-primary);
    font-size: var(--font-label);
    font-weight: 600;
}

.inc-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.inc-stat-chip {
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    background: var(--glass-white-3);
    border: 1px solid var(--glass-white-1);
    text-align: center;
}
.inc-stat-chip__label {
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.inc-stat-chip__value {
    margin-top: var(--space-4);
    font-weight: 700;
    font-size: var(--font-body);
}
.inc-stat-chip__value--gold { color: var(--text-gold); }
.inc-stat-chip__value--jade { color: var(--accent-jade); }

.inc-mats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
}
.inc-empty-line {
    color: var(--text-muted);
    font-size: var(--font-label);
}

.inc-preview-grid {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}
.inc-preview-chip {
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    background: var(--glass-white-3);
    border: 1px solid var(--glass-white-1);
    min-width: 0;
}
.inc-preview-chip__label {
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.inc-preview-chip__value {
    margin-top: var(--space-4);
    font-weight: 700;
}
.inc-preview-chip--hp .inc-preview-chip__value { color: color-mix(in srgb, var(--accent-crimson) 55%, var(--bg-card)); }
.inc-preview-chip--mp .inc-preview-chip__value { color: var(--accent-jade); }
.inc-preview-chip--atk .inc-preview-chip__value { color: var(--text-gold); }
.inc-preview-chip--def .inc-preview-chip__value { color: var(--ghost-purple); }
.inc-preview-chip--spirit .inc-preview-chip__value { color: color-mix(in srgb, var(--accent-gold) 78%, #fff); }
.inc-preview-gain {
    font-size: var(--font-caption);
    color: var(--accent-jade);
    font-weight: normal;
}

.inc-guides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: var(--space-8);
}
.inc-guide-item {
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-md);
    background: var(--shadow-black-3);
}
.inc-guide-title {
    color: var(--text-secondary);
    font-size: var(--font-caption);
    font-weight: 700;
    margin-bottom: var(--space-4);
}
.inc-guide-body {
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.55;
}
.inc-note,
.inc-last-line,
.inc-cost-line {
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.6;
}
.inc-last-line span {
    color: var(--text-muted);
}
.inc-cost-line--muted {
    color: var(--text-muted);
}
.inc-equip-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: var(--space-8);
}
.inc-equip-affix {
    font-size: var(--font-micro);
    color: var(--accent-jade, var(--accent-blue));
    line-height: 1.3;
    overflow-wrap: anywhere;
    font-style: italic;
}
/* 化身装备列表的境界标签：一眼看出装备属于哪个境界，不用翻面板确认 */
.inc-equip-stage-badge {
    display: inline-block;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xs);
    font-size: var(--font-micro);
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 22%, transparent);
}

/* === 炼造 / 化身：文字修仙册页风格 === */
/* 暗色默认值仅作用于炼造弹窗体系内部，避免污染全局 :root */
.alchemy-modal,
.equip-loadout-modal-overlay,
.equip-loadout-modal {
    --cult-paper: var(--combat-dark);
    --cult-paper-soft: color-mix(in srgb, var(--craft-gold) 4%, transparent);
    --cult-line: rgba(190, 148, 76, 0.22);
    --cult-line-strong: rgba(190, 148, 76, 0.44);
    --cult-ink: var(--text-primary);
    --cult-muted: var(--text-muted);
    --cult-gold: var(--craft-gold);
    --cult-gold-bright: var(--craft-gold-bright);
    --cult-jade: var(--accent-blue);
    --cult-red: var(--craft-gold);
    --cult-blue: var(--ghost-purple-deep);
}

html.theme-light .alchemy-modal,
html.theme-light .equip-loadout-modal-overlay,
html.theme-light .equip-loadout-modal {
    --cult-paper: var(--bg-primary);
    --cult-paper-soft: rgba(184, 70, 62, 0.045);
    --cult-line: rgba(60, 60, 60, 0.13);
    --cult-line-strong: rgba(184, 70, 62, 0.26);
    --cult-ink: var(--text-primary);
    --cult-muted: var(--text-muted);
    --cult-gold: var(--accent-orange);
    --cult-gold-bright: var(--accent-crimson);
    --cult-jade: var(--success-color);
    --cult-red: var(--accent-crimson);
    --cult-blue: var(--accent-cyan);
}

html.theme-light .inc-hero {
    box-shadow: 0 2px 10px color-mix(in srgb, var(--text-primary) 4%, transparent);
}
html.theme-light .alchemy-furnace-bar,
html.theme-light .craft-furnace-card,
html.theme-light .wish-slot-bar {
    box-shadow: none;
    background: var(--bg-panel);
}

html.theme-light .craft-card,
html.theme-light .craft-pill-upgrade-row {
    background: var(--bg-panel);
    box-shadow: none;
}

html.theme-light .craft-card:hover,
html.theme-light .craft-pill-upgrade-row:hover {
    background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-panel));
}

html.theme-light .recipe-mp-cost,
html.theme-light .recipe-desc,
html.theme-light .forge-stat-tag,
html.theme-light .inc-vital-chip,
html.theme-light .inc-recovery-item,
html.theme-light .inc-stat-chip,
html.theme-light .inc-preview-chip,
html.theme-light .inc-guide-item,
html.theme-light .recipe-mats .mat-ok,
html.theme-light .recipe-mats .mat-lack,
html.theme-light .inc-mats .mat-ok,
html.theme-light .inc-mats .mat-lack {
    background: var(--glass-white-1);
    border-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

html.theme-light .inc-res-track {
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
}
.crafting-tabs {
    gap: 0;
    border-bottom: 1px solid var(--cult-line);
}
.crafting-tab {
    border-radius: 0;
    padding: var(--space-8) var(--space-16);
    color: var(--cult-muted);
    letter-spacing: 0;
    border-bottom: 1px solid transparent;
}
.crafting-tab:hover {
    background: var(--cult-paper-soft);
    color: var(--cult-ink);
}
.crafting-tab.active {
    color: var(--cult-gold-bright);
    border-bottom-color: var(--cult-gold-bright);
    background: transparent;
}

.alchemy-furnace-bar,
.wish-slot-bar {
    border-radius: var(--radius-md);
    border-color: var(--cult-line);
    background: var(--cult-paper);
    box-shadow: none;
}
.furnace-name {
    color: var(--cult-gold-bright);
    letter-spacing: 0;
}
.furnace-name::before {
    content: none;
    display: none;
}
.craft-furnace-card__kicker,
.wish-title__kicker {
    color: var(--cult-muted);
}
.chance-tag {
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--cult-ink) 4%, transparent);
    letter-spacing: 0;
}
.spirit-warn,
.forge-mastery-bar {
    border-color: var(--cult-line);
    background: color-mix(in srgb, var(--cult-gold) 4%, transparent);
}
.mastery-label {
    color: var(--cult-gold-bright);
    letter-spacing: 0;
}
.wish-slot-header .wish-title {
    letter-spacing: 0;
}
.wish-title__kicker {
    color: var(--cult-gold-bright);
}

.craft-subtabs {
    border-bottom-color: var(--cult-line);
}
.craft-subtab {
    border-radius: 0;
    letter-spacing: 0;
    color: var(--cult-muted);
}
.craft-subtab.active {
    color: var(--cult-gold-bright);
    border-bottom-color: var(--cult-gold-bright);
}

/* 工坊笺 item：cult 主题只补 token，不恢复左轨/方角 */
.craft-card {
    border-color: var(--cult-line);
    background: var(--cult-paper);
    border-radius: var(--radius-md);
}
.craft-card::before {
    content: none;
    display: none;
}
.craft-card:hover {
    border-color: var(--cult-line-strong);
    background: color-mix(in srgb, var(--cult-gold) 4%, var(--cult-paper));
}
.craft-card.craft-card-blueprint {
    border-color: var(--cult-line-strong);
    background: color-mix(in srgb, var(--cult-gold) 7%, var(--cult-paper));
}
.craft-card.craft-card-disabled,
.craft-card.craft-card-disabled:hover {
    opacity: 0.62;
    border-color: var(--cult-line);
    background: var(--cult-paper);
}
.craft-card.craft-card--wish-target,
.craft-card.craft-card--wish-target:hover {
    border-color: color-mix(in srgb, var(--cult-jade) 42%, var(--cult-gold));
    background: color-mix(in srgb, var(--cult-jade) 7%, var(--cult-paper));
}
.recipe-name {
    color: var(--cult-ink);
}
.recipe-owned {
    color: var(--cult-ink-muted, var(--text-muted));
}
.recipe-kind-badge,
.bp-badge,
.recipe-stage-badge {
    color: var(--cult-gold-bright);
    border-color: var(--cult-line);
    background: color-mix(in srgb, var(--cult-gold) 8%, transparent);
}
.recipe-type-badge {
    color: var(--cult-muted);
    border-color: var(--cult-line);
    background: transparent;
}
.recipe-wish-badge {
    color: var(--cult-jade);
    border-color: color-mix(in srgb, var(--cult-jade) 36%, transparent);
    background: color-mix(in srgb, var(--cult-jade) 10%, transparent);
}
.recipe-stage-badge-low,
.recipe-no-exp {
    color: var(--cult-red);
    border-color: color-mix(in srgb, var(--jimo-crimson) 28%, transparent);
    background: color-mix(in srgb, var(--jimo-crimson) 8%, transparent);
}
.recipe-mp-cost {
    color: var(--cult-muted);
    border-color: var(--cult-line);
    background: color-mix(in srgb, var(--cult-ink) 4%, transparent);
}
.recipe-mp-cost.recipe-cost-spirit {
    color: var(--cult-gold-bright);
    border-color: var(--cult-line);
    background: color-mix(in srgb, var(--cult-gold) 7%, transparent);
}
.recipe-desc {
    color: var(--cult-muted);
    border-color: var(--cult-line);
    background: color-mix(in srgb, var(--cult-gold) 4%, transparent);
}
.recipe-desc-label,
.recipe-mats-label {
    color: var(--cult-gold);
}
.mat-ok {
    color: var(--cult-jade);
    border-color: color-mix(in srgb, var(--cult-jade) 30%, transparent);
    background: color-mix(in srgb, var(--cult-jade) 8%, transparent);
}
.mat-lack {
    color: var(--cult-red);
    border-color: color-mix(in srgb, var(--cult-red) 28%, transparent);
    background: color-mix(in srgb, var(--cult-red) 7%, transparent);
}
.forge-stat-tag {
    border-color: var(--cult-line);
    background: color-mix(in srgb, var(--cult-ink) 4%, transparent);
}
.forge-stat-atk { color: var(--cult-red); }
.forge-stat-def { color: var(--cult-blue); }
.forge-stat-hp  { color: var(--cult-jade); }
.forge-stat-mp  { color: color-mix(in srgb, var(--cult-jade) 55%, var(--cult-blue)); }
.forge-stat-spr,
.forge-stat-cap { color: var(--cult-gold-bright); }
.craft-card-actions {
    border-top-color: var(--cult-line);
}

/* 炼造弹窗内的按钮变体：限定在 --cult-* 作用域内，避免覆盖通用 .btn-craft */
.equip-loadout-modal-overlay .btn-craft,
.alchemy-modal .btn-craft {
    min-height: 32px;
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--craft-gold) 12%, transparent);
    border-color: var(--cult-line-strong);
    color: var(--cult-gold-bright);
    box-shadow: none;
    letter-spacing: 0;
}
.equip-loadout-modal-overlay .btn-craft:hover:not(:disabled),
.alchemy-modal .btn-craft:hover:not(:disabled) {
    background: color-mix(in srgb, var(--craft-gold) 18%, transparent);
    border-color: color-mix(in srgb, var(--craft-gold-bright) 65%, transparent);
    box-shadow: none;
}
.equip-loadout-modal-overlay .btn-craft:disabled,
.alchemy-modal .btn-craft:disabled {
    background: var(--glass-white-3);
    border-color: var(--glass-white-1);
    color: var(--cult-muted);
}
/*
 * #6237 扩展：浅色主题下 8% 透明金底 + 朱红字几乎「隐形」，
 * 炼丹/炼器/制符/升阶/化身/装备方案 全部受影响。桌面与手机同一套对比度。
 */
html.theme-light .equip-loadout-modal-overlay .btn-craft,
html.theme-light .alchemy-modal .btn-craft {
    min-height: 34px;
    background: color-mix(in srgb, var(--accent-gold) 16%, var(--bg-card, #fff)) !important;
    border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color)) !important;
    color: var(--text-primary) !important;
}
html.theme-light .equip-loadout-modal-overlay .btn-craft:hover:not(:disabled),
html.theme-light .alchemy-modal .btn-craft:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-crimson) 10%, var(--bg-card, #fff)) !important;
    border-color: color-mix(in srgb, var(--accent-crimson) 40%, var(--border-color)) !important;
    color: var(--accent-crimson) !important;
}
html.theme-light .equip-loadout-modal-overlay .btn-craft:disabled,
html.theme-light .alchemy-modal .btn-craft:disabled {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    opacity: 0.55;
}
/* 玉/次强调类操作（一键补材、升品等）浅色仍须可读 */
html.theme-light .alchemy-modal .btn-craft.btn-quickbuy,
html.theme-light .alchemy-modal .btn-craft.btn-batch {
    color: var(--success-color, #2f7a5f) !important;
    border-color: color-mix(in srgb, var(--success-color, #2f7a5f) 40%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--success-color, #2f7a5f) 10%, var(--bg-card)) !important;
}
.equip-loadout-modal-overlay .btn-batch,
.alchemy-modal .btn-batch {
    color: var(--cult-muted);
    border-color: var(--glass-white-1);
}
.equip-loadout-modal-overlay .btn-batch:hover:not(:disabled),
.alchemy-modal .btn-batch:hover:not(:disabled) {
    color: var(--cult-gold-bright);
    background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
}
.equip-loadout-modal-overlay .btn-quickbuy,
.alchemy-modal .btn-quickbuy {
    color: var(--cult-jade);
    border-color: color-mix(in srgb, var(--accent-blue) 34%, transparent);
}
.equip-loadout-modal-overlay .btn-quickbuy:hover:not(:disabled),
.alchemy-modal .btn-quickbuy:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-blue) 56%, transparent);
    box-shadow: none;
}

body.game-page .equip-loadout-modal-overlay .modal-content,
body.game-page .equip-loadout-modal-overlay .modal-content.modal--decorated {
    padding: 0;
    border: 1px solid var(--cult-line-strong);
    border-radius: var(--radius-md);
    background-color: var(--cult-paper, var(--craft-modal-bg, var(--bg-panel))) !important;
    background-image: none;
    background: var(--cult-paper, var(--craft-modal-bg, var(--bg-panel))) !important;
    box-shadow: 0 8px 32px var(--shadow-black-1);
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    body.game-page .equip-loadout-modal-overlay .modal-content,
    body.game-page .equip-loadout-modal-overlay .modal-content.modal--decorated {
        background-color: var(--cult-paper, var(--craft-modal-bg, var(--bg-panel))) !important;
        background-image:
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--cult-gold) 6%, var(--cult-paper, var(--bg-panel))),
                var(--cult-paper, var(--bg-panel)) 40%
            );
        background-repeat: no-repeat;
    }
}
body.game-page .equip-loadout-modal-overlay .modal-header-deco {
    border-bottom-color: var(--cult-line);
    background-color: var(--cult-paper, var(--bg-card)) !important;
    background: var(--cult-paper, var(--bg-card)) !important;
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    body.game-page .equip-loadout-modal-overlay .modal-header-deco {
        background-color: var(--cult-paper, var(--bg-card)) !important;
        background-image:
            linear-gradient(
                90deg,
                color-mix(in srgb, var(--cult-gold) 8%, var(--cult-paper, var(--bg-card))),
                var(--cult-paper, var(--bg-card)) 70%
            );
        background-repeat: no-repeat;
    }
}
body.game-page .equip-loadout-modal-overlay .modal-body-padded {
    /* 继承外壳实色，勿再强制 transparent 透底 */
    background-color: var(--cult-paper, var(--craft-modal-bg, var(--bg-panel))) !important;
    background: var(--cult-paper, var(--craft-modal-bg, var(--bg-panel))) !important;
}
/* 一键换装 A 方案笺：卡片级样式由上方 .eql-* 接管；
   此处只保留兼容钩子，避免旧 craft-card 行样式覆盖 eql 布局。 */
.equip-loadout-shell {
    min-height: 0;
}
.eql-item__text,
.equip-loadout-item__text {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    min-width: 0;
    overflow-wrap: anywhere;
}
.eql-card__title-wrap {
    min-width: 0;
    flex: 1 1 auto;
}
html.theme-light body.game-page .equip-loadout-modal-overlay .modal-content,
html.theme-light body.game-page .equip-loadout-modal-overlay .modal-content.modal--decorated {
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--jimo-crimson) 36%, transparent);
    background: var(--cult-paper) !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cult-gold) 5%, transparent), transparent 40%),
        var(--cult-paper) !important;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--text-primary) 15%, transparent);
}

.inc-panel-card {
    gap: var(--space-10);
}
/* cult 主题：只补 token，不恢复左轨 */
.inc-hero {
    border-radius: var(--radius-lg);
    border-color: var(--cult-line);
    border-left: 1px solid var(--cult-line);
    background: var(--cult-paper);
}
.inc-hero--ready {
    border-color: color-mix(in srgb, var(--cult-gold-bright) 40%, var(--cult-line));
}
.inc-hero--forming {
    border-color: color-mix(in srgb, var(--cult-jade) 40%, var(--cult-line));
}
.inc-hero--locked {
    border-color: var(--cult-line);
}
.inc-hero-kicker {
    color: var(--cult-muted);
    letter-spacing: 1px;
}
.inc-title__name {
    color: var(--cult-ink);
}
.inc-hero__stamp {
    border-color: var(--cult-line);
    color: var(--cult-gold-bright);
    background: color-mix(in srgb, var(--cult-gold) 8%, transparent);
}
.inc-subtitle {
    color: var(--cult-muted);
}
.inc-meta-item {
    border-color: var(--cult-line);
    background: color-mix(in srgb, var(--cult-ink) 3%, transparent);
}
.inc-meta-item__k,
.inc-meta-item b {
    color: var(--cult-muted);
}
.inc-meta-item__v,
.inc-meta-item em {
    color: var(--cult-gold-bright);
}
.inc-hero-cult {
    border-color: var(--cult-line);
    background: color-mix(in srgb, var(--cult-gold) 4%, transparent);
}
.inc-action-stack,
.inc-inline-actions {
    gap: var(--space-6);
}
.inc-hero-detail {
    grid-column: auto;
}
.inc-refine-inline-card {
    border-radius: var(--radius-xs);
    border-color: color-mix(in srgb, var(--craft-gold) 16%, transparent);
    background: var(--shadow-black-3);
}
.inc-refine-inline-title {
    color: var(--cult-gold-bright);
}
.inc-refine-inline-target,
.inc-refine-inline-subtitle {
    color: var(--cult-muted);
}
.inc-section-note,
.inc-note,
.inc-last-line,
.inc-cost-line,
.inc-empty-line {
    color: var(--cult-muted);
}
.inc-res-track {
    height: 5px;
    border-radius: 0;
    background: var(--shadow-black-2);
    box-shadow: none;
}
.inc-res-fill {
    border-radius: 0;
}
.inc-res-fill--mp {
    background: var(--cult-jade);
    box-shadow: none;
}
.inc-res-fill--spirit {
    background: var(--cult-gold-bright);
    box-shadow: none;
}
.inc-vital-chip,
.inc-recovery-item,
.inc-stat-chip,
.inc-preview-chip,
.inc-guide-item {
    border-radius: var(--radius-xs);
    background: var(--shadow-black-3);
    border: 1px solid var(--glass-white-1);
}
.inc-vital-chip strong,
.inc-preview-chip__value,
.inc-stat-chip__value {
    font-weight: 700;
}
.inc-vital-chip--atk strong,
.inc-preview-chip--atk .inc-preview-chip__value,
.inc-preview-chip--hp .inc-preview-chip__value {
    color: var(--cult-red);
}
.inc-vital-chip--def strong,
.inc-preview-chip--def .inc-preview-chip__value {
    color: var(--cult-blue);
}
.inc-vital-chip--hp strong,
.inc-preview-chip--mp .inc-preview-chip__value {
    color: var(--cult-jade);
}
.inc-preview-chip--spirit .inc-preview-chip__value,
.inc-stat-chip__value--gold {
    color: var(--cult-gold-bright);
}
.inc-stat-chip__value--jade,
.inc-preview-gain,
.inc-vital-chip em {
    color: var(--cult-jade);
}
.inc-guide-title,
.inc-stat-chip__label,
.inc-preview-chip__label,
.inc-vital-chip__label,
.inc-recovery-item span,
.inc-recovery-item small {
    color: var(--cult-muted);
}
.inc-guide-body {
    color: color-mix(in srgb, var(--cult-muted) 88%, var(--cult-ink));
}

@media (max-width: 520px) {
    body.game-page .equip-loadout-modal-overlay {
        align-items: stretch;
        padding: 0;
    }
    .equip-loadout-modal-overlay .modal-content,
    .equip-loadout-modal-overlay .modal-content.eql-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    .eql-head {
        padding: var(--space-12) var(--space-48) var(--space-8) var(--space-14);
    }
    .eql-body,
    .equip-loadout-modal.eql-body {
        padding: var(--space-2) var(--space-12) calc(var(--space-10) + env(safe-area-inset-bottom, 0px));
    }
    .eql-actions:not(.eql-actions--single),
    .equip-loadout-actions:not(.eql-actions--single) {
        grid-template-columns: 1fr;
    }
    .eql-actions:not(.eql-actions--single) .eql-btn--gold {
        order: -1;
    }
    .craft-card-topline {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .recipe-cost-chips {
        justify-content: flex-start;
    }
    .craft-card-actions {
        justify-content: stretch;
    }
    .craft-card-actions .btn-craft {
        flex: 1 1 auto;
        min-width: 72px;
    }
    .inc-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .inc-action-stack {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
    }
    .inc-action-stack .btn-craft,
    .inc-inline-actions .btn-craft {
        flex: 1 1 auto;
    }
    .inc-refine-inline-head {
        flex-direction: column;
        align-items: stretch;
    }
    .inc-vital-grid,
.inc-recovery-grid,
.inc-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== 炼造弹窗结构重构：对齐自动处理设置的 layout / panel / section 模式 ===== */
body.game-page .craft-modal-overlay {
    --craft-modal-bg: var(--bg-panel);
    --craft-modal-panel: var(--bg-card);
    --craft-modal-raised: var(--bg-card-hover);
    
    --craft-modal-line: var(--border-color);
    --craft-modal-line-strong: var(--border-gold);
    --craft-modal-text: var(--text-primary);
    --craft-modal-muted: var(--text-muted);
    
    
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    body.game-page .craft-modal-overlay {
        
        --craft-modal-line: color-mix(in srgb, var(--border-color) 76%, transparent);
        --craft-modal-line-strong: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
    }
}

body.game-page .craft-modal-overlay .modal-content {
    color: var(--craft-modal-text);
}

/* A · 工坊笺：gc 头 + 顶 Tab 钉住 + 内容滚动 */
body.game-page .craft-modal-overlay .alchemy-modal.modal--decorated,
body.game-page .craft-modal-overlay .craft-modal-shell.gc-dialog.craft-gc {
    display: flex;
    flex-direction: column;
    width: min(94vw, 640px);
    max-width: 640px;
    height: min(92dvh, 760px);
    max-height: min(92dvh, 760px);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 0;
}

body.game-page .craft-modal-overlay .craft-modal-shell.gc-dialog.craft-gc {
    border-color: var(--craft-modal-line-strong, var(--border-gold));
}

.craft-modal-chrome {
    flex: 0 0 auto;
    /* 只保留左右内边距（承载 head + tab 水平对齐），顶部交由 head 自管，避免双层叠加 */
    padding: 0 var(--space-14);
    background: var(--craft-modal-bg, var(--bg-panel));
    z-index: 2;
    position: relative;
}

.craft-modal-chrome > .craft-gc-head {
    /* 不设 position：× 由 game-dialog.css 统一锚到 chrome（面板）边缘 12px */
    /* 顶部对齐全局 .gc-head 18px；右 48px 让出绝对定位的 ×（32px 宽 + 16px 视觉距标题）；左 2px 因 chrome 已补 14px 共 16px ≈ 全局 18px */
    padding: var(--space-20) var(--space-48) 0 var(--space-2) !important;
}

/* 短色条尺寸与全局 gc-dialog 对齐（36×3px / margin-bottom 12px） */
body.game-page .craft-modal-overlay .craft-gc-head .gc-rule,
.craft-gc-head .gc-rule {
    width: 36px;
    height: 3px;
    margin-bottom: var(--space-12);
}

.craft-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-10) var(--space-12) calc(var(--space-14) + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* 内容区同样保底实色，防止子层透出底层游戏画面 */
    background-color: var(--craft-modal-bg, var(--bg-panel)) !important;
    background: var(--craft-modal-bg, var(--bg-panel)) !important;
}

/* 六 Tab · 水平胶囊（A） */
body.game-page .craft-modal-overlay .craft-primary-tabs.crafting-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    /* 顶部留呼吸（紧接 head 色条+标题区），底部收紧到 4px；下方 body padding-top:var(--space-10) 已提供分隔，避免此前 10+10+10 三层堆叠 */
    margin: var(--space-4) 0 var(--space-4);
    padding: 0 0 var(--space-6);
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

body.game-page .craft-modal-overlay .craft-primary-tabs.crafting-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

body.game-page .craft-modal-overlay .craft-primary-tab.crafting-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 40px;
    min-width: 52px;
    width: auto;
    padding: 0 var(--space-14);
    border: 1px solid var(--craft-modal-line, var(--border-color));
    border-radius: var(--radius-pill);
    background: var(--craft-modal-panel, var(--bg-card));
    color: var(--craft-modal-muted, var(--text-muted));
    text-align: center;
    letter-spacing: 0.5px;
    font-size: var(--font-body);
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

body.game-page .craft-modal-overlay .craft-primary-tab:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
    color: var(--craft-modal-text, var(--text-primary));
    transform: none;
}

body.game-page .craft-modal-overlay .craft-primary-tab.active {
    border-color: color-mix(in srgb, var(--accent-gold) 48%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 14%, var(--bg-card));
    color: var(--text-gold);
}

.craft-modal-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: visible;
    padding-right: 0;
}

.craft-modal-panel::-webkit-scrollbar { width: 5px; }
.craft-modal-panel::-webkit-scrollbar-track { background: transparent; }
.craft-modal-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-gold) 28%, transparent);
    border-radius: var(--radius-xs);
}
.craft-modal-panel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

.craft-status-section,
.craft-recipe-section {
    position: relative;
    border: 1px solid var(--craft-modal-line, var(--border-color));
    border-radius: var(--radius-lg);
    background: var(--craft-modal-panel, var(--bg-card));
    overflow: hidden;
}

.craft-status-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.craft-recipe-section {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.craft-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-12) var(--space-10);
    border-bottom: 1px solid var(--craft-modal-line);
}

.craft-section-head--filters-only {
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-10) var(--space-12);
    flex-wrap: wrap;
    gap: var(--space-8);
}

.craft-stage-filter {
    flex: none;
}

.craft-section-head--filters-only .craft-subtabs {
    flex: 1 1 auto;
    min-width: 0;
}

.craft-section-title {
    color: var(--craft-modal-text);
    font-size: var(--font-body-lg);
    font-weight: 760;
    line-height: 1.35;
}

.craft-section-note {
    margin-top: var(--space-2);
    color: var(--craft-modal-muted);
    font-size: var(--font-caption);
    line-height: 1.45;
}

.craft-mobile-status-toggle {
    display: none;
}

.craft-mobile-status-toggle__main,
.craft-mobile-status-toggle__hint {
    min-width: 0;
}

.craft-status-card,
.craft-wish-card {
    margin: 0;
    box-shadow: none;
}

/* 炉火卡与许愿卡：各自独立纸面，与配方卡同语汇 */
.craft-status-card.craft-furnace-card,
body.game-page .craft-modal-overlay .craft-status-card.craft-furnace-card {
    margin: 0;
    padding: var(--space-12);
    border: 1px solid var(--craft-modal-line, var(--border-color));
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}

.craft-wish-card,
body.game-page .craft-modal-overlay .craft-wish-card {
    margin: var(--space-8) 0 0;
    padding: var(--space-10) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 34%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-panel));
    min-height: 44px;
    box-sizing: border-box;
}

body.game-page .craft-modal-overlay .craft-subtabs {
    flex: 0 1 auto;
    justify-content: flex-start;
    max-width: 100%;
    gap: var(--space-6);
    padding: 0;
    border: 0;
    background: transparent;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.game-page .craft-modal-overlay .craft-subtabs::-webkit-scrollbar {
    display: none;
}

/* #9952：窄窗口下主 Tab / 丹方行藏横滑条后，鼠标用户既看不见也拖不动，只能放大窗口。
   鼠标环境露出 6px 细横条；触屏/平板仍藏条手指横滑。储物 #6712/#9592 按 ≥1025px 宽度
   切分救不了本例（玩家窗口 ≤620px），故改用指针能力判定。 */
@media (hover: hover) and (pointer: fine) {
    body.game-page .craft-modal-overlay .craft-primary-tabs.crafting-tabs,
    body.game-page .craft-modal-overlay .craft-subtabs {
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--craft-modal-line, var(--border-color)) 90%, transparent) transparent;
    }
    body.game-page .craft-modal-overlay .craft-primary-tabs.crafting-tabs::-webkit-scrollbar,
    body.game-page .craft-modal-overlay .craft-subtabs::-webkit-scrollbar {
        display: block;
        width: 6px;
        height: 6px;
    }
    body.game-page .craft-modal-overlay .craft-primary-tabs.crafting-tabs::-webkit-scrollbar-track,
    body.game-page .craft-modal-overlay .craft-subtabs::-webkit-scrollbar-track {
        background: transparent;
    }
    body.game-page .craft-modal-overlay .craft-primary-tabs.crafting-tabs::-webkit-scrollbar-thumb,
    body.game-page .craft-modal-overlay .craft-subtabs::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--craft-modal-line, var(--border-color)) 90%, transparent);
        border-radius: var(--radius-pill);
    }
}

body.game-page .craft-modal-overlay .craft-subtab {
    min-height: 30px;
    padding: var(--space-6) var(--space-10);
    border: 1px solid var(--craft-modal-line);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg-card-hover) 18%, transparent);
    color: var(--craft-modal-muted);
    font-size: var(--font-caption);
}

body.game-page .craft-modal-overlay .craft-subtab:hover,
body.game-page .craft-modal-overlay .craft-subtab.active {
    border-color: var(--craft-modal-line-strong);
    color: var(--craft-modal-text);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

body.game-page .craft-modal-overlay .alchemy-recipes {
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
    padding: var(--space-10) var(--space-12) var(--space-12);
    gap: var(--space-8);
    overflow: visible;
}

body.game-page .craft-modal-overlay .craft-pinned-recipes {
    flex: 0 0 auto;
    display: none;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12) 0;
}

body.game-page .craft-modal-overlay .craft-pinned-recipes .craft-card {
    /* 置顶许愿目标：略抬一阶，仍无左轨 */
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-jade) 12%, transparent);
}

body.game-page .craft-modal-overlay .craft-pinned-recipes:empty {
    display: none !important;
}

/* wish / 升阶列表：与配方卡统一的工坊笺 item */
.craft-card.craft-card--wish-target,
.craft-card.craft-card--wish-target:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 42%, var(--accent-gold));
    background: color-mix(in srgb, var(--accent-jade) 7%, var(--bg-panel));
    box-shadow: none;
}

.craft-card.craft-card--wish-target::before {
    content: none;
    display: none;
}

.craft-card.craft-card--wish-target.craft-card-disabled,
.craft-card.craft-card--wish-target.craft-card-disabled:hover {
    opacity: 0.82;
}

.craft-special-panel {
    min-height: 0;
    overflow: visible;
    flex: 0 0 auto;
}

/* ===== 丹药升阶面板 · 标题钉住 + 列表自滚 ===== */
/* 升阶 Tab 时：shell 定高 + body/panel/list 全链 min-height:0，避免 max-height 裁切符箓区 */
.craft-modal-overlay.craft-is-pill-upgrade .craft-modal-shell.gc-dialog.craft-gc,
.craft-modal-overlay.craft-is-pill-upgrade .alchemy-modal.modal--decorated {
    display: flex;
    flex-direction: column;
    height: min(92dvh, 760px);
    max-height: min(92dvh, 760px);
    min-height: 0;
    overflow: hidden;
}
.craft-modal-overlay.craft-is-pill-upgrade .craft-modal-body {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* 盖过窄屏 .craft-modal-body{overflow-y:auto}，否则双滚 + 底部被裁 */
    overflow: hidden !important;
}
.craft-modal-overlay.craft-is-pill-upgrade .craft-modal-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0;
}
#pillUpgradePanel.craft-special-panel {
    display: none; /* 默认隐藏；JS 升阶 Tab 时设为 flex */
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.craft-modal-overlay.craft-is-pill-upgrade #pillUpgradePanel.craft-special-panel {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
#pillUpgradePanel .craft-pu-head {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    margin: 0 0 var(--space-6);
    padding: 0 0 var(--space-8);
    background: var(--craft-modal-bg, var(--bg-panel));
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    /* 钉住头区，避免列表滚时把一键钮顶没 / 错位叠字 */
    width: 100%;
    box-sizing: border-box;
}
#pillUpgradePanel .craft-section-title {
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}
#pillUpgradePanel .craft-section-note {
    margin: 0;
    line-height: 1.45;
    color: var(--text-secondary);
}
#pillUpgradePanel.is-pu-busy {
    pointer-events: none;
    opacity: 0.78;
}
.craft-pill-upgrade-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 1 1 auto;
    /* #6237：勿再强 min-height 撑空，否则首卡/空区看起来像错位大空白 */
    min-height: 0;
    padding: var(--space-2) 0 calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
@media (max-width: 620px) {
    .craft-modal-overlay.craft-is-pill-upgrade .craft-modal-shell.gc-dialog.craft-gc,
    .craft-modal-overlay.craft-is-pill-upgrade .alchemy-modal.modal--decorated {
        height: 100dvh;
        max-height: 100dvh;
    }
    .craft-pill-upgrade-list {
        min-height: 0;
        padding-bottom: calc(var(--space-20) + env(safe-area-inset-bottom, 0px));
    }
    .craft-pu-all-row {
        flex-direction: column;
    }
    .craft-pu-all {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
}
.craft-pu-section-title {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--font-label);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    flex: 0 0 auto;
}
html.theme-light .craft-pu-section-title {
    color: var(--accent-crimson);
}
.craft-pill-upgrade-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card, var(--bg-panel));
    transition: border-color 0.15s ease, background 0.15s ease;
    box-sizing: border-box;
}
.craft-pill-upgrade-row:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 32%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-card, var(--bg-panel)));
}
.craft-pill-upgrade-row.is-ready {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 7%, var(--bg-card, var(--bg-panel)));
}
.craft-pill-upgrade-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    min-width: 0;
    flex: 0 0 auto;
}
.craft-pill-upgrade-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    flex: 0 0 auto;
    width: 100%;
}
.craft-pu-btn-step {
    border-color: color-mix(in srgb, var(--accent-jade, #3d8b6e) 48%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent-jade, #3d8b6e) 16%, var(--bg-card)) !important;
    color: var(--text-primary) !important;
    min-height: 42px !important;
}
.craft-pu-btn-max {
    border-color: color-mix(in srgb, var(--accent-crimson) 48%, var(--border-color)) !important;
    background: color-mix(in srgb, var(--accent-crimson) 14%, var(--bg-card)) !important;
    color: var(--accent-crimson) !important;
    font-weight: 700;
    min-height: 42px !important;
}
html.theme-light .craft-pu-btn-step {
    color: var(--success-color, #2f7a5f) !important;
}
.craft-pu-btn-disabled {
    min-height: 42px !important;
    width: 100%;
    grid-column: 1 / -1;
}
.craft-pill-grade--btn {
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
}
.craft-pill-grade--btn i {
    font-style: normal;
    margin-left: var(--space-4);
    opacity: 0.75;
    font-size: var(--font-caption);
}
.craft-pill-grade--btn:hover {
    filter: brightness(1.06);
}
@media (max-width: 520px) {
    .craft-pill-upgrade-actions .btn-craft {
        width: 100%;
        min-height: 42px;
    }
    .craft-pill-upgrade-actions .btn-craft:only-child,
    .craft-pill-upgrade-actions .craft-pu-btn-disabled {
        grid-column: 1 / -1;
    }
    .craft-aspect-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
    }
    .craft-aspect-actions .btn-craft,
    .inc-inline-actions .btn-craft,
    .inc-action-stack .btn-craft {
        min-height: 44px;
        flex: 1 1 auto;
    }
}
@media (min-width: 560px) {
    .craft-pill-upgrade-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .craft-pill-upgrade-actions {
        width: auto;
        flex: 0 0 auto;
        min-width: 200px;
    }
}
.craft-pill-upgrade-name {
    font-weight: 700;
    font-size: var(--font-body-lg);
    color: var(--text-primary) !important;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.35;
    word-break: break-word;
}
.craft-pill-upgrade-grades {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    /* #6237：禁止 flex:1 把品阶区撑成大空白 */
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
}
.craft-pill-grade {
    font-size: var(--font-caption);
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-card);
    white-space: nowrap;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.craft-pill-grade--ready {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    color: var(--text-jade, var(--accent-jade));
    background: color-mix(in srgb, var(--accent-jade) 9%, transparent);
    font-weight: 700;
}
.craft-pill-grade--btn.craft-pill-grade--ready {
    min-height: 32px;
    padding: var(--space-6) var(--space-10);
}
.craft-pill-upgrade-actions {
    flex-shrink: 0;
}

.craft-dialog-host {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--space-16) var(--space-20) var(--space-20) !important;
}

.craft-dialog-shell {
    min-height: 0;
}

.craft-dialog-layout {
    display: grid;
    gap: var(--space-10);
}

.craft-dialog-section {
    min-width: 0;
    padding: var(--space-12);
    border: 1px solid var(--craft-modal-line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 5%, transparent), transparent 58%),
        var(--craft-modal-panel);
}

.craft-dialog-section > .modal-info-card {
    margin: 0 !important;
}

.craft-dialog-section .craft-dialog-list {
    max-height: min(46dvh, 340px);
}

.wish-select-body .craft-wish-select-shell,
.wish-select-body .craft-dialog-layout {
    min-height: 0;
}

.craft-dialog-actions {
    position: sticky;
    bottom: -18px;
    z-index: 2;
    margin: var(--space-12) calc(-1 * var(--space-20)) calc(-1 * var(--space-20)) !important;
    padding: var(--space-12) var(--space-20) var(--space-20) !important;
    border-top: 1px solid var(--craft-modal-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--craft-modal-bg) 0%, transparent), var(--craft-modal-bg) 34%, var(--craft-modal-bg));
}

.craft-dialog-actions .modal-btn {
    min-height: 42px;
    border-radius: var(--radius-md);
}

@media (max-width: 620px) {
    body.game-page .craft-modal-overlay {
        align-items: stretch;
        padding: 0;
    }

    body.game-page .craft-modal-overlay .alchemy-modal.modal--decorated,
    body.game-page .craft-modal-overlay .craft-modal-shell.gc-dialog.craft-gc {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .craft-modal-chrome {
        flex: 0 0 auto;
        /* 顶部只留安全区，避免与 head padding 叠加（此前 safe+10+18 三层堆叠）；
           左右 14px 必须保留：head 自身只带左 2px（14+2≈全局 head-inline），
           清零会让「炼造」标题与短条贴边。 */
        padding: env(safe-area-inset-top, 0px) var(--space-14) 0;
        box-shadow: 0 8px 16px color-mix(in srgb, #000 12%, transparent);
    }

    .craft-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        padding: var(--space-10) var(--space-10) calc(var(--space-20) + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.game-page .craft-modal-overlay .craft-primary-tabs.crafting-tabs {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-6);
        margin: var(--space-10) 0 var(--space-10);
        padding: 0 0 var(--space-10);
        overflow-x: auto;
        background: transparent;
        box-shadow: none;
        border: 0;
    }

    body.game-page .craft-modal-overlay .craft-primary-tab.crafting-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        height: 44px;
        min-width: 56px;
        padding: 0 var(--space-14);
        text-align: center;
        font-size: var(--font-body);
    }

    body.game-page .craft-modal-overlay .craft-primary-tab:hover {
        transform: none;
    }

    .craft-modal-panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-10);
        min-height: auto;
        overflow: visible;
    }

    .craft-status-section,
    .craft-recipe-section {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
    }

    .craft-status-section .craft-section-head {
        display: none;
    }

    .craft-mobile-status-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-10);
        width: 100%;
        min-height: 44px;
        margin: 0 0 var(--space-8);
        padding: var(--space-10) var(--space-12);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--bg-panel);
        color: var(--text-primary);
        font: inherit;
        text-align: left;
        cursor: pointer;
        touch-action: manipulation;
        box-sizing: border-box;
    }

    .craft-mobile-status-toggle__main {
        min-width: 0;
        color: var(--text-primary);
        font-size: var(--font-body);
        font-weight: 700;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .craft-mobile-status-toggle__hint {
        flex: 0 0 auto;
        color: var(--text-muted);
        font-size: var(--font-caption);
        font-weight: 600;
        line-height: 1.3;
        white-space: nowrap;
    }

    .craft-mobile-status-toggle.is-collapsed {
        border-color: color-mix(in srgb, var(--accent-jade) 36%, var(--border-color));
        background: color-mix(in srgb, var(--accent-jade) 6%, var(--bg-panel));
    }
    .craft-mobile-status-toggle.is-collapsed .craft-mobile-status-toggle__hint {
        color: var(--text-jade, var(--accent-jade));
    }

    /* 手机折叠：只留顶部摘要条，炉火/许愿隐藏以腾出配方列表 */
    .craft-status-section--collapsed .alchemy-furnace-bar {
        display: none !important;
    }
    .craft-status-section--collapsed .wish-slot-bar {
        display: none !important;
    }
    .craft-status-section:not(.craft-status-section--collapsed) .craft-mobile-status-toggle {
        margin-bottom: var(--space-8);
    }

    body.game-page .craft-modal-overlay .craft-status-card.craft-furnace-card {
        margin: 0;
    }
    body.game-page .craft-modal-overlay .craft-wish-card {
        margin-top: var(--space-8);
    }

    .furnace-row-trail {
        width: 100%;
        justify-content: flex-start;
    }
    .furnace-actions {
        flex: 1 1 auto;
    }
    .furnace-actions__btns {
        flex: 1 1 auto;
    }
    .furnace-btn {
        height: 32px;
        min-height: 32px;
        padding: 0 var(--space-14);
        font-size: var(--font-label);
        flex: 1 1 0;
        min-width: 0;
    }

    body.game-page .craft-modal-overlay .alchemy-recipes {
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
        padding-bottom: calc(var(--space-32) + env(safe-area-inset-bottom));
    }

    .craft-special-panel {
        overflow: visible;
    }

    .craft-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    body.game-page .craft-modal-overlay .craft-subtabs {
        justify-content: flex-start;
        max-width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--space-2);
    }

    body.game-page .craft-modal-overlay .craft-subtab {
        flex: 0 0 auto;
        white-space: nowrap;
    }

}

@media (max-width: 520px) {

    body.game-page .craft-modal-overlay .craft-primary-tab.crafting-tab {
        min-height: 44px;
        height: 44px;
        font-size: var(--font-body);
    }

    .craft-section-title {
        font-size: var(--font-body);
    }

    .craft-dialog-host {
        padding: var(--space-10) !important;
    }

    .craft-dialog-section {
        padding: var(--space-10);
    }

    .craft-dialog-actions,
    body.game-page .craft-modal-overlay .craft-dialog-actions.gc-foot,
    .craft-subdialog .craft-dialog-actions.gc-foot {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
        margin: 0 !important;
        padding: var(--space-12) var(--space-12) calc(var(--space-12) + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* 二级短表单（化身服药等）：取消/主操作并排，勿整列堆叠占高 */
    .craft-subdialog .gc-foot.craft-dialog-actions {
        flex-direction: row;
        gap: var(--space-10);
    }
    .craft-subdialog .gc-foot.craft-dialog-actions .modal-btn {
        width: auto;
        flex: 1 1 0;
        min-height: 44px;
    }

    .craft-dialog-actions .modal-btn,
    .craft-dialog-actions .btn-craft {
        width: 100%;
        min-height: 44px;
    }

    body.game-page .craft-modal-overlay .craft-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
        width: 100%;
    }

    body.game-page .craft-modal-overlay .btn-craft {
        min-height: 44px;
        flex: 1 1 auto;
        font-size: var(--font-body);
    }
}

/* 二级炼造弹窗 gc 壳：高度随内容，勿被 flex 拉满视口（否则脚钮沉底、中部大空白） */
/* 外壳宽度由 game-dialog.css compact 档几何锁统一裁定（原 420 声明长期被锁压制） */
.craft-subdialog.gc-dialog.craft-gc {
    height: auto !important;
    max-height: min(85dvh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 0 0 auto;
    align-self: center;
}
.craft-subdialog .craft-dialog-body.gc-mid,
.craft-subdialog .gc-mid.craft-dialog-host {
    /* grow=0：内容少时不撑空白；basis 仍可在触顶 max-height 后滚动 */
    flex: 0 1 auto !important;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* 窄屏二级弹窗：仍居中自适应，勿误吃 mobile-fullscreen 全高 */
@media (max-width: 620px) {
    .craft-modal-overlay .craft-subdialog.gc-dialog.craft-gc,
    .modal-overlay .craft-subdialog.gc-dialog.craft-gc {
        width: min(94vw, 420px) !important;
        max-width: 420px !important;
        height: auto !important;
        max-height: min(85dvh, 640px) !important;
        border-radius: var(--radius-lg) !important;
        align-self: center;
        margin: auto;
    }
}
.craft-subdialog .gc-foot.craft-dialog-actions {
    flex-shrink: 0;
    margin: 0 !important;
    padding: var(--space-12) var(--space-14) calc(var(--space-14) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: row;
    gap: var(--space-10);
}
.craft-subdialog .gc-foot.craft-dialog-actions .modal-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
}

/* ── 化身服药 · cip ── */
.craft-subdialog.cip-dialog {
    max-width: 400px;
}
.cip-mid.craft-dialog-body,
.cip-mid.gc-mid {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-8) var(--space-14) var(--space-10) !important;
}
.cip-tip {
    flex: 0 0 auto;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--craft-modal-line, var(--border-color));
    border-radius: var(--radius-md);
    background: var(--craft-modal-raised, var(--bg-card-hover));
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 1.55;
}
/* #6629 化身喂恢复丹：分类筛选 + 面板入口 */
.cip-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    flex: 0 0 auto;
}
.cip-filter-tab {
    flex: 1 1 auto;
    min-height: 36px;
    min-width: 64px;
    padding: var(--space-6) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel, var(--bg-card));
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}
.cip-filter-tab small {
    font-size: var(--font-micro);
    font-weight: 500;
    color: var(--text-muted);
}
.cip-filter-tab.is-active {
    border-color: color-mix(in srgb, var(--accent-jade) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 14%, var(--bg-panel, var(--bg-card)));
    color: var(--text-jade, var(--accent-jade));
}
.cip-filter-tab.is-active small {
    color: color-mix(in srgb, var(--accent-jade) 70%, var(--text-muted));
}
.cip-empty {
    padding: var(--space-16);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-label);
}
.cip-list.craft-dialog-list {
    flex: 0 1 auto;
    max-height: min(48dvh, 360px);
    gap: var(--space-8);
    margin: 0;
    padding: 0;
}
.cip-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 64px;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--craft-modal-line, var(--border-color));
    border-radius: var(--radius-md);
    background: var(--bg-panel, var(--bg-card));
    box-sizing: border-box;
    flex-shrink: 0;
}
.cip-row__info { min-width: 0; }
.cip-row__name {
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 品阶色：.cip-row__name 特异性高于全局 .rarity-N，需叠加选择器才能上色 */
.cip-row__name.rarity-1 { color: var(--rarity-1); }
.cip-row__name.rarity-2 { color: var(--rarity-2); }
.cip-row__name.rarity-3 { color: var(--rarity-3); }
.cip-row__name.rarity-4 { color: var(--rarity-4); }
.cip-row__name.rarity-5 { color: var(--rarity-5); }
.cip-row__meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.35;
}
.cip-row__qty {
    width: 72px;
    min-width: 72px;
    height: 36px;
    min-height: 36px;
    padding: var(--space-4) var(--space-6);
    text-align: center;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}
.cip-row__btn {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 var(--space-8) !important;
    font-size: var(--font-label) !important;
    width: 100%;
}
@media (max-width: 380px) {
    .cip-row {
        grid-template-columns: minmax(0, 1fr) 64px 56px;
        gap: var(--space-6);
        padding: var(--space-10) var(--space-10);
    }
    .cip-row__qty { width: 64px; min-width: 64px; }
}
.craft-dialog-value {
    text-align: center;
    margin-bottom: var(--space-8);
    color: var(--text-gold);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    body.game-page .craft-modal-overlay .craft-primary-tab,
    .craft-dialog-choice {
        transition: none;
    }
}


/* ===== PvP 对战 · B 对席 + gc 弹窗 ===== */
.pvp-b-shell {
    padding: 0 0 var(--space-4);
}

.pvp-b-kicker {
    font-size: var(--font-caption);
    letter-spacing: 0.14em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.pvp-b-area {
    font-family: var(--font-display, var(--font-serif));
    font-size: var(--font-page-title);
    letter-spacing: 0.14em;
    color: var(--text-primary);
    line-height: 1.25;
    margin-bottom: var(--space-4);
}

.pvp-b-sub {
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 var(--space-14);
}

.pvp-player-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    max-height: min(52vh, 420px);
    overflow-y: auto;
}

/* 对席笺 */
.pvp-seat-card {
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-card, var(--glass-white-2));
    padding: var(--space-14) var(--space-14) var(--space-12);
}

.pvp-seat-vs {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    gap: var(--space-6);
    align-items: center;
    margin-bottom: var(--space-12);
}

.pvp-seat-side {
    min-width: 0;
}

.pvp-seat-side--you {
    text-align: right;
}

.pvp-seat-who {
    font-size: var(--font-micro);
    letter-spacing: 0.14em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.pvp-seat-name {
    font-family: var(--font-serif);
    font-size: var(--font-action);
    letter-spacing: 0.06em;
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.pvp-seat-name a {
    color: inherit;
    text-decoration: none;
}

.pvp-seat-name a:hover {
    color: var(--text-gold);
}

.pvp-seat-meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
}

.pvp-seat-mid {
    text-align: center;
    font-family: var(--font-display, var(--font-serif));
    font-size: var(--font-body);
    color: var(--text-gold);
    letter-spacing: 0.12em;
    opacity: 0.9;
}

.pvp-seat-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
}

.pvp-seat-actions .modal-btn,
.pvp-seat-actions .pvp-seat-btn {
    height: 34px;
    min-height: 34px;
    padding: 0 var(--space-10);
    font-size: var(--font-label);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}

.pvp-seat-btn--jade {
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 38%, transparent);
    color: var(--text-jade, var(--accent-jade));
}

.pvp-seat-btn--jade:hover {
    background: color-mix(in srgb, var(--accent-jade) 18%, transparent);
}

.pvp-seat-btn--danger {
    background: color-mix(in srgb, var(--accent-crimson) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-crimson) 36%, transparent);
    color: var(--text-danger, var(--accent-crimson));
}

.pvp-seat-btn--danger:hover {
    background: color-mix(in srgb, var(--accent-crimson) 16%, transparent);
}

.pvp-b-refresh {
    margin-top: var(--space-10);
    width: 100%;
    height: 36px;
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.pvp-b-refresh:hover {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
}

.pvp-b-note {
    margin: var(--space-12) 0 0;
    font-size: var(--font-caption);
    line-height: 1.65;
    color: var(--text-muted);
}

/* 宗门等仍用色点时的兼容 */
.pvp-mode-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pvp-mode-dot.safe { background: var(--success-color); }
.pvp-mode-dot.caution { background: var(--accent-orange); }
.pvp-mode-dot.danger { background: var(--color-danger, var(--accent-crimson)); }

/* —— PvP gc 弹窗共用 · design/pvp-overlays —— */
.pvp-gc.gc-dialog,
.modal-content.modal--decorated.gc-dialog.pvp-gc {
    max-width: 400px;
}

.pvp-gc .gc-mid {
    text-align: left;
}

/* 锁层：更深 scrim · 无点透 */
.modal-overlay.pvp-lock-overlay,
.modal-overlay.ambush-lock-overlay {
    background: color-mix(in srgb, #1c1a18 62%, transparent);
    z-index: var(--z-overlay-top, 1200);
}
html.theme-dark .modal-overlay.pvp-lock-overlay,
html.theme-dark .modal-overlay.ambush-lock-overlay,
body.theme-dark .modal-overlay.pvp-lock-overlay,
body.theme-dark .modal-overlay.ambush-lock-overlay {
    background: rgba(4, 6, 8, 0.78);
}

.pvp-gc.pvp-gc--lock {
    pointer-events: auto;
}

.pvp-gc-stamp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 var(--space-10);
}
.pvp-gc-stamp > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-gold, var(--accent-gold));
    flex-shrink: 0;
}
.pvp-gc[data-tone="danger"] .pvp-gc-stamp { color: var(--text-danger, var(--accent-crimson)); }
.pvp-gc[data-tone="danger"] .pvp-gc-stamp > i { background: var(--accent-crimson); }
.pvp-gc[data-tone="jade"] .pvp-gc-stamp { color: var(--text-jade, var(--accent-jade)); }
.pvp-gc[data-tone="jade"] .pvp-gc-stamp > i { background: var(--accent-jade); }

.pvp-gc-q {
    font-size: var(--font-action);
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
    margin: 0 0 var(--space-6);
}

.pvp-gc-sub {
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 var(--space-12);
}

.pvp-gc-detail {
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.55;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
    margin: 0 0 var(--space-12);
}

.pvp-gc-irrev {
    font-size: var(--font-caption);
    color: var(--text-danger, var(--accent-crimson));
    line-height: 1.55;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-12);
    border: 1px dashed color-mix(in srgb, var(--accent-crimson) 35%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 6%, transparent);
}

/* 确认弹窗 / pvp 共用条目列表 */
.gc-dialog ul.pvp-gc-bullets,
.pvp-gc-bullets {
    margin: 0 0 var(--space-8);
    padding: 0 0 0 1.15em;
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.7;
    list-style: disc;
}
.gc-dialog ul.pvp-gc-bullets li,
.pvp-gc-bullets li {
    margin-bottom: var(--space-2);
}

.pvp-gc-timer {
    text-align: center;
    padding: var(--space-8) 0 0;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-hero-xl);
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.pvp-gc[data-tone="danger"] .pvp-gc-timer {
    color: var(--text-danger, var(--accent-crimson));
}
.pvp-gc[data-tone="jade"] .pvp-gc-timer {
    color: var(--text-jade, var(--accent-jade));
}
.pvp-gc-timer--md {
    font-size: var(--font-hero-lg);
}

.pvp-gc-timer-unit {
    text-align: center;
    font-size: var(--font-label);
    color: var(--text-muted);
    margin: var(--space-4) 0 var(--space-8);
}

.pvp-gc-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    margin: 0 0 var(--space-10);
    font-size: var(--font-label);
    color: var(--text-secondary);
}
.pvp-gc-meta b {
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.pvp-gc-seal {
    display: inline-block;
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-sm);
    font-size: var(--font-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    color: var(--text-jade, var(--accent-jade));
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
}
.pvp-gc-seal.is-lose {
    border-color: color-mix(in srgb, var(--accent-crimson) 40%, transparent);
    color: var(--text-danger, var(--accent-crimson));
    background: color-mix(in srgb, var(--accent-crimson) 10%, transparent);
}

.pvp-mode-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-12) var(--space-12);
    margin: 0 0 var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.12s, background 0.12s;
}

.pvp-mode-opt__title {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
}

.pvp-mode-opt__sub {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.45;
}

.pvp-mode-opt.is-on {
    border-color: color-mix(in srgb, var(--accent-jade) 42%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}

.pvp-mode-opt.is-on-danger {
    border-color: color-mix(in srgb, var(--accent-crimson) 42%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 8%, transparent);
}

.pvp-mode-opt.is-on .pvp-mode-opt__title { color: var(--text-jade, var(--accent-jade)); }
.pvp-mode-opt.is-on-danger .pvp-mode-opt__title { color: var(--text-danger, var(--accent-crimson)); }

.pvp-gc .gc-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
    padding: var(--space-12) var(--space-16) var(--space-16);
}

.pvp-gc .gc-foot .modal-btn {
    flex: 1;
    min-width: 0;
}

.pvp-gc .gc-foot .modal-btn--full {
    flex: 1 1 100%;
}

/* 邂逅三钮：主操作占满一行 */
.pvp-gc.pvp-encounter-gc .gc-foot .modal-btn--outline {
    flex: 1 1 30%;
}
.pvp-gc.pvp-encounter-gc .gc-foot .modal-btn--gold {
    flex: 1 1 100%;
}

/* 结果 · 战果宽笺 520 */
.pvp-gc.pvp-result-gc,
.modal-content.modal--decorated.gc-dialog.pvp-gc.pvp-result-gc {
    max-width: min(520px, 94vw);
    width: 94%;
    max-height: min(82vh, 640px);
    display: flex;
    flex-direction: column;
}

.pvp-gc.pvp-result-gc .gc-mid {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(58vh, 480px);
}

.pvp-result-summary {
    font-size: var(--font-body-lg);
    color: var(--text-primary);
    margin: 0 0 var(--space-8);
    line-height: 1.55;
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.pvp-effect {
    font-size: var(--font-body);
    color: var(--text-gold, var(--accent-gold));
    margin: var(--space-6) 0;
    font-weight: 600;
}

.pvp-effect-note {
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}

.pvp-combat-log {
    max-height: 220px;
    overflow-y: auto;
    text-align: left;
    padding: var(--space-10) var(--space-12);
    background: var(--bg-panel, var(--shadow-black-2));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: var(--space-10) 0 0;
    font-size: var(--font-label);
    line-height: 1.6;
}

.pvp-log-line {
    padding: var(--space-4) 0;
    color: var(--text-secondary);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.pvp-log-line:last-child {
    border-bottom: none;
}

.pvp-log-skip {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* 结果内嵌战报：圆角边框，无左轨 */
.pvp-gc.pvp-result-gc .arena-battle-overview,
.pvp-gc.pvp-result-gc .arena-battle-log {
    border-radius: var(--radius-md);
}
.pvp-gc.pvp-result-gc .arena-battle-overview {
    border-left-width: 1px !important;
}

/* ===== 灵宝司 ===== */
/* ===== 引渡殿 ===== */
.revive-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.revive-thanks-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}

.revive-thanks-card {
    padding: var(--space-10) var(--space-10);
    background: color-mix(in srgb, var(--craft-gold-bright) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--craft-gold-bright) 18%, transparent);
    border-radius: var(--radius-sm);
}

.revive-thanks-title {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    color: var(--text-primary);
    font-size: var(--font-label);
    line-height: 1.5;
}

.revive-thanks-title b {
    color: var(--text-gold);
}

.revive-thanks-meta {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.5;
}

.revive-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.revive-thanks-actions .btn-action {
    font-size: var(--font-caption);
    padding: var(--space-4) var(--space-10);
}

.revive-thanks-actions .btn-action--ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-color);
}

.revive-thanks-material-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--glass-white-2);
}

.revive-thanks-material-row span {
    min-width: 0;
}

.revive-thanks-material-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.dead-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-6) var(--space-8);
    background: color-mix(in srgb, var(--jimo-crimson) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--jimo-crimson) 12%, transparent);
    border-radius: var(--radius-sm);
}

.dead-player-name {
    font-size: var(--font-label);
    color: var(--text-primary);
}

.dead-player-name small {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.btn-revive-other {
    font-size: var(--font-caption) !important;
    padding: var(--space-4) var(--space-10) !important;
    white-space: nowrap;
}

.court-storage-desc {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin: 0 0 var(--space-8);
}

.storage-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.storage-item {
    padding: var(--space-8) var(--space-10);
    background: var(--glass-white-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

/* 寄存列表详情：先天词条 / 铭文 / 白板 等一行摘要（反馈 #4573） */
.storage-item__detail {
    margin: var(--space-2) 0 var(--space-6);
    font-size: var(--font-caption);
    line-height: 1.4;
    color: var(--text-muted);
    word-break: break-all;
}
.storage-item__detail.is-blank {
    color: color-mix(in srgb, var(--text-muted) 80%, transparent);
    font-style: italic;
}

.btn-deposit-item {
    font-size: var(--font-caption);
    padding: var(--space-2) var(--space-8);
    background: color-mix(in srgb, var(--success-color) 10%, transparent);
    color: var(--success-color);
    border: 1px solid color-mix(in srgb, var(--success-color) 30%, transparent);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-family: inherit;
}

.btn-deposit-item:hover {
    background: color-mix(in srgb, var(--success-color) 20%, transparent);
}


/* ===== 武道大会 专用按钮样式 ===== */

.tournament-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    min-height: 100%;
}

#tournamentContent .tournament-tab-panel[data-tournament-panel="guess"] .modal-info-card__title {
    flex: none;
    white-space: nowrap;
}

#tournamentContent .tournament-tab-panel[data-tournament-panel="guess"] .tournament-filter-select {
    flex: 1 1 150px;
    min-width: 130px;
}

/* 天机竞猜：说明、按钮、筛选分层，避免窄屏把按钮挤在同一行后互相遮挡 */
.tournament-guess-guide {
    margin-bottom: var(--space-12);
    padding: var(--space-12) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 28%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-jade) 5%, var(--bg-panel));
}

.tournament-guess-guide__head,
.tournament-guess-toolbar,
.tournament-guess-guide__rule,
.tournament-guess-card__eyebrow,
.tournament-guess-card__pool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.tournament-guess-guide__head > div,
.tournament-guess-toolbar__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
}

.tournament-guess-guide__eyebrow,
.tournament-guess-toolbar__eyebrow {
    color: var(--text-jade, var(--accent-jade));
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 1px;
}

.tournament-guess-guide__title,
.tournament-guess-toolbar__title {
    color: var(--text-primary);
    font-size: var(--font-body-lg);
    font-weight: 700;
    line-height: 1.35;
}

.tournament-guess-toolbar__title {
    font-size: var(--font-body);
}

.tournament-guess-guide__tag {
    flex: none;
    padding: var(--space-4) var(--space-8);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
    border-radius: var(--radius-pill);
    color: var(--text-gold);
    font-size: var(--font-micro);
    font-weight: 700;
    white-space: nowrap;
}

.tournament-guess-guide__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-10);
}

.tournament-guess-guide__step {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    padding: var(--space-8) var(--space-6);
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: var(--radius-sm);
    background: var(--glass-white-3);
}

.tournament-guess-guide__step > b {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-jade) 17%, transparent);
    color: var(--text-jade, var(--accent-jade));
    font-size: var(--font-caption);
    line-height: 20px;
    text-align: center;
}

.tournament-guess-guide__step > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-2);
}

.tournament-guess-guide__step strong {
    color: var(--text-primary);
    font-size: var(--font-caption);
    line-height: 1.3;
}

.tournament-guess-guide__step small,
.tournament-guess-guide__rule span,
.tournament-guess-toolbar__hint {
    color: var(--text-muted);
    font-size: var(--font-micro);
    line-height: 1.45;
}

.tournament-guess-guide__rule {
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    border-top: 1px dashed color-mix(in srgb, var(--border-color) 76%, transparent);
}

.tournament-guess-guide__rule b {
    flex: none;
    color: var(--text-gold);
    font-size: var(--font-micro);
    line-height: 1.45;
}

.tournament-guess-toolbar {
    align-items: flex-end;
    margin: var(--space-4) 0 var(--space-8);
}

.tournament-guess-toolbar__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 0 0 176px;
    gap: var(--space-6);
}

.tournament-guess-history-btn,
.tournament-guess-refresh-btn {
    min-height: 40px;
    padding: var(--space-8) var(--space-10);
    font-size: var(--font-label);
    white-space: nowrap;
}

.tournament-guess-filters {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 30px;
    margin-bottom: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border: 1px solid color-mix(in srgb, var(--border-color) 66%, transparent);
    border-radius: var(--radius-sm);
    background: var(--glass-white-2);
}

.tournament-guess-filters__label {
    flex: none;
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-weight: 700;
}

.tournament-guess-filters__controls {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--space-6);
    min-width: 0;
}

.tournament-guess-filters .tournament-filter-select {
    flex: 1 1 130px;
    min-width: 0;
}

/* 武道历程：专用成绩页排版，避免复用通用 kpi/card 在窄屏下产生横向溢出 */
.tournament-career-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--space-12) var(--space-2) var(--space-10);
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
}
.tournament-career-toolbar__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--space-2);
}
.tournament-career-toolbar__eyebrow,
.tournament-career-section__eyebrow {
    color: var(--text-jade, var(--accent-jade));
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.3;
}
.tournament-career-toolbar__title {
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--font-title);
    font-weight: 700;
    line-height: 1.25;
}
.tournament-career-toolbar__hint {
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tournament-career-refresh {
    flex: none;
    min-width: 52px;
}

#tournamentContent .tournament-career-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-top: var(--space-12);
}
.tournament-career-kpi {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    width: 100%;
    min-width: 0;
    margin: 0;
}
.tournament-career-kpi__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--space-12) var(--space-8) var(--space-10);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.tournament-career-kpi__cell::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: color-mix(in srgb, var(--text-muted) 58%, transparent);
}
.tournament-career-kpi__cell.is-gold {
    border-color: color-mix(in srgb, var(--accent-gold) 30%, var(--border-color));
}
.tournament-career-kpi__cell.is-gold::before { background: var(--accent-gold); }
.tournament-career-kpi__cell.is-jade {
    border-color: color-mix(in srgb, var(--accent-jade) 30%, var(--border-color));
}
.tournament-career-kpi__cell.is-jade::before { background: var(--accent-jade); }
.tournament-career-kpi__value {
    color: var(--text-primary);
    font-size: var(--font-page-title);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.tournament-career-kpi__cell.is-gold .tournament-career-kpi__value { color: var(--text-gold); }
.tournament-career-kpi__cell.is-jade .tournament-career-kpi__value { color: var(--text-jade, var(--accent-jade)); }
.tournament-career-kpi__label {
    margin-top: var(--space-6);
    color: var(--text-primary);
    font-size: var(--font-label);
    font-weight: 700;
    line-height: 1.25;
}
.tournament-career-kpi__note {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-micro);
    line-height: 1.3;
    white-space: nowrap;
}

.tournament-career-section {
    min-width: 0;
    margin-top: var(--space-16);
}
.tournament-career-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
    min-width: 0;
    margin: 0 var(--space-2) var(--space-8);
}
.tournament-career-section__head h4 {
    margin: var(--space-2) 0 0;
    color: var(--text-primary);
    font-size: var(--font-body-lg);
    font-weight: 700;
    line-height: 1.25;
}
.tournament-career-section__count {
    flex: none;
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.4;
}
.tournament-career-record,
.tournament-career-champion {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--border-color) 86%, transparent);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.tournament-career-record {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-12) var(--space-12) var(--space-14);
    margin-top: var(--space-8);
}
.tournament-career-record__main { min-width: 0; }
.tournament-career-record__title {
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tournament-career-record__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-10);
    margin-top: var(--space-6);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.4;
}
.tournament-career-record__meta span { min-width: 0; }
.tournament-career-record__rank {
    flex: none;
    min-width: 54px;
    box-sizing: border-box;
    padding: var(--space-6) var(--space-8);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--font-label);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}
.tournament-career-record__rank.is-champion {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--accent-gold) 44%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}
.tournament-career-record__rank.is-top8 {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 9%, transparent);
}
.tournament-career-empty {
    margin: 0;
    padding: var(--space-20) var(--space-12);
    border: 1px dashed color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.6;
    text-align: center;
}
.tournament-career-champion {
    padding: var(--space-12) var(--space-12);
    margin-top: var(--space-8);
}
.tournament-career-champion__season {
    color: var(--text-gold);
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.35;
}
.tournament-career-champion__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-8);
}
.tournament-career-champion__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-10);
    min-width: 0;
    padding-top: var(--space-6);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.4;
}
.tournament-career-champion__row strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-gold);
    font-size: var(--font-label);
    font-weight: 700;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tournament-career-champion__empty {
    margin-top: var(--space-6);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.5;
}

.tournament-tab-panel {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
}

#tournamentPanel > .tournament-event-switch {
    flex: none;
    display: grid;
    /* 九霄武道 / 天衡论道 / 宗门大比 三入口 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    width: auto;
    margin: var(--space-8) var(--space-12) 0;
    margin-bottom: 0;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
    overflow: visible;
}

.tournament-event-switch .tab {
    width: 100%;
    min-height: 36px;
    padding: var(--space-6) var(--space-12);
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--font-body);
    font-weight: 600;
}

.tournament-event-switch .tab.on {
    border: 0;
    background: var(--color-bg-surface);
    color: var(--color-action-primary);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}

#fairTournamentContent,
#sectCupTournamentContent {
    --fair-tournament-card-border: var(--color-border-default);
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: var(--space-12);
    min-width: 0;
    padding: var(--space-6) var(--space-12) var(--space-20);
    background: var(--color-bg-surface);
    font-size: var(--font-body);
    line-height: 1.5;
}

/* 宗门大比：与天衡同列 workbench 内容区，滚动在内容层 */
#sectCupTournamentContent {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* 宗门大比二级 tab：四列（无「更多」） */
#sectCupTournamentContent .sect-cup-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 灵界 / 仙界池切换：复用 fair tab 视觉，双列 */
.sect-cup-pool-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
}

.sect-cup-pool-switch .fair-tournament-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.sect-cup-pool-count {
    color: var(--color-text-muted);
    font-size: var(--font-micro);
    font-weight: 500;
}

.sect-cup-pool-switch .fair-tournament-tab.on .sect-cup-pool-count {
    color: color-mix(in srgb, var(--color-action-primary) 70%, var(--color-text-muted));
}

/* 对阵卡脚：五人对位明细纵向 */
.sect-cup-match-list {
    grid-template-columns: minmax(0, 1fr);
}

.sect-cup-match-foot {
    display: grid !important;
    gap: var(--space-2);
    justify-content: stretch !important;
    align-items: stretch !important;
    font-size: var(--font-caption);
    color: var(--color-text-secondary);
    line-height: 1.45;
}

.sect-cup-bout {
    min-width: 0;
}

.sect-cup-rule-ul {
    margin: 0;
    padding-left: var(--space-16);
}

.sect-cup-rule-ul li + li {
    margin-top: var(--space-4);
}

.sect-cup-pick-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border-default) 70%, transparent);
    cursor: pointer;
}

.sect-cup-pick-slot {
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 1;
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, transparent);
}

.sect-cup-pick-slot[hidden] {
    display: none;
}

.sect-cup-pick-row.is-picked {
    color: var(--text-primary);
}

.sect-cup-modal-mid {
    overflow-y: auto;
    max-height: min(72dvh, 640px);
    display: grid;
    align-content: start;
    gap: var(--space-12);
    padding: var(--space-6) var(--space-12) var(--space-16);
}

@media (max-width: 620px) {
    #tournamentPanel > .tournament-event-switch {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .tournament-event-switch .tab {
        padding: var(--space-6) var(--space-4);
        font-size: var(--font-label);
    }
    #sectCupTournamentContent,
    #fairTournamentContent {
        padding: var(--space-6) var(--space-10) var(--space-20);
    }
    #sectCupTournamentContent .sect-cup-tabs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-2);
    }
    #sectCupTournamentContent .sect-cup-tabs .fair-tournament-tab {
        padding: var(--space-6) var(--space-2);
        font-size: var(--font-micro);
    }
}

.fair-tournament-summary,
.fair-tournament-self-card,
.fair-tournament-opponent,
.fair-tournament-match-card,
.fair-tournament-guess-card,
.fair-tournament-career-list > article {
    border: 1px solid var(--fair-tournament-card-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
}

.fair-tournament-summary {
    display: grid;
    gap: var(--space-10);
    padding: var(--space-12);
}

.fair-tournament-summary__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.fair-tournament-summary__metrics > span,
.fair-tournament-stat-grid > span,
.fair-tournament-career-stats > span {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    text-align: center;
}

.fair-tournament-summary__metrics small,
.fair-tournament-stat-grid small,
.fair-tournament-roster small,
.fair-tournament-career-stats small,
.fair-tournament-opponent small,
.fair-tournament-rank-row small,
.fair-tournament-guess-players small,
.fair-tournament-career-list small {
    color: var(--color-text-muted);
    font-size: var(--font-micro);
    font-weight: 400;
}

.fair-tournament-summary__metrics small {
    font-size: var(--font-caption);
}

.fair-tournament-summary__metrics strong {
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--font-body);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fair-tournament-stat-grid strong,
.fair-tournament-roster strong {
    overflow: hidden;
    color: var(--color-action-primary);
    font-size: var(--font-action);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fair-tournament-career-stats strong {
    overflow: hidden;
    color: var(--color-action-primary);
    font-size: var(--font-title);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fair-tournament-summary__actions,
.fair-tournament-self-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-8);
}

.fair-tournament-summary__actions {
    margin-top: 0;
}

.fair-tournament-card__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-8);
}

#fairTournamentContent .fair-tournament-summary__actions .btn--gold,
#sectCupTournamentContent .fair-tournament-summary__actions .btn--gold,
#sectCupPickModal .btn--gold {
    border-color: var(--color-action-primary);
    background: var(--color-action-primary);
    color: var(--text-on-gold);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--color-action-primary) 22%, transparent);
}

#fairTournamentContent .fair-tournament-self-actions .btn--danger,
#sectCupTournamentContent .fair-tournament-self-actions .btn--danger {
    border-color: var(--color-status-danger);
    background: var(--color-status-danger);
    color: var(--text-on-gold);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--color-status-danger) 18%, transparent);
}

.fair-tournament-tabs {
    position: sticky;
    z-index: 12;
    top: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
}

#fairTournamentContent .btn,
#sectCupTournamentContent .btn,
#sectCupPickModal .btn {
    height: auto;
    min-height: 40px;
    padding: 0 var(--space-12);
    border: 1px solid var(--color-border-emphasis);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}

#fairTournamentContent .btn.sm,
#sectCupTournamentContent .btn.sm {
    padding-inline: var(--space-10);
    font-size: var(--font-label);
}

.fair-tournament-tab,
.fair-tournament-more > summary,
.fair-tournament-more__item {
    min-height: 36px;
    padding: var(--space-6) var(--space-4);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.fair-tournament-tab.on,
.fair-tournament-more.on > summary {
    background: var(--color-bg-surface);
    color: var(--color-action-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-text-primary) 6%, transparent);
}

.fair-tournament-more {
    position: relative;
    min-width: 0;
}

.fair-tournament-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    list-style: none;
}

.fair-tournament-more > summary::-webkit-details-marker,
.fair-tournament-fold > summary::-webkit-details-marker {
    display: none;
}

.fair-tournament-more__menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--space-4));
    right: 0;
    display: grid;
    min-width: 148px;
    padding: var(--space-6);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text-primary) 14%, transparent);
}

.fair-tournament-more__item.on,
.fair-tournament-more__item:hover {
    color: var(--color-action-primary);
    background: var(--color-bg-subtle);
}

.fair-tournament-panel,
#fairTournamentContent > .tournament-tab-panel {
    display: grid;
    gap: 0;
    min-width: 0;
}

.fair-tournament-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-height: 40px;
    margin: var(--space-16) 0 var(--space-8);
}

/* 双败赛制：问鼎战面板内的组别小节头（胜者组 / 败者组 / 决赛夜） */
.fair-tournament-round-group {
    margin: var(--space-12) 0 var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-default);
    color: var(--color-text-secondary);
    font-size: var(--font-label);
    font-weight: 600;
    letter-spacing: 1px;
}

.fair-tournament-panel > .fair-tournament-section-head:first-child,
#fairTournamentContent > .tournament-tab-panel > .fair-tournament-section-head:first-child,
#fairTournamentCareer > .fair-tournament-section-head:first-child {
    margin-top: var(--space-16);
}

.fair-tournament-section-head__title {
    padding-bottom: var(--space-4);
    border-bottom: 2px solid color-mix(in srgb, var(--color-action-primary) 55%, transparent);
    color: var(--color-action-primary);
    font-family: var(--font-display);
    font-size: var(--font-title);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1px;
}

.fair-tournament-section-head__tip,
.fair-tournament-muted {
    color: var(--color-text-muted);
    font-size: var(--font-caption);
    text-align: right;
}

.fair-tournament-notice,
.fair-tournament-rule-note {
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font-size: var(--font-caption);
    line-height: 1.55;
}

.fair-tournament-notice {
    margin-bottom: var(--space-12);
}

.fair-tournament-self-card {
    display: grid;
    gap: var(--space-10);
    padding: var(--space-12);
}

.fair-tournament-card__head {
    justify-content: space-between;
}

.fair-tournament-card__name,
.fair-tournament-opponent strong,
.fair-tournament-rank-row__player strong,
.fair-tournament-match-player strong,
.fair-tournament-career-list strong {
    color: var(--color-text-primary);
    font-weight: 700;
}

.fair-tournament-card__name,
.fair-tournament-opponent strong {
    font-size: var(--font-body-lg);
}

.fair-tournament-card__head .card__meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    line-height: 1.55;
}

.fair-tournament-stat-grid,
.fair-tournament-career-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

/* #10100：出战名单自适应胶囊——固定四列等宽会把长道号截成「太衡…」；
   按内容自适应宽度（上限 150px），超长名换行排布 */
.fair-tournament-roster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.fair-tournament-roster > span {
    flex: 0 1 auto;
    max-width: 150px;
    min-width: 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    text-align: center;
}

.fair-tournament-opponents,
.fair-tournament-match-list,
.fair-tournament-guess-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.fair-tournament-opponent {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-12);
    background: color-mix(in srgb, var(--color-bg-surface) 88%, var(--color-bg-subtle));
}

.fair-tournament-opponent__head,
.fair-tournament-opponent__foot,
.fair-tournament-match-card__head,
.fair-tournament-match-card__foot,
.fair-tournament-history-row,
.fair-tournament-guess-history > article,
.fair-tournament-career-list > article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.fair-tournament-opponent__head span,
.fair-tournament-match-card__foot b {
    color: var(--color-action-primary);
    font-size: var(--font-caption);
}

.fair-tournament-opponent__head span {
    color: var(--color-text-muted);
    font-size: var(--font-caption);
}

.fair-tournament-opponent__head span b {
    margin-right: var(--space-2);
    color: var(--color-action-primary);
    font-size: var(--font-body-lg);
}

.fair-tournament-duel,
.fair-tournament-report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-width: 44px;
    min-height: 28px;
    padding: 0 var(--space-4);
    border: 0;
    background: transparent;
    color: var(--color-action-primary);
    font: inherit;
    font-size: var(--font-caption);
    font-weight: 700;
    cursor: pointer;
}

.fair-tournament-duel {
    min-width: 66px;
    min-height: 32px;
    padding: 0 var(--space-8);
    border: 1px solid color-mix(in srgb, var(--color-action-primary) 38%, var(--color-border-default));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-action-primary) 10%, transparent);
}

.fair-tournament-ranking,
.fair-tournament-guess-history {
    display: grid;
    gap: var(--space-4);
}

.fair-tournament-history-list,
.fair-tournament-career-list {
    display: grid;
    gap: var(--space-8);
}

.fair-tournament-rule-list,
.fair-tournament-match-list {
    gap: var(--space-6);
}

.fair-tournament-rank-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    min-height: 58px;
    padding: var(--space-6) var(--space-8);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
}

.fair-tournament-rank-row.is-me {
    background: color-mix(in srgb, var(--color-action-primary) 7%, var(--color-bg-surface));
}

.fair-tournament-rank-row__no {
    color: var(--color-action-primary);
    font-size: var(--font-body);
    font-weight: 700;
    text-align: center;
}

.fair-tournament-rank-row__player,
.fair-tournament-rank-row__result {
    display: grid;
    gap: var(--space-2);
}

.fair-tournament-rank-row__player strong {
    font-weight: 600;
}

.fair-tournament-rank-row__result {
    justify-items: end;
    text-align: right;
}

.fair-tournament-rank-row__result > strong {
    color: var(--color-action-primary);
    font-size: var(--font-body);
}

.fair-tournament-match-card {
    display: grid;
    gap: 0;
    padding: var(--space-8) var(--space-10);
    background: color-mix(in srgb, var(--color-bg-surface) 84%, var(--color-bg-subtle));
}

.fair-tournament-match-card.is-finished {
    background: var(--color-bg-surface);
}

.fair-tournament-match-card__head,
.fair-tournament-match-card__foot {
    color: var(--color-text-muted);
    font-size: var(--font-micro);
}

.fair-tournament-match-card__head {
    min-height: 24px;
}

.fair-tournament-match-card__foot {
    min-height: 28px;
    justify-content: flex-end;
}

.fair-tournament-match-card__foot > span:first-child:last-child {
    margin-right: auto;
}

.fair-tournament-match-card__head > strong {
    color: var(--color-text-secondary);
    font-size: var(--font-label);
    font-weight: 700;
}

.fair-tournament-match-card__score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
    min-height: 24px;
    margin-top: var(--space-4);
}

.fair-tournament-match-card__score > b {
    min-width: 50px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-6);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    color: var(--color-action-primary);
    font-size: var(--font-body);
}

.fair-tournament-match-player {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fair-tournament-match-player strong {
    color: var(--color-text-secondary);
    font-size: var(--font-body);
    font-weight: 600;
}

.fair-tournament-match-player--right {
    text-align: right;
}

.fair-tournament-match-player.is-winner strong {
    color: var(--color-action-primary);
    font-weight: 700;
}

/* ===== 问鼎对阵图（#9961）：工具栏 + 轮次时间线 ===== */
.fair-bracket-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin: var(--space-10) 0 var(--space-12);
}

.fair-bracket-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 40px;
    padding: 0 var(--space-14);
    border: 1px solid var(--color-border-emphasis);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-action-primary);
    font-size: var(--font-label);
    font-weight: 600;
    cursor: pointer;
}

.fair-bracket-toolbar__btn--primary {
    background: var(--color-action-primary);
    border-color: var(--color-action-primary);
    color: var(--text-on-gold);
}

.fair-bracket-toolbar__btn--on {
    border-color: var(--color-action-primary);
    box-shadow: inset 0 0 0 1px var(--color-action-primary);
}

.fair-bracket-toolbar__tip {
    color: var(--color-text-muted);
    font-size: var(--font-micro);
}

.fair-bracket-round {
    margin-bottom: var(--space-10);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.fair-bracket-round__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-6) var(--space-12);
    background: var(--color-bg-subtle);
    border-bottom: 1px solid var(--color-border-default);
}

.fair-bracket-round__head > b {
    font-size: var(--font-label);
    font-weight: 700;
    letter-spacing: 1px;
}

.fair-bracket-round__head > span {
    color: var(--color-text-muted);
    font-size: var(--font-micro);
}

.fair-bracket-round--wb .fair-bracket-round__head > b { color: var(--color-action-primary); }
.fair-bracket-round--lb .fair-bracket-round__head > b { color: var(--color-status-danger); }
.fair-bracket-round--gf .fair-bracket-round__head > b { color: var(--color-action-secondary); }

.fair-bracket-round__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    padding: var(--space-8);
}

.fair-bracket-round.is-past {
    opacity: 0.62;
}

.fair-bracket-round.is-now {
    border-color: color-mix(in srgb, var(--color-action-secondary) 55%, transparent);
}

.fair-bracket-round.is-now .fair-bracket-round__head > b { color: var(--color-action-secondary); }

.fair-tournament-match-card.is-mine {
    border: 1px solid color-mix(in srgb, var(--color-action-primary) 65%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-action-primary) 30%, transparent);
}

.fair-tournament-match-card.is-dimmed {
    opacity: 0.45;
}

.fair-tournament-match-card.is-mine.is-dimmed {
    opacity: 1;
}

.fair-tournament-match-player.is-me-player strong {
    color: var(--color-action-primary);
}

@media (max-width: 720px) {
    .fair-bracket-round__list {
        grid-template-columns: 1fr;
    }
}

/* ===== 公平对决 · 按功法套装入阵选择器（#10064） ===== */
.fd-loadout-pick-list {
    display: grid;
    gap: var(--space-8);
    max-height: min(48dvh, 420px);
    overflow-y: auto;
    padding: var(--space-2);
}

.fd-loadout-pick {
    display: grid;
    gap: var(--space-4);
    min-height: var(--pattern-touch-target);
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-bg-surface) 84%, var(--color-bg-subtle));
    cursor: pointer;
    text-align: left;
}

.fd-loadout-pick:active {
    border-color: var(--color-action-primary);
}

.fd-loadout-pick > strong {
    color: var(--color-action-primary);
    font-size: var(--font-label);
    font-weight: 700;
}

.fd-loadout-pick > span {
    color: var(--color-text-muted);
    font-size: var(--font-caption);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fair-tournament-fold {
    margin-top: var(--space-16);
    overflow: hidden;
    border: 1px solid var(--fair-tournament-card-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
}

.fair-tournament-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 var(--space-12);
    color: var(--color-text-secondary);
    font-size: var(--font-caption);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.fair-tournament-fold[open] > summary span {
    transform: rotate(45deg);
}

.fair-tournament-history-list,
.fair-tournament-rule-note {
    padding: 0 var(--space-8) var(--space-8);
}

.fair-tournament-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: 46px;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
}

.fair-tournament-history-row__result {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    font-size: var(--font-caption);
    font-weight: 700;
}

.fair-tournament-history-row__result.is-win,
.fair-tournament-guess-history .is-positive {
    color: var(--color-success);
}

.fair-tournament-history-row__result.is-loss,
.fair-tournament-guess-history .is-negative {
    color: var(--color-status-danger);
}

.fair-tournament-history-row__player {
    display: grid;
    flex: 1;
    gap: var(--space-2);
}

.fair-tournament-guess-card {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-10);
}

.fair-tournament-guess-players {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-6);
}

.fair-tournament-guess-players > span {
    display: grid;
    gap: var(--space-2);
    text-align: center;
}

.fair-tournament-guess-players > b {
    color: var(--color-text-muted);
    font-size: var(--font-micro);
}

.fair-tournament-guess-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.fair-tournament-stake {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
    font: inherit;
}

.fair-tournament-guess-history > article,
.fair-tournament-career-list > article {
    min-height: 52px;
    padding: var(--space-10) var(--space-12);
}

.fair-tournament-guess-history > article > span,
.fair-tournament-career-list > article > span:first-child {
    display: grid;
    flex: 1;
    gap: var(--space-2);
    min-width: 0;
}

.fair-tournament-career-list > article strong {
    font-size: var(--font-body-lg);
    line-height: 1.5;
}

.fair-tournament-career-list > article small {
    font-size: var(--font-caption);
    line-height: 1.55;
}

.fair-tournament-career-list > article .chip-kind {
    min-height: 24px;
    padding-inline: var(--space-8);
    font-size: var(--font-caption);
}

.fair-tournament-career-list > article > span:first-child > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fair-tournament-career-list > article.fair-tournament-champion {
    display: grid;
    align-items: stretch;
    gap: var(--space-8);
    min-height: 0;
}

.fair-tournament-champion__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-width: 0;
}

.fair-tournament-champion__head > span:first-child {
    display: grid;
    flex: 1;
    gap: var(--space-2);
    min-width: 0;
}

.fair-tournament-champion__head > span:first-child > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fair-tournament-champion__speech {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-body);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.fair-tournament-champion__speech.is-empty {
    color: var(--color-text-muted);
    font-size: var(--font-caption);
}

.fair-tournament-champion__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-8);
    flex: none;
}

.fair-tournament-champion__likes {
    color: var(--color-text-muted);
    font-size: var(--font-caption);
}

.fair-tournament-speech-like {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-10);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    color: var(--color-text-secondary);
    font: inherit;
    font-size: var(--font-label);
    cursor: pointer;
}

.fair-tournament-speech-like.is-on {
    border-color: color-mix(in srgb, var(--color-action-primary) 38%, var(--color-border-default));
    color: var(--color-action-primary);
}

.fair-tournament-career-stats {
    gap: 0;
    margin-bottom: 0;
    padding: var(--space-6);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
}

.fair-tournament-career-stats > span {
    gap: 0;
    padding: var(--space-6) var(--space-2);
    border-radius: 0;
    background: transparent;
}

.fair-tournament-career-stats > span + span {
    border-left: 1px solid var(--color-border-default);
}

.fair-tournament-rule {
    display: grid;
    grid-template-columns: 94px 70px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    font-size: var(--font-caption);
}

.fair-tournament-rule + .fair-tournament-rule {
    margin-top: var(--space-6);
}

.fair-tournament-rule time,
.fair-tournament-rule span {
    color: var(--color-text-secondary);
}

.fair-tournament-rule time {
    color: var(--color-action-primary);
    font-size: var(--font-caption);
}

.fair-tournament-rule span {
    font-size: var(--font-label);
}

.fair-tournament-rule strong {
    color: var(--color-action-primary);
    font-size: var(--font-body);
}

#fairTournamentContent .btn--outline,
#sectCupTournamentContent .btn--outline,
#sectCupPickModal .btn--outline {
    background: var(--color-bg-surface);
}

#fairTournamentContent .empty,
#fairTournamentContent .note,
#sectCupTournamentContent .empty,
#sectCupTournamentContent .note {
    min-height: 72px;
    margin: 0;
    padding: var(--space-20) var(--space-12);
    border: 1px solid var(--fair-tournament-card-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    text-align: center;
}

#fairTournamentContent .note,
#sectCupTournamentContent .note {
    display: grid;
    place-items: center;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    #tournamentPanel > .tournament-event-switch {
        margin-inline: var(--space-10);
    }

    .tournament-event-switch .tab,
    .fair-tournament-tab,
    .fair-tournament-more > summary {
        min-height: 40px;
    }

    #fairTournamentContent .btn {
        min-height: 44px;
    }

    #fairTournamentContent {
        padding: var(--space-6) var(--space-10) var(--space-20);
    }

    .fair-tournament-opponents,
    .fair-tournament-match-list,
    .fair-tournament-guess-list {
        grid-template-columns: 1fr;
    }

    .fair-tournament-section-head {
        align-items: center;
    }

    .fair-tournament-tab,
    .fair-tournament-more > summary,
    .fair-tournament-more__item {
        font-size: var(--font-caption);
    }

    .fair-tournament-section-head__tip {
        max-width: 52%;
    }

    .fair-tournament-career-list {
        gap: var(--space-6);
    }

    .fair-tournament-rule {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: var(--space-6);
    }

    .fair-tournament-rule span {
        grid-column: 1 / -1;
    }
}

@media (max-width: 390px) {
    .fair-tournament-summary__metrics > span,
    .fair-tournament-stat-grid > span,
    .fair-tournament-career-stats > span {
        padding-inline: var(--space-4);
    }

    .fair-tournament-section-head {
        flex-wrap: wrap;
    }

    .fair-tournament-section-head__tip {
        max-width: 100%;
    }

}

#tournamentPanel {
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

#tournamentContent {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

#tournamentContent .tournament-dashboard {
    flex: 0 0 auto;
    min-height: 0;
}

#tournamentContent .tournament-tab-panel .pvp-player-list {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.tournament-reward-coefficients {
    margin-top: var(--space-10);
    padding: var(--space-8) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: var(--radius-sm);
    background: var(--glass-white-3);
}

.tournament-reward-coefficient-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.tournament-reward-coefficient {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-width: 0;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--glass-white-2);
    color: var(--text-secondary);
    font-size: var(--font-caption);
    line-height: 1.35;
}

.tournament-reward-coefficient span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tournament-reward-coefficient b {
    flex: none;
    color: var(--text-gold);
    font-size: var(--font-label);
}

.tournament-reward-notes {
    margin-top: var(--space-8);
}

#tournamentContent .pvp-player-list {
    margin-top: var(--space-8);
}

#tournamentContent .tournament-guess-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-10);
}

.tournament-guess-card__main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-4);
}

.tournament-guess-card__eyebrow {
    align-items: flex-start;
    color: var(--text-gold);
    font-size: var(--font-caption);
    font-weight: 700;
    line-height: 1.35;
}

.tournament-guess-card__status {
    flex: none;
    padding: var(--space-4) var(--space-6);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    line-height: 1.25;
    white-space: nowrap;
}

.tournament-guess-card__status.is-open {
    color: var(--text-jade, var(--accent-jade));
}

.tournament-guess-card__status.is-resolved,
.tournament-guess-card__status.is-closed {
    color: var(--text-muted);
}

.tournament-guess-card__match {
    color: var(--text-primary);
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.45;
}

.tournament-guess-card__match a {
    color: inherit;
}

.tournament-guess-card__vs {
    padding: 0 var(--space-4);
    color: var(--text-warn, var(--accent-orange));
    font-size: var(--font-micro);
}

.tournament-guess-card__pool,
.tournament-guess-card__rule,
.tournament-guess-card__mine {
    color: var(--text-muted);
    font-size: var(--font-micro);
    line-height: 1.45;
}

.tournament-guess-card__pool {
    margin-top: var(--space-2);
}

.tournament-guess-card__pool span:last-child {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.tournament-guess-card__rule {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.tournament-guess-card__result.is-resolved {
    color: var(--text-jade, var(--accent-jade));
}

.tournament-guess-card__mine {
    margin-top: var(--space-2);
    color: var(--text-gold);
}

.tournament-guess-card__mine b {
    font-weight: 700;
}

.tournament-guess-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-6);
    max-width: 150px;
}

.tournament-guess-card__actions .btn-tournament-guess,
.tournament-guess-card__actions > span {
    min-width: 0;
    min-height: 40px;
    padding: var(--space-8) var(--space-8);
    font-size: var(--font-caption);
    line-height: 1.3;
    white-space: normal;
    text-align: center;
}

.tournament-guess-card__disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}

#tournamentContent .inventory-empty {
    border: 1px dashed color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: var(--radius-sm);
    background: var(--glass-white-3);
    padding: var(--space-10);
    margin: 0;
}

.tournament-match-time {
    grid-area: time;
    flex: 0 0 58px;
    color: var(--text-gold);
    font-size: var(--font-caption);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
}

.tournament-spectate-select {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-8);
}

.tournament-spectate-select__input {
    width: min(100%, 220px);
}

.tournament-knockout-summary {
    padding: var(--space-8);
    margin-bottom: var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--craft-gold) 8%, transparent), color-mix(in srgb, var(--accent-cyan) 6%, transparent)),
        var(--bg-card);
}

.tournament-knockout-summary__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.tournament-knockout-summary__title {
    min-width: 0;
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.45;
}

.tournament-knockout-summary__title span {
    color: var(--text-gold);
}

.tournament-knockout-summary__title em {
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-style: normal;
    opacity: 0.72;
}

.tournament-knockout-summary__meta {
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.45;
}

.tournament-knockout-summary__meta b {
    color: var(--text-jade);
}

.tournament-knockout-summary__meta span {
    font-weight: 700;
}

.tournament-round-title {
    margin-top: var(--space-12);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-weight: 700;
}

.tournament-round-title span {
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-weight: 400;
}

.tournament-round-empty {
    margin-top: var(--space-6);
    padding: var(--space-8);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--glass-white-2);
    color: var(--text-muted);
    font-size: var(--font-label);
    text-align: center;
}

.tournament-match-card {
    margin-top: var(--space-6);
    padding: var(--space-8);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 14%, transparent);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--text-primary) 20%, transparent);
}

.tournament-match-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-areas: "time main actions";
    align-items: center;
    gap: var(--space-8);
}

.tournament-match-main {
    grid-area: main;
    min-width: 0;
    text-align: center;
}

.tournament-match-names {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-width: 0;
}

.tournament-match-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: var(--font-body);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tournament-match-name.is-winner {
    color: var(--text-jade);
    font-weight: 700;
}

.tournament-match-name.is-muted {
    color: var(--text-muted);
}

.tournament-match-vs {
    flex: none;
    color: var(--text-gold);
    font-size: var(--font-caption);
}

.tournament-match-note {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.tournament-match-note span {
    color: var(--text-jade);
}

.tournament-match-score {
    margin-top: var(--space-2);
    color: var(--text-gold);
    font-size: var(--font-caption);
}

.tournament-match-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    min-width: max-content;
}

.tournament-match-status {
    padding: 0 var(--space-4);
    border: 1px solid currentColor;
    border-radius: var(--radius-xs);
    font-size: var(--font-micro);
    line-height: 1.45;
    white-space: nowrap;
}

.tournament-match-status.is-resolved {
    color: var(--text-muted);
}

.tournament-match-status.is-pending {
    color: var(--text-jade);
}

.tournament-filter-select {
    min-height: 30px;
    padding: var(--space-4) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-label);
    font-family: var(--font-serif);
}

.tournament-guess-odds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-4);
}

.tournament-guess-odds__side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-8);
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    border-radius: var(--radius-sm);
    background: var(--glass-white-3);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.35;
}

.tournament-guess-odds__name {
    color: var(--text-primary);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════
   武道大会弹窗 · tm-dialog（gc-dialog）
   历史竞猜 / 战报 / 批量摘要
   壳 14 / 内卡 10 / 钮 8 · 无左轨
   仅「关闭」时不设 gc-foot
   ══════════════════════════════════════ */
body.game-page .modal-content.modal--decorated.gc-dialog.tm-dialog,
.modal-content.modal--decorated.gc-dialog.tm-dialog,
.gc-dialog.tm-dialog {
    max-width: min(400px, 94vw);
    width: 94%;
    padding: 0;
    border-radius: var(--gc-radius, var(--radius-lg));
}
body.game-page .modal-content.modal--decorated.gc-dialog.tm-dialog.tm-dialog--battle,
.modal-content.modal--decorated.gc-dialog.tm-dialog.tm-dialog--battle,
.gc-dialog.tm-dialog.tm-dialog--battle {
    max-width: min(480px, 96vw);
    width: 96%;
}
/* 战报壳继承 arena 宽高能力（与旧 arena-battle-modal 共存） */
body.game-page .gc-dialog.tm-dialog.arena-battle-modal,
.gc-dialog.tm-dialog.arena-battle-modal {
    width: min(480px, 96vw);
    max-width: min(480px, 96vw);
    max-height: min(88vh, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.game-page .gc-dialog.tm-dialog > .gc-head.tm-head,
.gc-dialog.tm-dialog > .gc-head.tm-head,
.tm-head {
    position: relative;
    padding: var(--space-20) var(--space-48) 0 var(--space-20);
    text-align: left;
    flex-shrink: 0;
}
.tm-head .gc-title {
    color: var(--text-gold, var(--accent-gold));
}
.tm-dialog[data-tone="jade"] .tm-head .gc-title {
    color: var(--text-jade, var(--accent-jade));
}
.tm-dialog[data-tone="danger"] .tm-head .gc-title {
    color: var(--text-danger, var(--accent-crimson));
}
.tm-head .modal-header-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
}

body.game-page .gc-dialog.tm-dialog > .gc-mid.tm-mid,
.gc-dialog.tm-dialog > .gc-mid.tm-mid,
.tm-mid {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-12) var(--space-16) max(var(--space-16), env(safe-area-inset-bottom, 0px));
    max-height: min(68vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    text-align: left;
    white-space: normal;
}
body.game-page .gc-dialog.tm-dialog.tm-dialog--battle > .gc-mid.tm-mid,
.gc-dialog.tm-dialog.tm-dialog--battle > .gc-mid.tm-mid,
body.game-page .gc-dialog.tm-dialog.arena-battle-modal > .gc-mid.tm-mid,
.gc-dialog.tm-dialog.arena-battle-modal > .gc-mid.tm-mid {
    max-height: min(72vh, 640px);
    gap: var(--space-12);
}
body.game-page .gc-dialog.tm-dialog:has(> .gc-foot) > .gc-mid.tm-mid,
.gc-dialog.tm-dialog:has(> .gc-foot) > .gc-mid.tm-mid {
    padding-bottom: var(--space-8);
}
.tm-foot {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-8);
    margin: 0;
    padding: var(--space-10) var(--space-16) max(var(--space-12), env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border-color);
}
body.game-page .gc-dialog.tm-dialog .modal-btn,
.gc-dialog.tm-dialog .modal-btn,
.tm-foot .modal-btn {
    border-radius: var(--gc-radius-btn, var(--radius-md));
}
.tm-foot .modal-btn { flex: 1; }

.tm-lead {
    margin: 0;
    font-size: var(--font-label);
    line-height: 1.55;
    color: var(--text-muted);
    flex-shrink: 0;
}
.tm-lead__em,
.tm-lead b {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tm-empty {
    padding: var(--space-16) var(--space-10);
    text-align: center;
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.55;
}
.tm-body-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    max-height: none;
    overflow: visible;
}

/* KPI 四格 */
.tm-kpi {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-radius: var(--gc-radius-inner, var(--radius-md));
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: var(--bg-panel, var(--bg-card));
    flex-shrink: 0;
}
.tm-kpi__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-10) var(--space-4) var(--space-8);
    border-right: 1px solid var(--border-color);
}
.tm-kpi__cell:last-child { border-right: 0; }
.tm-kpi__k {
    font-size: var(--font-micro);
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.tm-kpi__v {
    font-size: var(--font-action);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-gold, var(--accent-gold));
    line-height: 1.15;
}
.tm-kpi__v.is-jade { color: var(--text-jade, var(--accent-jade)); }
.tm-kpi__v.is-warn { color: var(--text-warn, var(--accent-orange, #9a6b3d)); }
.tm-kpi__v.is-muted { color: var(--text-muted); font-weight: 600; }

.tm-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 var(--space-2);
    flex-shrink: 0;
}
.tm-sec-head__t {
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-jade, var(--accent-jade));
}
.tm-sec-head__n {
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.tm-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex-shrink: 0;
}

/* 历史竞猜卡片 */
.tm-card,
.tournament-guess-history-item.tm-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8) var(--space-10);
    align-items: start;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    border: 1px solid var(--border-color);
    background: var(--bg-panel, var(--bg-card));
    box-sizing: border-box;
}
.tm-card__main { min-width: 0; }
.tm-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4) var(--space-8);
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}
.tm-card__match {
    margin-top: var(--space-4);
    font-size: var(--font-label);
    line-height: 1.4;
    color: var(--text-secondary);
}
.tm-card__match b {
    font-weight: 600;
    color: var(--text-primary);
}
.tm-card__vs {
    color: var(--text-muted);
    font-weight: 500;
    margin: 0 var(--space-4);
}
.tm-card__meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    line-height: 1.4;
    color: var(--text-muted);
}
.tm-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-4);
    text-align: right;
    flex: none;
}
.tm-card__net {
    font-size: var(--font-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.tm-card__net.is-jade { color: var(--text-jade, var(--accent-jade)); }
.tm-card__net.is-warn { color: var(--text-warn, var(--accent-orange, #9a6b3d)); }
.tm-card__net.is-muted { color: var(--text-muted); font-weight: 600; }
.tm-card__time {
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.tm-stamp {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    font-size: var(--font-caption);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    line-height: 1.4;
}
.tm-stamp--jade {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}
.tm-stamp--warn {
    color: var(--accent-orange, #9a6b3d);
    border-color: color-mix(in srgb, var(--accent-orange, #9a6b3d) 38%, transparent);
    background: color-mix(in srgb, var(--accent-orange, #9a6b3d) 10%, transparent);
}
.tm-stamp--gold {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

/* 批量摘要行 */
.tm-batch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    border: 1px solid var(--border-color);
    background: var(--bg-panel, var(--bg-card));
    font-size: var(--font-label);
}
.tm-batch-row__tag {
    font-weight: 700;
    margin-right: var(--space-4);
}
.tm-batch-row__tag.is-win { color: var(--text-jade, var(--accent-jade)); }
.tm-batch-row__tag.is-lose { color: var(--text-warn, var(--accent-orange, #9a6b3d)); }
.tm-batch-row__delta {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: none;
}
.tm-batch-row__delta.is-win { color: var(--text-jade, var(--accent-jade)); }
.tm-batch-row__delta.is-lose { color: var(--text-warn, var(--accent-orange, #9a6b3d)); }

.tm-log-fallback {
    margin: var(--space-2) 0;
    font-size: var(--font-label);
    line-height: 1.5;
    color: var(--text-secondary);
}

@supports not (background: color-mix(in srgb, white 50%, black)) {
    .tm-stamp--jade,
    .tm-stamp--warn,
    .tm-stamp--gold {
        background: var(--bg-panel, var(--bg-card));
    }
}

@media (max-width: 380px) {
    .tm-kpi { grid-template-columns: repeat(2, 1fr); }
    .tm-kpi__cell:nth-child(2) { border-right: 0; }
    .tm-kpi__cell:nth-child(1),
    .tm-kpi__cell:nth-child(2) {
        border-bottom: 1px solid var(--border-color);
    }
    .tm-card,
    .tournament-guess-history-item.tm-card {
        grid-template-columns: 1fr;
    }
    .tm-card__side {
        align-items: flex-start;
        flex-direction: row;
        gap: var(--space-10);
    }
}

.btn-tournament-fight,
.btn-tournament-log {
    padding: var(--space-6) var(--space-14);
    font-size: var(--font-label);
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

/* -- 论道 (核心操作 / 渐变实心) -- */
.btn-tournament-fight {
    background: linear-gradient(135deg, color-mix(in srgb, var(--canghai-teal) 75%, transparent) 0%, color-mix(in srgb, var(--canghai-teal) 65%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--canghai-teal) 50%, transparent);
    color: #fff;
    padding: var(--space-6) var(--space-16);
    font-weight: 600;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--canghai-teal) 25%, transparent);
}
.btn-tournament-fight:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--canghai-teal) 92%, transparent) 0%, color-mix(in srgb, var(--canghai-teal) 78%, transparent) 100%);
    border-color: color-mix(in srgb, var(--canghai-teal) 70%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--canghai-teal) 40%, transparent);
    transform: translateY(-1px);
}
.btn-tournament-fight:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--canghai-teal) 20%, transparent);
}

/* 武道商店批量兑换数量输入框 */
.tournament-shop-qty {
    width: 52px;
    padding: var(--space-6) var(--space-4);
    text-align: center;
    font-size: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-elevated, var(--glass-white-2));
    border: 1px solid var(--border-color, color-mix(in srgb, var(--canghai-teal) 40%, transparent));
    border-radius: var(--radius-sm);
}
.tournament-shop-qty:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--canghai-teal) 80%, transparent);
}
.tournament-shop-qty:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}
/* 隐藏 number input 的上下箭头，保持紧凑 */
.tournament-shop-qty::-webkit-outer-spin-button,
.tournament-shop-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tournament-shop-qty {
    -moz-appearance: textfield;
}

/* -- 战报 (微小操作 / 低调描边) -- */
.btn-tournament-log {
    background: var(--glass-white-2);
    border: 1px solid var(--glass-white-1);
    color: var(--text-secondary);
    padding: var(--space-2) var(--space-8);
    font-size: var(--font-caption);
    letter-spacing: 0;
}
.btn-tournament-log:hover {
    background: var(--glass-white-1);
    border-color: var(--glass-white-1);
    color: var(--text-primary);
}

@media (max-width: 520px) {
    .tournament-career-toolbar {
        align-items: flex-start;
        padding: var(--space-10) 0 var(--space-10);
    }

    .tournament-career-toolbar__title { font-size: var(--font-title); }
    .tournament-career-toolbar__hint { max-width: 46vw; }
    .tournament-career-kpi { gap: var(--space-6); }
    .tournament-career-kpi__cell { padding: var(--space-10) var(--space-8) var(--space-10); }
    .tournament-career-kpi__value { font-size: var(--font-page-title); }
    .tournament-career-kpi__note { display: none; }
    .tournament-career-record { gap: var(--space-8); padding: var(--space-10) var(--space-10) var(--space-10) var(--space-12); }
    .tournament-career-record__meta { gap: var(--space-2) var(--space-8); }
    .tournament-career-record__rank { min-width: 48px; padding-left: var(--space-6); padding-right: var(--space-6); }
    .tournament-career-champion { padding: var(--space-10); }

    .tournament-reward-coefficient-list {
        grid-template-columns: 1fr;
    }

    .tournament-match-time {
        flex-basis: 52px;
        font-size: var(--font-caption);
    }

    .tournament-knockout-summary__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .tournament-match-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "time actions"
            "main main";
        align-items: start;
        gap: var(--space-6) var(--space-8);
    }

    .tournament-match-main {
        text-align: left;
    }

    .tournament-match-names {
        justify-content: flex-start;
        gap: var(--space-6);
    }

    .tournament-match-name {
        flex: 1 1 0;
    }

    .tournament-match-actions {
        align-self: center;
    }

    .tournament-guess-odds {
        grid-template-columns: 1fr;
    }

    .tournament-guess-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .tournament-guess-toolbar__actions {
        width: 100%;
        flex-basis: auto;
    }

    .tournament-guess-guide__step {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-8) var(--space-6);
    }

    .tournament-guess-guide__step > span {
        width: 100%;
    }

    .tournament-guess-filters {
        align-items: flex-start;
    }

    .tournament-guess-filters__controls {
        flex-direction: column;
    }

    .tournament-guess-filters .tournament-filter-select {
        width: 100%;
        flex-basis: auto;
    }

    #tournamentContent .tournament-guess-card {
        grid-template-columns: 1fr;
    }

    .tournament-guess-history-item {
        grid-template-columns: 1fr;
    }

    .tournament-guess-card__actions {
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 法相穿搭 (Equipment Grid) */
.panel-title-link {
    cursor: pointer;
    text-decoration: underline dashed;
    text-underline-offset: 4px;
}

.panel-title-link:hover {
    color: var(--text-gold);
}

.equip-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding: 0;
}
.equip-slot {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--space-10) var(--space-12);
    background: var(--shadow-black-3);
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s;
}
.equip-slot:hover {
    background: var(--glass-white-1);
}
.equip-slot.empty {
    border-style: dashed;
}

/* ===== 左栏法相 E1：固定行高 + 槽名列 + 稀有度左边线 ===== */
.player-panel #equipGrid {
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.player-panel #equipGrid .equip-slot {
    min-height: 48px;
    height: auto;
    padding: 0 var(--space-10) 0 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    border-left-color: color-mix(in srgb, var(--text-muted) 35%, transparent);
    background: var(--bg-card);
    overflow: hidden;
    box-sizing: border-box;
    align-items: stretch;
}

.player-panel #equipGrid .equip-slot:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 30%, transparent);
    border-left-color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 4%, var(--bg-card));
}

.player-panel #equipGrid .equip-slot.empty {
    border-style: dashed;
    border-left-style: solid;
    background: color-mix(in srgb, var(--bg-panel) 40%, transparent);
}

.player-panel #equipGrid .equip-slot .slot-name {
    flex: 0 0 52px;
    width: 52px;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-caption);
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1.2;
    padding: 0 var(--space-2);
    white-space: nowrap;
    text-align: center;
    border-right: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    background: color-mix(in srgb, var(--bg-panel) 55%, transparent);
}

.player-panel #equipGrid .equip-info {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-8) 0 var(--space-8) var(--space-10);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
}

.player-panel #equipGrid .equip-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    min-height: 18px;
}

.player-panel #equipGrid .equip-name-row .equip-name-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
}

.player-panel #equipGrid .equip-name-row .refine-badge {
    flex: 0 0 auto;
    margin-left: 0;
}

.player-panel #equipGrid .equip-name-text.empty-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0 0 var(--space-10);
    align-self: center;
    font-weight: 500;
    font-size: var(--font-label);
    color: var(--text-muted);
}

.player-panel #equipGrid .equip-wear-badge {
    font-size: var(--font-micro);
    line-height: 1.3;
}

.player-panel #equipGrid .equip-meta-row {
    font-size: var(--font-micro);
    color: var(--text-muted);
}

/* 稀有度左边线（左栏） */
.player-panel #equipGrid .equip-slot.has-item.rarity-1 {
    border-left-color: color-mix(in srgb, var(--rarity-1) 70%, transparent);
}
.player-panel #equipGrid .equip-slot.has-item.rarity-2 {
    border-left-color: var(--rarity-2);
}
.player-panel #equipGrid .equip-slot.has-item.rarity-3 {
    border-left-color: var(--rarity-3);
}
.player-panel #equipGrid .equip-slot.has-item.rarity-4 {
    border-left-color: var(--rarity-4);
}
.player-panel #equipGrid .equip-slot.has-item.rarity-5 {
    border-left-color: var(--rarity-5);
}

/* ═══════════════════════════════════════════════════════════════
   炼造 · 法相 Tab（A 工坊笺）
   槽位卡片网格 + 本命养炼笺；无左轨，与配方卡同语汇
   ═══════════════════════════════════════════════════════════════ */
.craft-aspect-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding: var(--space-8) var(--space-12) var(--space-10);
    box-sizing: border-box;
}

#craftAspectPanel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent-gold) 35%, transparent) transparent;
}

#craftAspectPanel::-webkit-scrollbar { width: 5px; }
#craftAspectPanel::-webkit-scrollbar-track { background: transparent; }
#craftAspectPanel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent-gold) 28%, transparent);
    border-radius: var(--radius-xs);
}
#craftAspectPanel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

.craft-asp-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}

.craft-asp-block--natal {
    border-color: color-mix(in srgb, var(--accent-gold) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-panel));
}

.craft-asp-block__head {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.craft-asp-block__title {
    font-family: var(--font-serif, inherit);
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-gold, var(--accent-gold));
}

.craft-asp-block__note {
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-muted);
    text-wrap: wrap;
}

/* 槽位：桌面双列瀑布流（columns，卡片贴内容高度、列内独立堆叠无空白），手机单列。
   子项 break-inside:avoid 防卡片跨列截断；间距由子项 margin-bottom 提供 */
.craft-aspect-grid {
    display: block;
    columns: 2;
    column-gap: var(--space-8);
    margin: 0;
}

.craft-aspect-grid .craft-asp-slot {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--space-6);
}

/* 槽位卡：品名行用 er-swap-row__name；祭炼/境界徽与换装对照笺同款 */
#craftAspectPanel,
.craft-aspect-panel {
    --inv-wb-raised: var(--bg-panel);
}

.craft-asp-slot {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card, var(--bg-panel));
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

.craft-asp-slot:hover,
.craft-asp-slot:focus-visible {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-card, var(--bg-panel)));
    outline: none;
}

.craft-asp-slot.is-empty {
    border-style: dashed;
    opacity: 0.92;
}

.craft-asp-slot.is-empty:hover {
    opacity: 1;
    border-style: solid;
}

.craft-asp-slot__k {
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    line-height: 1.3;
}

.craft-asp-slot__title,
.craft-asp-slot .er-swap-row__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    row-gap: var(--space-4);
    min-width: 0;
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.4;
}

.craft-asp-slot .er-item-name {
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.craft-asp-slot__v {
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.craft-asp-slot__v.is-empty {
    color: var(--text-muted);
    font-weight: 600;
}

.craft-asp-slot__hint {
    font-size: var(--font-micro);
    color: var(--text-muted);
    line-height: 1.35;
}

/* 属性简表 · 对齐换装 er-swap-row__stats */
.craft-asp-slot__stats {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* 先天 + 铭文印鉴 · 对齐储物 inv-seal / 换装 er-insc-seals */
.craft-asp-slot__extra,
.craft-asp-slot .er-swap-row__meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    margin-top: 0;
    font-size: var(--font-caption);
    line-height: 1.4;
    text-align: left;
}

.craft-asp-slot__extra .item-desc-effect {
    display: block;
    margin: 0;
    font-size: var(--font-caption);
    line-height: 1.4;
    color: var(--text-secondary);
}

.craft-asp-slot__extra .er-insc-seals,
.craft-asp-slot__extra .inv-seal-row,
.craft-natal-card__extra .er-insc-seals,
.craft-natal-card__extra .inv-seal-row {
    margin-top: 0;
    justify-content: flex-start;
}

.craft-asp-slot__extra .inv-seal-row__seals,
.craft-natal-card__extra .inv-seal-row__seals {
    justify-content: flex-start;
}

/* 槽卡内祭炼徽略收紧，避免挤爆双列 */
.craft-asp-slot .er-refine-badge.refine-badge,
.craft-natal-card .er-refine-badge.refine-badge {
    margin-left: var(--space-4);
    padding: var(--space-2) var(--space-6);
    font-size: var(--font-micro);
}

.craft-asp-slot .er-realm-badge,
.craft-natal-card .er-realm-badge {
    margin-left: var(--space-4);
    padding: var(--space-2) var(--space-6);
    font-size: var(--font-micro);
}

.craft-asp-slot__m {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: 0;
}

.craft-asp-slot__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
    font-size: var(--font-micro);
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-muted);
    white-space: nowrap;
}

.craft-asp-slot__chip.is-ok {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}

.craft-asp-slot__chip.is-gold {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold) 32%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.craft-asp-slot__chip.is-warn {
    color: var(--accent-orange, var(--text-gold));
    border-color: color-mix(in srgb, var(--accent-orange, var(--accent-gold)) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent-orange, var(--accent-gold)) 9%, transparent);
}

.craft-asp-slot__chip.is-danger {
    color: var(--text-red, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson) 32%, var(--border-color));
    background: color-mix(in srgb, var(--accent-crimson) 8%, transparent);
}

/* 品质：全边框轻染色，无左轨 */
.craft-asp-slot.has-item.rarity-1 {
    border-color: color-mix(in srgb, var(--rarity-1) 38%, var(--border-color));
}
.craft-asp-slot.has-item.rarity-2 {
    border-color: color-mix(in srgb, var(--rarity-2) 40%, var(--border-color));
}
.craft-asp-slot.has-item.rarity-3 {
    border-color: color-mix(in srgb, var(--rarity-3) 44%, var(--border-color));
    background: color-mix(in srgb, var(--rarity-3) 5%, var(--bg-card, var(--bg-panel)));
}
.craft-asp-slot.has-item.rarity-4 {
    border-color: color-mix(in srgb, var(--rarity-4) 46%, var(--border-color));
    background: color-mix(in srgb, var(--rarity-4) 6%, var(--bg-card, var(--bg-panel)));
}
.craft-asp-slot.has-item.rarity-5 {
    border-color: color-mix(in srgb, var(--rarity-5) 50%, var(--border-color));
    background: color-mix(in srgb, var(--rarity-5) 7%, var(--bg-card, var(--bg-panel)));
}

.craft-aspect-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-2);
    padding-top: var(--space-10);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
}

/* 通用 equip-slot 仍供左栏 / 其他面板使用 */
.equip-slot .slot-name {
    font-size: var(--font-body);
    color: var(--text-muted);
    width: 60px;
    flex-shrink: 0;
    align-self: flex-start;
    line-height: 1.4;
    padding-top: var(--space-2);
}

.equip-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.equip-name-text {
    font-size: var(--font-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}
.equip-name-text.empty-text {
    padding: 0;
    text-align: left;
    color: var(--text-muted);
    font-family: inherit;
}

.equip-wear-badge {
    font-size: var(--font-micro);
    white-space: nowrap;
    opacity: 0.85;
}

.equip-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
    line-height: 1.35;
}

.equip-meta-row .refine-badge {
    margin-left: 0;
}

.equip-meta-row--inscriptions .stat-inscription {
    font-size: var(--font-micro);
    margin: 0 var(--space-4) var(--space-2) 0;
    line-height: 1.3;
}

.equip-slot.has-item {
    border-style: solid;
    opacity: 1;
}

/* Rarity colors: 统一引用 --rarity-N token，避免与物品列表/徽章的稀有度色相冲突 */
.equip-slot.has-item.rarity-1 { border-color: color-mix(in srgb, var(--rarity-1) 35%, transparent); }
.equip-slot.has-item.rarity-2 { border-color: color-mix(in srgb, var(--rarity-2) 35%, transparent); }
.equip-slot.has-item.rarity-3 { border-color: color-mix(in srgb, var(--rarity-3) 40%, transparent); }
.equip-slot.has-item.rarity-4 { border-color: color-mix(in srgb, var(--rarity-4) 40%, transparent); }
.equip-slot.has-item.rarity-5 { border-color: color-mix(in srgb, var(--rarity-5) 45%, transparent); }

/* 左栏稀有度：保持左边线品质色，外框仍用边框色 */
.player-panel #equipGrid .equip-slot.has-item.rarity-1,
.player-panel #equipGrid .equip-slot.has-item.rarity-2,
.player-panel #equipGrid .equip-slot.has-item.rarity-3,
.player-panel #equipGrid .equip-slot.has-item.rarity-4,
.player-panel #equipGrid .equip-slot.has-item.rarity-5 {
    border-top-color: var(--border-color);
    border-right-color: var(--border-color);
    border-bottom-color: var(--border-color);
}

/* —— 本命养炼笺 —— */
.craft-natal-slot,
#craftNatalArtifactSlot.natal-artifact-slot {
    margin: 0;
}

.craft-natal-card,
#craftNatalArtifactSlot .natal-artifact-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    padding: var(--space-10) var(--space-12);
    margin-bottom: 0;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-panel));
    cursor: default;
    box-sizing: border-box;
}

.craft-natal-card.is-empty {
    border-style: dashed;
    border-color: var(--border-color);
    background: var(--bg-card, var(--bg-panel));
}

.craft-natal-card__head,
#craftNatalArtifactSlot .natal-artifact-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    width: 100%;
    min-width: 0;
}

.craft-natal-card__title-wrap {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

.craft-natal-card__kicker {
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.craft-natal-card__name {
    font-size: var(--font-action);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.craft-natal-card__name.is-empty {
    color: var(--text-muted);
    font-size: var(--font-body-lg);
}

.craft-natal-card__title,
.craft-natal-card .er-swap-row__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    row-gap: var(--space-4);
    min-width: 0;
    font-size: var(--font-action);
    font-weight: 700;
    line-height: 1.4;
}

.craft-natal-card__title .er-item-name {
    font-size: var(--font-action);
    font-weight: 700;
}

.craft-natal-card__extra,
.craft-natal-card .er-swap-row__meta {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    text-align: left;
}

.craft-natal-card__actions,
#craftNatalArtifactSlot .natal-artifact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    row-gap: var(--space-6);
    width: 100%;
    min-width: 0;
}

/* 本命卡操作钮分组：编辑+装备 / 养炼，危险钮（融毁）右置隔离（#法相重设计） */
#craftNatalArtifactSlot .natal-act-group {
    display: inline-flex;
    gap: var(--space-6);
    min-width: 0;
}

#craftNatalArtifactSlot .natal-act-danger {
    margin-left: auto;
}

.craft-natal-card__actions .btn-craft,
#craftNatalArtifactSlot .natal-artifact-actions .btn-craft {
    min-height: 32px;
    padding: 0 var(--space-10);
    font-size: var(--font-label);
}

.alchemy-modal .btn-craft.btn-craft-danger,
.craft-modal-overlay .btn-craft.btn-craft-danger,
.btn-craft.btn-craft-danger {
    color: var(--text-red, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-crimson) 9%, transparent);
}

.alchemy-modal .btn-craft.btn-craft-danger:hover:not(:disabled),
.craft-modal-overlay .btn-craft.btn-craft-danger:hover:not(:disabled),
.btn-craft.btn-craft-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-crimson) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-crimson) 55%, var(--border-color));
}

.craft-natal-card__desc,
#craftNatalArtifactSlot .natal-artifact-desc {
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: break-word;
}

.craft-natal-card__quote {
    margin: 0;
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-style: italic;
    line-height: 1.55;
}

.craft-natal-card__detail,
#craftNatalArtifactSlot .natal-artifact-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: 0;
}

.craft-natal-overdrive,
#craftNatalArtifactSlot .natal-overdrive-row {
    margin: 0;
    padding: var(--space-8) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-card, transparent));
}

.craft-natal-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.craft-natal-stat,
#craftNatalArtifactSlot .natal-artifact-stats-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-10);
    padding: var(--space-2) 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--border-color) 90%, transparent);
    background: transparent;
    font-size: var(--font-label);
    line-height: 1.45;
}

.craft-natal-stats .craft-natal-stat:last-child,
.craft-natal-stats #craftNatalArtifactSlot .natal-artifact-stats-line:last-child {
    border-bottom: none;
}

.craft-natal-stat__k,
#craftNatalArtifactSlot .natal-artifact-stats-line span {
    color: var(--text-muted);
    flex: 0 0 auto;
}

.craft-natal-stat__v,
#craftNatalArtifactSlot .natal-artifact-stats-line b {
    color: var(--text-jade, var(--accent-jade));
    font-weight: 700;
    text-align: right;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.craft-natal-tips {
    display: grid;
    gap: 0;
}

.craft-natal-tips .natal-artifact-cost-title,
#craftNatalArtifactSlot .natal-artifact-cost-title {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.45;
}

.craft-natal-mats,
#craftNatalArtifactSlot .natal-artifact-materials {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-8);
    margin-top: var(--space-2);
}

.craft-natal-mats span,
#craftNatalArtifactSlot .natal-artifact-materials span {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-sm);
    font-size: var(--font-caption);
    font-weight: 600;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
}

.craft-natal-mats .ok,
#craftNatalArtifactSlot .natal-artifact-materials .ok {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}

.craft-natal-mats .lack,
#craftNatalArtifactSlot .natal-artifact-materials .lack {
    color: var(--text-red, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent-crimson) 7%, transparent);
}

@media (max-width: 520px) {
    .craft-aspect-panel {
        padding: var(--space-8) var(--space-10) calc(var(--space-14) + env(safe-area-inset-bottom, 0px));
    }

    .craft-aspect-grid {
        columns: 1;
    }

    .craft-asp-slot {
        min-height: 0;
    }

    .craft-aspect-actions {
        flex-direction: column;
    }

    .craft-aspect-actions .btn-craft {
        width: 100%;
        min-height: 44px;
        flex: 1 1 auto;
    }

    .craft-natal-card__actions .btn-craft,
    #craftNatalArtifactSlot .natal-artifact-actions .btn-craft {
        min-height: 40px;
        flex: 1 1 calc(50% - 6px);
    }

    .craft-natal-stat,
    #craftNatalArtifactSlot .natal-artifact-stats-line {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .craft-natal-stat__v,
    #craftNatalArtifactSlot .natal-artifact-stats-line b {
        text-align: left;
    }

    .craft-natal-overdrive,
    #craftNatalArtifactSlot .natal-overdrive-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ═══════════════════════════════════════════════════════════════
   装备替换 · 对照笺（A）
   gc-dialog gold tone + 当前条 + 候选行（名旁徽章 / 相对 Δ / 装备钮）
   ═══════════════════════════════════════════════════════════════ */
.equip-replace-modal-overlay .modal-content.er-dialog,
.craft-equipment-modal-overlay .modal-content.er-dialog {
    width: min(92vw, 440px);
    max-width: 440px;
    max-height: min(90dvh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 滚动交给 .er-body，头区固定 */
    padding: 0;
}
/* 覆盖 ui-scrollable-modal 的 self-scroll，避免整壳再滚一层 */
.equip-replace-modal-overlay .modal-content.er-dialog.modal-content--self-scroll,
.craft-equipment-modal-overlay .modal-content.er-dialog.modal-content--self-scroll {
    overflow: hidden;
}

.er-head {
    position: relative;
    padding: var(--space-16) var(--space-48) var(--space-10) var(--space-20);
    border-bottom: none; /* 对照笺：标题下无横线 */
    flex-shrink: 0;
}
.er-head .gc-rule { margin-bottom: var(--space-10); }
.er-head .gc-title {
    font-size: var(--font-title);
    letter-spacing: 1.5px;
    padding-right: var(--space-4);
}
.er-head .modal-header-close {
    top: 10px;
    right: 10px;
}

.er-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-14) var(--space-16) var(--space-16);
    /* 可滚无滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.er-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 当前穿戴条 */
.er-cur {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    padding: var(--space-12) var(--space-12) var(--space-10);
    margin-bottom: var(--space-14);
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .er-cur {
        border-color: color-mix(in srgb, var(--accent-jade) 35%, var(--border-color));
        background:
            linear-gradient(135deg, color-mix(in srgb, var(--accent-jade) 8%, transparent), transparent 60%),
            var(--bg-panel);
    }
}
.er-cur__label {
    font-size: var(--font-caption);
    letter-spacing: 1.5px;
    color: var(--text-jade, var(--accent-jade));
    margin-bottom: var(--space-6);
    text-align: center;
}
.er-cur__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 var(--space-2);
    row-gap: var(--space-4);
    font-size: var(--font-action);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}
.er-cur__stats {
    margin-top: var(--space-8);
    font-size: var(--font-body);
    line-height: 1.55;
    text-align: center;
    color: var(--text-secondary);
}
.er-cur__meta {
    margin-top: var(--space-6);
    font-size: var(--font-label);
    line-height: 1.5;
    text-align: center;
}
.er-cur__meta .item-desc-effect,
.er-swap-row__meta .item-desc-effect {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--font-label);
    line-height: 1.45;
}
.er-swap-row__meta {
    text-align: left;
}
/* 铭文印鉴：复用储物 .inv-seal（game-inventory.css）；token 在弹窗内兜底 */
.er-dialog {
    --inv-wb-raised: var(--bg-panel);
}
.er-insc-seals {
    margin-top: var(--space-6);
    justify-content: center;
}
.er-swap-row__meta .er-insc-seals {
    justify-content: flex-start;
}
.er-cur__meta .inv-seal-row__seals,
.er-swap-row__meta .inv-seal-row__seals {
    justify-content: inherit;
}
.er-tools {
    margin-top: var(--space-10);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
}
.er-chip {
    height: 30px;
    padding: 0 var(--space-10);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-family: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
}
.er-chip:hover {
    border-color: var(--border-gold, var(--border-color));
    color: var(--text-gold);
}
.er-chip--danger {
    margin-left: auto;
    border-color: rgba(183, 58, 49, 0.36);
    color: var(--text-danger, var(--accent-crimson, var(--accent-crimson)));
}
.er-chip--danger:hover {
    background: rgba(183, 58, 49, 0.10);
}

.er-sec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}
.er-sec-head__title {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
}
.er-sec-head__count {
    font-size: var(--font-caption);
    color: var(--text-muted);
}

.er-empty {
    padding: var(--space-24) var(--space-12);
    text-align: center;
    font-size: var(--font-body);
    color: var(--text-muted);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

/* 候选列表 */
.er-swap-list.equip-swap-list,
.er-swap-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-height: none;
    margin-top: 0;
    border-top: none;
    padding-top: 0;
    overflow: visible;
}

button.er-swap-row.equip-swap-item,
.er-swap-row {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--space-10);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    transition: border-color 0.12s ease, background 0.12s ease;
}
button.er-swap-row.equip-swap-item:hover,
.er-swap-row:hover {
    border-color: var(--border-gold, var(--border-color));
    background: var(--bg-card-hover, var(--bg-panel));
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    button.er-swap-row.equip-swap-item:hover,
    .er-swap-row:hover {
        border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
        background: color-mix(in srgb, var(--accent-gold) 6%, var(--bg-panel));
    }
}

.er-swap-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    min-width: 0;
}
.er-swap-row__name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    row-gap: var(--space-4);
    font-size: var(--font-body-lg);
    font-weight: 700;
    line-height: 1.45;
}
.er-item-name { font-weight: 700; }
.er-swap-row__stats {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
}
.er-swap-row__meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    line-height: 1.45;
}

/* 境界 / 祭炼徽章（名旁同行） */
.er-realm-badge,
.equip-swap-item__realm.er-realm-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-6);
    padding: var(--space-2) var(--space-6);
    border: 1px solid rgba(200, 160, 80, 0.34);
    border-radius: var(--radius-xs);
    color: var(--text-gold);
    font-size: var(--font-caption);
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.3;
}
.er-refine-badge.refine-badge {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-6);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xs);
    border: 1px solid rgba(22, 128, 106, 0.36);
    color: var(--text-jade, var(--accent-jade));
    background: rgba(22, 128, 106, 0.08);
    font-size: var(--font-caption);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}
@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .er-refine-badge.refine-badge {
        border-color: color-mix(in srgb, var(--accent-jade) 42%, transparent);
        background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    }
}

/* 相对当前 Δ */
.er-swap-deltas {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
    font-size: var(--font-caption);
    font-variant-numeric: tabular-nums;
}
.er-delta-tag {
    font-size: var(--font-micro);
    color: var(--text-muted);
    margin-right: var(--space-2);
}
.er-delta--up { color: var(--text-jade, var(--accent-jade, var(--accent-jade))); }
.er-delta--down { color: var(--text-danger, var(--accent-crimson, var(--accent-crimson))); }
.er-delta--same { color: var(--text-muted); }

.er-equip-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(200, 160, 80, 0.3);
    background: transparent;
    color: var(--text-gold, var(--accent-gold));
    font-size: var(--font-label);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}
.er-swap-row:hover .er-equip-cta {
    background: var(--gradient-gold, rgba(183, 120, 31, 0.12));
}

@media (max-width: 640px) {
    .equip-replace-modal-overlay .modal-content.er-dialog,
    .craft-equipment-modal-overlay .modal-content.er-dialog {
        width: min(96vw, 440px);
        max-height: 94dvh;
        border-radius: var(--radius-lg);
    }
    .er-body { padding: var(--space-12) var(--space-14) var(--space-14); }
}

/* ========================================
 * 幽冥倒悬塔 (Ghost Tower)
 * ======================================== */

#ghostTowerContent {
    color: var(--ghost-purple-soft);
    font-size: var(--font-body);
    padding: var(--space-4) 0;
}

/* 返回按钮 */
.gt-back-btn {
    display: inline-block;
    margin-bottom: var(--space-12);
    color: var(--ghost-purple-muted);
    cursor: pointer;
    font-size: var(--font-label);
    transition: color 0.2s;
}
.gt-back-btn:hover { color: var(--ghost-purple); }
.gt-story {
    background: color-mix(in srgb, var(--combat-dark) 60%, transparent);
    border-left: 2px solid var(--ghost-purple-accent);
    padding: var(--space-10) var(--space-14);
    margin-bottom: var(--space-12);
    font-style: italic;
    line-height: 1.8;
    color: var(--ghost-purple-soft);
}

/* 选择项 */
.gt-choices {
    margin-bottom: var(--space-14);
}
.gt-choices-title {
    font-size: var(--font-label);
    color: var(--ghost-purple-muted);
    margin-bottom: var(--space-8);
    letter-spacing: 1px;
}
.gt-choice-item {
    display: block;
    background: color-mix(in srgb, var(--ghost-purple-dark) 60%, transparent);
    border: 1px solid var(--ghost-purple-dark);
    border-radius: var(--radius-xs);
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-6);
    cursor: pointer;
    transition: all 0.2s;
}
.gt-choice-item:hover {
    border-color: var(--ghost-purple-accent);
}
.gt-choice-item.gt-choice-checked {
    border-color: var(--ghost-purple-deep);
    background: color-mix(in srgb, var(--ghost-purple-bg) 20%, transparent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--youming-purple) 25%, transparent);
}
.gt-choice-item input[type="radio"] {
    margin-right: var(--space-6);
    accent-color: var(--ghost-purple-deep);
    vertical-align: middle;
}
.gt-choice-label {
    color: var(--ghost-purple-soft);
    font-weight: 600;
    margin-right: var(--space-8);
    font-size: var(--font-body);
}
.gt-choice-hint {
    color: color-mix(in srgb, var(--ghost-purple-muted) 70%, white);
    font-size: var(--font-caption);
    display: block;
    margin-top: var(--space-4);
    margin-left: var(--space-24);
}

/* 塔壁石刻 */
.gt-wall {
    background: linear-gradient(180deg, var(--combat-dark) 0%, black 100%);
    border: 1px solid var(--ghost-purple-bg);
    border-radius: var(--radius-md);
    padding: var(--space-16);
}
.gt-wall-title {
    font-size: var(--font-heading);
    font-weight: 700;
    color: var(--ghost-purple-glow);
    letter-spacing: 4px;
    margin-bottom: var(--space-4);
}
.gt-wall-sub {
    font-size: var(--font-label);
    color: color-mix(in srgb, var(--ghost-purple-muted) 70%, white);
    margin-bottom: var(--space-14);
    font-style: italic;
    letter-spacing: 1px;
}
.gt-wall-section {
    background: color-mix(in srgb, var(--combat-dark) 70%, transparent);
    border: 1px solid var(--ghost-purple-dark);
    border-left: 3px solid var(--ghost-purple-accent);
    border-radius: var(--radius-xs);
    padding: var(--space-10) var(--space-14);
    margin-bottom: var(--space-10);
}
.gt-wall-section-head {
    font-size: var(--font-body-lg);
    color: var(--ghost-purple-soft);
    font-weight: 600;
    margin-bottom: var(--space-4);
}
.gt-wall-stats {
    font-size: var(--font-caption);
    color: var(--ghost-purple-muted);
    margin-bottom: var(--space-8);
}
.gt-wall-stats b { color: var(--ghost-purple); }
.gt-wall-names {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}
.gt-wall-name {
    background: color-mix(in srgb, var(--ghost-purple-dark) 60%, transparent);
    border: 1px solid var(--ghost-purple-bg);
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-xs);
    font-size: var(--font-caption);
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
}
.gt-wall-pname { color: var(--ghost-purple-soft); font-weight: 600; }
.gt-wall-pdate { color: var(--ghost-purple-accent); font-size: var(--font-micro); font-family: monospace; }
.gt-wall-name-perfect {
    border-color: var(--craft-gold-bright);
    background: linear-gradient(90deg, color-mix(in srgb, var(--craft-gold-bright) 8%, transparent) 0%, color-mix(in srgb, var(--ghost-purple-dark) 60%, transparent) 100%);
}
.gt-wall-name-perfect .gt-wall-pname { color: var(--craft-gold-soft); }
.gt-wall-empty {
    font-size: var(--font-caption);
    color: var(--ghost-purple-bg);
    font-style: italic;
}
.gt-lore-block {
    background: color-mix(in srgb, var(--combat-dark) 70%, transparent);
    border-left: 2px solid var(--ghost-purple-accent);
    padding: var(--space-10) var(--space-14);
    margin-bottom: var(--space-10);
    font-style: italic;
    line-height: 1.9;
    color: var(--ghost-purple-soft);
}

/* 设置族二级弹窗 · 问道笺表单壳（邮箱 / 口令） */
body.game-page .modal-content.modal--decorated.gc-dialog.settings-sub-dialog,
.modal-content.modal--decorated.gc-dialog.settings-sub-dialog,
.settings-sub-dialog {
    max-width: min(392px, 94vw);
    width: 90%;
}
.settings-sub-dialog .gc-mid.is-form {
    text-align: left;
    padding: var(--space-12) var(--space-16) var(--space-8);
}
.settings-sub-dialog .bind-form {
    margin: 0;
}
.settings-sub-dialog .bind-field:last-child {
    margin-bottom: 0;
}
.settings-sub-dialog .gc-foot {
    margin-top: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}
.settings-row-hint--inline {
    display: inline;
    margin-top: 0;
    margin-left: var(--space-4);
}

/* 确认弹窗偏好 · 设置行卡语气 */
.lv-confirm-preference-modal {
    text-align: left;
}
.lv-confirm-pref-note {
    margin-bottom: var(--space-12);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 6%, var(--bg-card));
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 1.7;
}
.lv-confirm-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-12) var(--space-12);
    margin-bottom: var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    background: color-mix(in srgb, var(--bg-panel) 70%, var(--bg-card));
}
.lv-confirm-pref-row:last-child {
    margin-bottom: 0;
}
.lv-confirm-pref-row__text {
    min-width: 0;
    flex: 1;
}
.lv-confirm-pref-row__title {
    color: var(--text-primary);
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.45;
}
.lv-confirm-pref-row__desc {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.55;
}

/* 黑名单 / 关联账号 · 问道笺列表壳（设置族） */
body.game-page .modal-content.modal--decorated.gc-dialog.blacklist-modal,
.modal-content.modal--decorated.gc-dialog.blacklist-modal,
/* 外壳宽度由 game-dialog.css medium 档（blacklist-modal 已登记）裁定 */
.blacklist-modal {
    max-height: min(86vh, 720px);
    display: flex;
    flex-direction: column;
}

.blacklist-modal__head {
    flex-shrink: 0;
}

.blacklist-modal__body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: var(--space-12);
    text-align: left;
    flex: 1 1 auto;
    max-height: none;
}

.blacklist-summary {
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-12) var(--space-14);
    line-height: 1.7;
}

.blacklist-summary__main {
    color: var(--text-secondary);
    font-size: var(--font-label);
    text-align: left;
}

.blacklist-summary__rules {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-6) var(--space-8);
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: var(--font-caption);
    margin-top: var(--space-8);
}

.blacklist-summary__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
    line-height: 1.45;
}

.blacklist-summary__trade {
    color: var(--accent-jade);
}

.blacklist-summary__protector {
    color: var(--accent-orange);
}

.blacklist-summary__redpacket {
    color: var(--text-gold, var(--accent-gold));
}

/* 藏锋开启 / 续期 · 时长与仙缘确认弹窗 */
.privacy-audience-summary__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
}

/* 藏锋管理顶部状态栏：用细金线表达状态，避免整块浅色底抢占视觉层级 */
.privacy-audience-summary {
    position: relative;
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--accent-gold) 26%, var(--border-color));
    background: var(--bg-card);
}

.privacy-audience-summary__top {
    min-height: 56px;
    padding: var(--space-10) var(--space-10) var(--space-10) var(--space-16);
}

.privacy-audience-summary__top .blacklist-summary__main {
    min-width: 0;
    line-height: 1.5;
}

.privacy-audience-summary__activate {
    flex: 0 0 auto;
    min-height: 32px;
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-md);
    white-space: nowrap;
}

body.game-page .privacy-activation-modal,
.privacy-activation-modal {
    max-width: 356px;
    width: min(356px, 100%);
    min-height: 0;
}

.privacy-activation-modal__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: var(--space-12);
    overflow-y: auto;
    padding-bottom: var(--space-10);
}

.privacy-activation-modal__intro {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-body);
    line-height: 1.6;
}

.privacy-activation-modal__note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    padding: var(--space-10) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 22%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-panel));
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 1.55;
}

.privacy-activation-modal__note b {
    flex: 0 0 auto;
    color: var(--text-gold);
    font-size: var(--font-body);
}

.privacy-activation-modal__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-top: var(--space-2);
}

.privacy-activation-modal__label b {
    color: var(--text-primary);
    font-size: var(--font-body-lg);
}

.privacy-activation-modal__label span {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.privacy-activation-modal__plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.privacy-activation-plan {
    min-height: 68px;
    padding: var(--space-10) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.privacy-activation-plan strong,
.privacy-activation-plan span {
    display: block;
}

.privacy-activation-plan strong {
    font-size: var(--font-action);
    line-height: 1.35;
}

.privacy-activation-plan span {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.privacy-activation-plan.is-active {
    border-color: color-mix(in srgb, var(--accent-gold) 70%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-gold) 18%, transparent);
}

.privacy-activation-plan.is-active strong,
.privacy-activation-plan.is-active span {
    color: var(--text-gold);
}

.privacy-activation-plan:hover,
.privacy-activation-plan:focus-visible {
    border-color: color-mix(in srgb, var(--accent-gold) 52%, var(--border-color));
    outline: none;
}

.privacy-activation-modal__summary {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 24%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-panel));
}

.privacy-activation-modal__summary span {
    color: var(--text-secondary);
    font-size: var(--font-label);
}

.privacy-activation-modal__summary strong {
    color: var(--text-jade);
    font-size: var(--font-action);
}

.privacy-activation-modal__balance {
    display: flex;
    flex: 0 0 auto;
    align-items: baseline;
    justify-content: space-between;
    min-height: 18px;
    margin: 0 var(--space-2);
    padding: 0 0 var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.45;
}

.privacy-activation-modal__balance b {
    color: var(--text-gold);
}

.privacy-activation-modal__foot .modal-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.privacy-activation-modal__foot .modal-btn--gold {
    padding-inline: var(--space-8);
    font-size: var(--font-body);
    white-space: nowrap;
}

.privacy-activation-modal__foot {
    flex: 0 0 auto;
    margin-top: 0;
    min-height: 68px;
}

@media (max-width: 380px) {
    .privacy-activation-modal__body {
        gap: var(--space-10);
    }

    .privacy-activation-modal__note {
        padding: var(--space-10) var(--space-10);
    }

    .privacy-activation-modal__foot {
        gap: var(--space-8);
        padding-inline: var(--space-12);
    }
}

/* 藏锋可见范围 · 设计方向 A：规则 → 关系开关 → 单独添加 → 当前生效名单 */
.privacy-audience-section-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin: var(--space-2) var(--space-2) calc(-1 * var(--space-4));
}

.privacy-audience-section-label b {
    color: var(--text-primary);
    font-size: var(--font-body-lg);
}

.privacy-audience-section-label span {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.privacy-audience-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.privacy-audience-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    min-height: 44px;
    padding: var(--space-8) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-body);
    font-weight: 700;
    line-height: 1.35;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.privacy-audience-mode::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .16s ease, transform .16s ease;
}

.privacy-audience-mode.is-active {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 10%, var(--bg-card));
    color: var(--text-gold, var(--accent-gold));
}

.privacy-audience-mode.is-active::before {
    opacity: 1;
    transform: scale(1);
}

.privacy-audience-mode:not(.is-active):hover,
.privacy-audience-mode:not(.is-active):focus-visible {
    background: var(--bg-card);
    color: var(--text-primary);
}

#privacyAudienceModeNote {
    color: var(--text-gold, var(--accent-gold));
    font-weight: 600;
}

.privacy-audience-mode:focus-visible,
.privacy-audience-switch:focus-visible,
.privacy-audience-find:focus-visible,
.privacy-audience-remove:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-jade) 65%, transparent);
    outline-offset: 2px;
}

.privacy-audience-relation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.privacy-audience-relation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-height: 47px;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.privacy-audience-relation > div {
    min-width: 0;
}

.privacy-audience-relation__name {
    display: block;
    color: var(--text-primary);
    font-size: var(--font-body);
    line-height: 1.25;
}

.privacy-audience-relation small {
    display: block;
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-micro);
}

.privacy-audience-relation.is-on {
    border-color: color-mix(in srgb, var(--accent-jade) 38%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 10%, var(--bg-card));
}

.privacy-audience-relation.is-on .privacy-audience-relation__name {
    color: var(--accent-jade);
}

.privacy-audience-switch {
    position: relative;
    width: 38px;
    height: 22px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--text-muted) 34%, var(--bg-panel));
    transition: background .16s ease;
}

.privacy-audience-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
    transition: left .16s ease;
}

.privacy-audience-relation.is-on .privacy-audience-switch {
    background: var(--accent-jade);
}

.privacy-audience-relation.is-on .privacy-audience-switch::after {
    left: 19px;
}

.privacy-audience-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: var(--space-8);
}

.privacy-audience-field {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    padding: 0 var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-body-lg);
}

.privacy-audience-field::placeholder {
    color: var(--text-muted);
}

.privacy-audience-field:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-gold) 58%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 12%, transparent);
}

.privacy-audience-find {
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 58%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 12%, var(--bg-card));
    color: var(--text-gold, var(--accent-gold));
    font-weight: 700;
}

.privacy-audience-find:hover {
    background: var(--accent-gold);
    color: var(--text-on-gold);
}

.privacy-audience-list-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-top: var(--space-6);
    padding: 0 var(--space-2) var(--space-8);
    border-bottom: 1px solid var(--border-color);
}

.privacy-audience-list-meta b {
    color: var(--text-primary);
    font-size: var(--font-body-lg);
}

.privacy-audience-list-meta span {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

/* #7245：PC 上名单/搜索结果不再各自限高自滚，整页交给 gc-mid。 */
#privacyAudienceModal .blacklist-modal__body > * {
    flex-shrink: 0;
}

.privacy-audience-list {
    display: grid;
    gap: var(--space-8);
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-right: var(--space-2);
}

#privacyAudienceSearchResults:empty {
    display: none;
}

.privacy-audience-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 28%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-card));
}

.privacy-audience-row strong,
.privacy-audience-row small {
    display: block;
}

.privacy-audience-row strong {
    color: var(--text-primary);
    font-size: var(--font-body-lg);
}

.privacy-audience-row small {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.privacy-audience-remove {
    height: 30px;
    padding: 0 var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 30%, var(--border-color));
    border-radius: var(--radius-sm);
    background: transparent;
    color: #a05a53;
    font-size: var(--font-label);
}

.privacy-audience-remove:hover {
    background: rgb(183 58 49 / 8%);
}

.privacy-audience-empty {
    display: grid;
    place-items: center;
    min-height: 78px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-card) 48%, transparent);
    color: var(--text-muted);
    font-size: var(--font-body);
}

@media (max-width: 380px) {
    .privacy-audience-summary__top {
        gap: var(--space-8);
        padding-left: var(--space-14);
    }

    .privacy-audience-summary__activate {
        min-height: 30px;
        padding-inline: var(--space-8);
    }

    .privacy-audience-relation__name {
        font-size: var(--font-label);
    }

    .privacy-audience-relation small {
        font-size: var(--font-micro);
    }
}

.blacklist-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: var(--space-10);
}

.blacklist-add-input {
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 var(--space-12);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-body-lg);
}

.blacklist-add-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 12%, transparent);
}

.blacklist-add-btn {
    width: 96px;
    min-width: 0 !important;
    height: 40px;
    padding: 0 var(--space-14);
}

.blacklist-count {
    color: var(--text-muted);
    font-size: var(--font-caption);
    text-align: left;
    margin-top: calc(-1 * var(--space-4));
    letter-spacing: 0.3px;
}

.blacklist-list {
    flex: 1;
    min-height: 100px;
    max-height: min(42vh, 340px);
    overflow-y: auto;
    padding-right: var(--space-2);
}

.blacklist-empty {
    padding: var(--space-24) var(--space-12);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-body);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--glass-white-2);
}

.blacklist-row {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: var(--space-10);
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.blacklist-row__info {
    min-width: 0;
}

.blacklist-row__name {
    color: var(--text-primary);
    font-size: var(--font-body-lg);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blacklist-row__date {
    color: var(--text-muted);
    font-size: var(--font-caption);
    margin-top: var(--space-2);
}

/* 我的举报 · 行内状态与摘要 */
.my-report-status {
    display: inline-block;
    margin-left: var(--space-6);
    padding: 0 var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    font-weight: 500;
    line-height: 1.6;
    vertical-align: middle;
}
.my-report-status--is-pending {
    color: var(--accent-orange, var(--text-orange));
    background: color-mix(in srgb, var(--accent-orange, var(--text-orange)) 12%, transparent);
}
.my-report-status--is-ok {
    color: var(--color-success, var(--success-color));
    background: color-mix(in srgb, var(--color-success, var(--success-color)) 12%, transparent);
}
.my-report-status--is-muted {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.my-report-reason {
    margin-top: var(--space-4);
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.45;
    word-break: break-word;
}
.my-report-status--is-review {
    color: var(--color-gold, var(--accent-gold));
    background: color-mix(in srgb, var(--color-gold, var(--accent-gold)) 12%, transparent);
}
.my-report-steps {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
    overflow-x: auto;
}
.my-report-step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.my-report-step__dot {
    width: 8px;
    height: 8px;
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    background: var(--color-border, var(--border-color));
}
.my-report-step.is-done .my-report-step__dot {
    background: var(--color-success, var(--success-color));
}
.my-report-step.is-current .my-report-step__dot {
    background: var(--color-gold, var(--accent-gold));
}
.my-report-step__title {
    font-size: var(--font-micro);
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.my-report-step.is-done .my-report-step__title,
.my-report-step.is-current .my-report-step__title {
    color: var(--text-secondary);
}
.my-report-events {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.my-report-event {
    padding: var(--space-8) var(--space-10);
    border-left: 2px solid var(--color-border, var(--border-color));
    background: var(--color-bg-panel, var(--bg-panel));
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.my-report-event__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    align-items: baseline;
}
.my-report-event__title {
    font-size: var(--font-caption);
    color: var(--text-primary);
    font-weight: 600;
}
.my-report-event__time {
    flex: none;
    font-size: var(--font-micro);
    color: var(--text-muted);
}
.my-report-event__body {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-secondary);
    line-height: 1.45;
    word-break: break-word;
}

.blacklist-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-10);
    min-width: 0;
}

.blacklist-row__flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
}

.blacklist-modal .blacklist-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    height: 30px;
    box-sizing: border-box;
    padding: 0 var(--space-8);
    margin: 0;
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--glass-white-2);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    user-select: none;
}

.blacklist-modal .blacklist-flag input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.blacklist-modal .blacklist-flag span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    position: relative;
    line-height: 1;
}

.blacklist-modal .blacklist-flag span::before {
    content: "";
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1px solid currentColor;
    border-radius: var(--radius-xs);
    font-size: var(--font-caption);
    font-weight: 700;
}

.blacklist-modal .blacklist-flag input:checked + span::before {
    content: "";
    color: #fff;
}

.blacklist-modal .blacklist-flag input:checked + span::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.blacklist-modal .blacklist-flag:has(input:focus-visible) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 12%, transparent);
}

.blacklist-modal .blacklist-flag--trade input:checked + span::before {
    background: var(--accent-jade);
    border-color: var(--accent-jade);
}

.blacklist-flag--trade:has(input:checked) {
    color: var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-blue) 45%, transparent);
    background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
}

.blacklist-modal .blacklist-flag--protector input:checked + span::before {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
}

.blacklist-flag--protector:has(input:checked) {
    color: var(--accent-orange);
    border-color: color-mix(in srgb, var(--craft-gold) 45%, transparent);
    background: color-mix(in srgb, var(--craft-gold) 10%, transparent);
}

.blacklist-modal .blacklist-flag--on input:checked + span::before {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
}

.blacklist-flag--on:has(input:checked) {
    color: var(--accent-blue);
    border-color: color-mix(in srgb, var(--accent-blue) 45%, transparent);
    background: color-mix(in srgb, var(--accent-blue) 10%, transparent);
}

.blacklist-remove-btn {
    height: 30px;
    padding: 0 var(--space-10);
    border: 1px solid color-mix(in srgb, var(--jimo-crimson) 30%, transparent);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-label);
    cursor: pointer;
}

.blacklist-remove-btn:hover {
    color: var(--text-danger);
    border-color: color-mix(in srgb, var(--jimo-crimson) 55%, transparent);
    background: color-mix(in srgb, var(--jimo-crimson) 8%, transparent);
}

@media (max-width: 520px) {
    .blacklist-add-row {
        grid-template-columns: 1fr;
    }
}

/* 已选 chip 区 */
.fd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    min-height: 32px;
    padding-top: var(--space-10);
    border-top: 1px solid var(--border-color);
}
.fd-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-sm);
    font-size: var(--font-label);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.fd-chip--skill {
    color: var(--text-jade);
    background: var(--bg-glass-jade);
    border-color: var(--border-jade);
}
.fd-chip--custom {
    color: var(--accent-purple);
    background: color-mix(in srgb, var(--accent-purple) 6%, transparent);
    border-color: color-mix(in srgb, var(--accent-purple) 18%, transparent);
}
.fd-chip--affix {
    color: var(--text-gold);
    background: var(--gradient-gold);
    border-color: var(--border-gold);
}
.fd-chip__slot {
    font-size: var(--font-micro);
    color: var(--text-muted);
}
.fd-chip__close {
    cursor: pointer;
    color: var(--text-muted);
    margin-left: var(--space-2);
    font-size: var(--font-body);
    line-height: 1;
}
.fd-chips__empty {
    font-size: var(--font-caption);
    color: var(--text-muted);
}

/* 操作按钮 */
.fd-actions {
    display: flex;
    gap: var(--space-8);
}
.fd-action-btn {
    flex: 1;
    height: 42px;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-body-lg);
    font-family: var(--font-serif);
    letter-spacing: 1px;
    cursor: pointer;
    transition: filter .15s;
}
.fd-action-btn:hover { filter: brightness(1.08); }
.fd-action-btn--primary {
    background: var(--accent-jade);
    color: #fff;
    box-shadow: 0 2px 8px rgba(22, 128, 106, 0.2);
}

/* 公平对决 · 补充类（勿写全局 .panel-section { padding:0 }，会吃掉角色侧栏灵石/玄筹分区底内边距） */
#fairDuelContent .panel-section { padding: 0; }

/* 公平对决 · 技能配置区 */
.fd-skill-config { margin: var(--space-12) 0; }
.fd-skill-config-loading,
.fd-skill-config-error {
    padding: var(--space-16);
    color: var(--text-muted);
    text-align: center;
}

/* 公平化身配置：只读 / 词条 / 灵宠 / 神通 分块 */
.fd-editor__lead {
    margin: 0 0 var(--space-12);
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-secondary);
}
.fd-block {
    margin: 0 0 var(--space-12);
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--fd-line, var(--color-border-default));
    border-radius: var(--radius-md);
    background: var(--fd-surface, var(--color-bg-subtle));
}
.fd-block:last-child { margin-bottom: 0; }
.fd-block__head {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
}
.fd-block__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}
.fd-block__actions {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-6);
}
.fd-block__hint {
    margin: var(--space-6) 0 0;
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-secondary);
}
.fd-block__value {
    margin-top: var(--space-8);
    font-size: var(--font-body);
    line-height: 1.5;
    color: var(--text-primary);
}
.fd-block__meta {
    margin-top: var(--space-8);
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.fd-block__meta strong { color: var(--text-gold); }
.fd-empty {
    margin: 0;
    padding: var(--space-10) 0;
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-secondary);
}
.fd-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--space-6);
    max-height: 220px;
    overflow-y: auto;
    margin-top: var(--space-8);
}
.fd-snapshot-editor button.skill-chip,
.fd-block button.fd-chip {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: 26px;
    padding: 0 var(--space-8);
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-caption);
    line-height: 1;
    cursor: pointer;
}
.fd-snapshot-editor button.skill-chip.on,
.fd-block button.fd-chip.on {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
    color: var(--text-jade);
    font-weight: 600;
}
.fd-block .fd-search {
    margin-top: var(--space-8);
}
.fd-block .fd-search input {
    width: 100%;
    height: 40px;
    padding: 0 var(--space-12);
    border: 1px solid var(--fd-line, var(--color-border-default));
    border-radius: var(--radius-sm);
    background: var(--fd-raised, var(--color-bg-surface));
    color: var(--text-primary);
    font-size: var(--font-body);
}
.fd-block .fd-filters { margin-top: var(--space-8); }
.fd-block .fd-skill-toggle { margin-top: var(--space-8); }
.fd-block .skill-row { margin-top: var(--space-8); }
.fd-gongfa-row {
    padding: var(--space-8) var(--space-12);
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-10);
}
.fd-gongfa-label { color: var(--text-muted); font-size: var(--font-body); }
.fd-gongfa-name { color: var(--text-gold, #d4af37); font-weight: 600; margin-left: var(--space-6); }
.fd-gongfa-grade { color: var(--text-muted); font-size: var(--font-label); margin-left: var(--space-4); }
.fd-gongfa-none { color: var(--text-muted); margin-left: var(--space-6); }
.fd-skill-count {
    font-size: var(--font-body);
    color: var(--text-secondary, #bbb);
    margin-bottom: var(--space-8);
    padding: 0 var(--space-4);
}
.fd-skill-count span { color: var(--text-gold, #d4af37); font-weight: 600; }
.fd-skill-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-4);
}
.fd-skill-item {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}
.fd-skill-item:hover { background: rgba(255, 255, 255, 0.06); }
.fd-skill-item--checked {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}
.fd-skill-checkbox { flex-shrink: 0; }
.fd-skill-name { font-weight: 600; color: var(--text-primary, #eee); }
.fd-skill-tag {
    font-size: var(--font-caption);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}
.fd-skill-tag--custom { background: rgba(100, 180, 255, 0.15); color: #6cb4ff; }
.fd-skill-equip-mark { font-size: var(--font-caption); color: var(--text-muted); }
.fd-skill-desc {
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-left: auto;
    text-align: right;
}

/* ===== 公平对决 · 玉简排阵（内嵌试炼 Tab）===== */
#fairDuelContent .panel-section {
    --fd-line: color-mix(in srgb, var(--border-color) 86%, transparent);
    
    --fd-surface: var(--bg-panel);
    --fd-raised: var(--bg-card);
    
    padding: var(--space-8) 0 var(--space-12);
}

#fairDuelContent .fd-skill-config { margin: var(--space-8) 0; }
/* 快照编辑弹窗（fairSnapshotEditorOverlay）直挂 document.body，继承不到
   #fairDuelContent .panel-section 上的 --fd-* 令牌，这里上提一份同值定义
   （改值时须与 panel-section 内保持同步），供 .fd-pick-row 等在弹窗内解析。 */
.fd-snapshot-editor {
    --fd-line: color-mix(in srgb, var(--border-color) 86%, transparent);
    
    --fd-surface: var(--bg-panel);
    --fd-raised: var(--bg-card);
    
}
#fairDuelContent .fd-skill-count {
    flex: none;
    margin: 0 0 0 auto;
    padding: 0;
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-micro);
    white-space: nowrap;
}
#fairDuelContent .fd-skill-count strong {
    margin-left: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--font-body-lg);
}
#fairDuelContent .fd-gongfa-row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin: 0;
    padding: var(--space-8) var(--space-12);
    border-bottom: 1px dashed var(--fd-line);
    border-radius: 0;
    background: transparent;
    font-size: var(--font-micro);
}
#fairDuelContent .fd-gongfa-label { color: var(--text-muted); font-size: var(--font-micro); }
#fairDuelContent .fd-gongfa-name { margin: 0; color: var(--text-gold); font-size: var(--font-label); }
#fairDuelContent .fd-gongfa-grade {
    margin: 0;
    padding: var(--space-2) var(--space-6);
    border: 1px solid color-mix(in srgb, var(--accent-purple) 25%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-purple) 8%, transparent);
    color: var(--accent-purple);
    font-size: var(--font-micro);
}

.fd-b-pool {
    border-top: 0;
}
.fd-skill-config--collapsed .fd-b-pool { display: none !important; }

#fairDuelContent .fd-skill-list {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    padding: var(--space-6);
    gap: var(--space-4);
    overflow-y: auto;
}

/* #9752：手机套滚吃掉手势，词条/灵宠/技能池后面点不到；窄屏改由弹窗中栏统滚 */
@media (max-width: 640px) {
    .fd-chip-row,
.fd-skill-list,
#fairDuelContent .fd-skill-list {
        max-height: none;
        overflow-y: visible;
    }
}

#fairDuelContent .fd-skill-tag {
    padding: var(--space-2) var(--space-6);
    border: 1px solid var(--fd-line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-micro);
}
#fairDuelContent .fd-skill-tag--custom {
    border-color: color-mix(in srgb, var(--accent-purple) 24%, transparent);
    background: color-mix(in srgb, var(--accent-purple) 7%, transparent);
    color: var(--accent-purple);
}
.fd-skill-toggle {
    width: 100%;
    height: 30px;
    border: 0;
    border-top: 1px solid var(--fd-line);
    background: transparent;
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-micro);
    cursor: pointer;
}
/* 与储物「批量操作」一致的 CSS 三角箭头，避免字体渲染偏位 */
.fd-skill-toggle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: var(--space-6);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    opacity: .6;
}
.fd-skill-toggle[aria-expanded="true"]::after {
    border-top: 0;
    border-bottom: 4px solid currentColor;
}

@media (max-width: 480px) {
    #fairDuelContent .panel-section { padding-top: var(--space-8); }
    #fairDuelContent .fd-skill-item {
        grid-template-columns: 16px auto auto minmax(64px, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    #fairDuelContent *,
    #fairDuelContent *::before,
    #fairDuelContent *::after { transition-duration: .001ms !important; }
}


/* 炼造顶栏 · 化身/本体神识胶囊（常显，免进化身页确认） */
.craft-gc-head__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    padding-right: var(--space-4);
}
.craft-gc-head__title-row .gc-title {
    flex: 0 0 auto;
}
.craft-spirit-pills {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
    flex: 1 1 auto;
    margin-left: var(--space-2);
    overflow: hidden;
}
.craft-spirit-pill {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-4);
    max-width: 100%;
    min-height: 28px;
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 9%, transparent);
    color: var(--text-jade, var(--accent-jade));
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s, color 0.12s, opacity 0.12s;
}
.craft-spirit-pill:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 50%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 14%, transparent);
}
.craft-spirit-pill--self {
    cursor: default;
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    color: var(--text-secondary);
}
.craft-spirit-pill--self:hover {
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
}
.craft-spirit-pill__lab {
    font-size: var(--font-micro);
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.88;
}
.craft-spirit-pill__val {
    font-size: var(--font-label);
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    font-style: normal;
}
.craft-spirit-pill.is-on {
    border-color: color-mix(in srgb, var(--accent-jade) 48%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 14%, transparent);
}
.craft-spirit-pill.is-off {
    border-color: color-mix(in srgb, var(--accent-gold) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: var(--text-gold);
}
.craft-spirit-pill.is-low {
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 40%, var(--border-color));
    background: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 9%, transparent);
    color: var(--text-danger, var(--accent-crimson));
}
.craft-spirit-pill.is-empty {
    border-color: color-mix(in srgb, var(--border-color) 90%, transparent);
    background: transparent;
    color: var(--text-muted);
}
.craft-spirit-pill.is-empty .craft-spirit-pill__val {
    font-size: var(--font-caption);
    font-weight: 600;
}
@media (max-width: 420px) {
    .craft-spirit-pill--self { display: none; } /* 窄屏优先保化身神识 */
    .craft-spirit-pill { padding: var(--space-4) var(--space-8); min-height: 26px; }
    .craft-spirit-pill__lab { font-size: var(--font-micro); }
    .craft-spirit-pill__val { font-size: var(--font-caption); }
}

.craft-spirit-pills.is-other-tab {
    opacity: 0.88;
}
.craft-spirit-pills.is-craft-tab .craft-spirit-pill.is-on {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-jade) 25%, transparent);
}

/* friend panel 特殊 header（有 actions） */
.friend-workbench > .panel-title {
    padding: var(--space-10) var(--space-12) var(--space-6);
    gap: var(--space-6);
}
.friend-workbench > .panel-title .panel-title-actions {
    margin-left: auto;
    flex: none;
}
.friend-workbench > .panel-title .panel-title-link {
    height: 26px; padding: 0 var(--space-8); border-radius: var(--radius-pill);
    border: 1px solid var(--border-color); background: transparent;
    color: var(--text-secondary); font-size: var(--font-caption); font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center;
    transition: border-color .12s, color .12s;
}
.friend-workbench > .panel-title .panel-title-link:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 35%, var(--border-color));
    color: var(--text-gold);
}

/* ===== 上界渡言 · gc-dialog.bw-dialog（无左轨 / 无通栏顶条） =====
 * 滚动策略：壳封顶 + 中区单一纵向滚动（与全站 gc-dialog 一致）。
 * 勿再给 .bw-list / .bw-echo-list 设矮 max-height 嵌套滚，否则 PC 上
 * 「凡尘回响」会被挤到只剩一条缝、滚轮又落在内层导致像「整页不能滑」。
 */
body.game-page .gc-dialog.bw-dialog,
.gc-dialog.bw-dialog {
    --gc-radius: var(--radius-lg);
    --gc-radius-inner: var(--radius-md);
    --gc-radius-btn: var(--radius-md);
    width: 94%;
    padding: 0;
    border-radius: var(--radius-lg);
    /* 覆盖 ui-scrollable-modal 默认 85dvh/720 与过矮业务 cap，PC 也要够高 */
    max-height: min(92dvh, calc(100dvh - var(--mobile-popup-safe-top, 24px) - var(--mobile-popup-safe-bottom, 16px) - 16px));
}
#breakthroughWhisperModal .bw-head {
    position: relative;
    padding: var(--space-20) var(--space-48) 0 var(--space-20);
    text-align: left;
    flex-shrink: 0;
}
#breakthroughWhisperModal .gc-mid.bw-mid,
#breakthroughWhisperModal .bw-mid {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-10);
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--space-12) var(--space-16) var(--space-8) !important;
    /* 不再限 64vh/560：由壳 max-height 约束，内容多则中区自滚 */
    max-height: none !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    text-align: left !important;
    white-space: normal;
}
/* 中区子块不随 flex 被压扁（避免回响区高度被挤没） */
#breakthroughWhisperModal .bw-mid > * {
    flex-shrink: 0;
}
#breakthroughWhisperModal .gc-foot.bw-foot,
#breakthroughWhisperModal .bw-foot {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-8);
    margin: 0 !important;
    padding: var(--space-10) var(--space-16) max(var(--space-12), env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--border-color);
}
#breakthroughWhisperModal .bw-foot .modal-btn {
    flex: 1;
    min-height: 40px;
    border-radius: var(--gc-radius-btn, var(--radius-md));
}

/* 引语卡 */
#breakthroughWhisperModal .bw-quote {
    padding: var(--space-12) var(--space-12);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    border: 1px solid color-mix(in srgb, var(--accent-gold) 28%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
}
#breakthroughWhisperModal .bw-quote__lab {
    font-size: var(--font-micro);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}
#breakthroughWhisperModal .bw-quote__body {
    margin: 0;
    font-size: var(--font-label);
    line-height: 1.65;
    color: var(--text-secondary);
    font-style: italic;
}

/* 度量双卡 */
#breakthroughWhisperModal .bw-metrics {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-6);
}
#breakthroughWhisperModal .bw-metric {
    padding: var(--space-10) var(--space-10);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    border: 1px solid var(--border-color);
    background: var(--bg-panel, var(--bg-card));
    box-sizing: border-box;
}
#breakthroughWhisperModal .bw-metric--kind {
    border-color: color-mix(in srgb, var(--accent-gold) 32%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel, var(--bg-card)));
}
#breakthroughWhisperModal .bw-metric__lab {
    font-size: var(--font-micro);
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
#breakthroughWhisperModal .bw-metric__val {
    margin-top: var(--space-2);
    font-size: var(--font-title);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    color: var(--text-primary);
}
#breakthroughWhisperModal .bw-metric--kind .bw-metric__val { color: var(--text-gold); }
#breakthroughWhisperModal .bw-metric__val b { font-weight: 700; }
#breakthroughWhisperModal .bw-metric__val small {
    font-size: var(--font-caption);
    font-weight: 500;
    color: var(--text-muted);
    margin-left: var(--space-2);
}

/* 表单 */
#breakthroughWhisperModal .bw-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}
#breakthroughWhisperModal .bw-kind {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-input, rgba(42, 42, 38, 0.04));
    box-sizing: border-box;
}
#breakthroughWhisperModal .bw-kind-tab {
    height: 32px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
#breakthroughWhisperModal .bw-kind-tab.is-on {
    background: var(--bg-card);
    color: var(--text-gold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 32%, var(--border-color));
}
html.theme-dark #breakthroughWhisperModal .bw-kind-tab.is-on {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

#breakthroughWhisperModal .bw-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: 0;
}
#breakthroughWhisperModal .bw-field__lab {
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}
#breakthroughWhisperModal .bw-seed {
    width: 100%;
    min-height: 72px;
    margin: 0;
    padding: var(--space-10) var(--space-12);
    resize: vertical;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    background: var(--bg-panel, var(--bg-card));
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-body);
    line-height: 1.55;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
#breakthroughWhisperModal .bw-seed:focus {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 12%, transparent);
}
#breakthroughWhisperModal .bw-seed::placeholder { color: var(--text-muted); }
#breakthroughWhisperModal .bw-field__hint {
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-muted);
}

/* 润色后保留的原句提示 */
#breakthroughWhisperModal .bw-seed-orig {
    margin: 0 0 var(--space-2);
    padding: var(--space-6) var(--space-10);
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-card) 88%, var(--accent-gold) 12%);
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, var(--accent-gold) 15%);
}
#breakthroughWhisperModal .bw-seed-orig b {
    color: var(--text-secondary);
    font-weight: 600;
}
#breakthroughWhisperModal .bw-seed-orig.hidden { display: none; }

/* 天道润色：点击按钮（可 is-on 表示已回填） */
#breakthroughWhisperModal .bw-polish-chip {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
    margin: 0;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    border: 1px solid var(--border-color);
    background: var(--bg-panel, var(--bg-card));
    color: var(--text-secondary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .12s, background .12s, color .12s;
}
#breakthroughWhisperModal .bw-polish-chip:disabled,
#breakthroughWhisperModal .bw-polish-chip.is-busy {
    opacity: 0.72;
    cursor: wait;
}
#breakthroughWhisperModal .bw-polish-chip.is-on {
    border-color: color-mix(in srgb, var(--accent-jade) 42%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 9%, var(--bg-card));
    color: var(--text-primary);
}
#breakthroughWhisperModal .bw-polish-chip__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--border-color) 90%, transparent);
    background: transparent;
    flex: none;
    box-sizing: border-box;
    position: relative;
}
#breakthroughWhisperModal .bw-polish-chip.is-on .bw-polish-chip__dot {
    border-color: color-mix(in srgb, var(--accent-jade) 55%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 22%, transparent);
}
#breakthroughWhisperModal .bw-polish-chip.is-on .bw-polish-chip__dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent-jade, var(--accent-jade));
}
#breakthroughWhisperModal .bw-polish-chip__txt {
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: inherit;
    flex: none;
}
#breakthroughWhisperModal .bw-polish-chip__sub {
    margin-left: auto;
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-weight: 500;
}
#breakthroughWhisperModal .bw-polish-chip.is-on .bw-polish-chip__sub {
    color: var(--text-jade);
}
#breakthroughWhisperModal .bw-note {
    margin: 0;
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-muted);
}
#breakthroughWhisperModal .bw-note b {
    color: var(--text-gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 未达门槛 */
#breakthroughWhisperModal .bw-locked {
    padding: var(--space-14) var(--space-14);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    border: 1px dashed color-mix(in srgb, var(--accent-gold) 30%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 5%, transparent);
}
#breakthroughWhisperModal .bw-locked__lab {
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--text-gold);
    margin-bottom: var(--space-6);
}
#breakthroughWhisperModal .bw-locked__body {
    margin: 0;
    font-size: var(--font-body);
    color: var(--text-secondary);
    line-height: 1.65;
}
#breakthroughWhisperModal .bw-locked__body b { color: var(--text-gold); }

/* 分区标题（避开神号 .dt-sec 冲突） */
#breakthroughWhisperModal .bw-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin: var(--space-2) 0 0;
    padding: 0 var(--space-2);
}
#breakthroughWhisperModal .bw-hd__t {
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
}
#breakthroughWhisperModal .bw-hd__n {
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* 列表：跟随 .bw-mid 单滚动，不另开内层矮框 */
#breakthroughWhisperModal .bw-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    max-height: none;
    overflow: visible;
}
#breakthroughWhisperModal .bw-empty {
    padding: var(--space-16) var(--space-12);
    text-align: center;
    border-radius: var(--gc-radius-inner, var(--radius-md));
    border: 1px dashed var(--border-color);
    background: transparent;
}
#breakthroughWhisperModal .bw-empty__t {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-secondary);
}
#breakthroughWhisperModal .bw-empty__d {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-muted);
}
#breakthroughWhisperModal .bw-card {
    padding: var(--space-12) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    background: var(--bg-panel, var(--bg-card));
    box-sizing: border-box;
}
#breakthroughWhisperModal .bw-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}
#breakthroughWhisperModal .bw-card__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
}
#breakthroughWhisperModal .bw-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    font-weight: 600;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, transparent);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 9%, transparent);
    line-height: 1;
    box-sizing: border-box;
}
#breakthroughWhisperModal .bw-chip--success {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    color: var(--text-jade);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}
#breakthroughWhisperModal .bw-chip--fail {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 9%, transparent);
}
#breakthroughWhisperModal .bw-chip--polish {
    border-color: color-mix(in srgb, var(--accent-jade) 35%, transparent);
    color: var(--text-jade);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}
#breakthroughWhisperModal .bw-chip--raw {
    border-color: var(--border-color);
    color: var(--text-muted);
    background: transparent;
}
#breakthroughWhisperModal .bw-card__rm {
    flex: none;
    height: 26px;
    padding: 0 var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-caption);
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
#breakthroughWhisperModal .bw-card__rm:hover {
    color: var(--accent-crimson, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 40%, var(--border-color));
}
#breakthroughWhisperModal .bw-card__seed {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
    line-height: 1.45;
}
#breakthroughWhisperModal .bw-card__body {
    font-size: var(--font-body);
    color: var(--text-primary);
    line-height: 1.55;
}
#breakthroughWhisperModal .bw-chip--echo {
    border-color: color-mix(in srgb, var(--accent-gold) 34%, transparent);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

/* 凡尘回响：完整展示，随中区上下滑（PC/手机同一套） */
#breakthroughWhisperModal .bw-echo-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: none;
    overflow: visible;
    /* 与标题之间略留空，避免滚到底时贴脚 */
    padding-bottom: var(--space-4);
}
#breakthroughWhisperModal .bw-empty--echo {
    padding: var(--space-12) var(--space-12);
}
#breakthroughWhisperModal .bw-echo {
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--gc-radius-inner, var(--radius-md));
    background: var(--bg-panel, var(--bg-card));
    box-sizing: border-box;
}
#breakthroughWhisperModal .bw-echo__head {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    min-width: 0;
}
#breakthroughWhisperModal .bw-echo__name {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46%;
}
#breakthroughWhisperModal .bw-echo__time {
    margin-left: auto;
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex: none;
}
#breakthroughWhisperModal .bw-echo__body {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-secondary);
}

/* 兼容旧 class（若缓存残留） */
.bw-dialog { max-width: min(400px, 94vw); }

/* ===== 幼兽保留规则：紧凑列表管理 + 子弹窗编辑 ===== */
.auto-process-modal-overlay .hatchling-rules,
.hatchling-rules {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.hatchling-rules__empty {
    padding: var(--space-10) var(--space-8);
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--ap-muted, var(--text-muted));
    text-align: center;
    border: 1px dashed var(--ap-line, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
}
.hatchling-rules__empty.hidden { display: none; }

/* 单行摘要卡 */
.hatchling-rule--row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    min-height: 44px;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--ap-line, var(--border-color));
    border-radius: var(--radius-md);
    background: var(--ap-panel-raised, var(--bg-panel));
}
.hatchling-rule__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}
.hatchling-rule__idx {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-caption);
    font-weight: 700;
    color: var(--text-gold, var(--accent-gold));
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 32%, transparent);
    margin-top: var(--space-2);
}
.hatchling-rule__sum {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.hatchling-rule__line {
    display: flex;
    gap: var(--space-6);
    align-items: baseline;
    min-width: 0;
    font-size: var(--font-label);
    line-height: 1.35;
}
.hatchling-rule__k {
    flex: 0 0 auto;
    width: 28px;
    font-size: var(--font-micro);
    font-weight: 600;
    color: var(--ap-muted, var(--text-muted));
}
.hatchling-rule__v {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ap-text, var(--text-primary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hatchling-rule__ops {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: flex-end;
}
.hatchling-rule__edit,
.hatchling-rule__del {
    border: 0;
    background: none;
    padding: var(--space-2) 0;
    font-size: var(--font-caption);
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
}
.hatchling-rule__edit {
    color: var(--accent-jade, var(--text-jade));
}
.hatchling-rule__edit:hover { text-decoration: underline; }
.hatchling-rule__del {
    color: var(--accent-crimson, var(--danger, #c0392b));
    opacity: 0.88;
}
.hatchling-rule__del:hover { opacity: 1; text-decoration: underline; }
.hatchling-rules__add {
    margin-top: var(--space-4);
    align-self: stretch;
    width: 100%;
    min-height: 34px;
    font-size: var(--font-label);
}

/* 编辑子弹窗：叠在自动处理之上 */
.hatchling-editor-overlay {
    z-index: calc(var(--z-overlay-top, 120000) + 200) !important;
}
.hatchling-editor {
    max-width: min(400px, 94vw);
    width: 100%;
}
.hatchling-editor__mid {
    display: flex;
    flex-direction: column;
    gap: var(--space-14);
    max-height: min(58vh, 420px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.hatchling-editor__sec-h {
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-8);
    letter-spacing: 0.04em;
}
.hatchling-editor__hint {
    font-weight: 500;
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-left: var(--space-6);
}
.hatchling-editor__opts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}
.hatchling-editor__opt {
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    padding: var(--space-6) var(--space-10);
    font-size: var(--font-label);
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
}
.hatchling-editor__opt:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, var(--border-color));
    color: var(--text-primary);
}
.hatchling-editor__opt.is-on {
    color: var(--text-gold, var(--accent-gold));
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

/* 坐化之地自选发掘：道号必须单独成行，避免按钮行高裁掉名字 */
.remain-choice-row {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 var(--space-8);
    min-height: var(--pattern-touch-target);
    padding: var(--space-10) var(--space-12);
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.remain-choice-row__name {
    font-size: var(--font-action);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-primary);
}
.remain-choice-row__meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    line-height: 1.2;
    color: var(--text-muted);
}

/* ===== 坐化守灵（TG-076）：战或掘 ===== */
/* 每坟双钮并排：发掘占主宽，战守灵固定窄列（朱砂行为色） */
.remain-choice-pair {
    display: flex;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
    align-items: stretch;
}
.remain-choice-pair .remain-choice-row {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.remain-choice-row--battle {
    flex: 0 0 108px;
    border-color: color-mix(in srgb, var(--accent-crimson, #c0392b) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-crimson, #c0392b) 8%, var(--bg-panel));
}
.remain-choice-row--battle .remain-choice-row__name {
    color: var(--accent-crimson, #c0392b);
}
.remain-choice-row--battle .remain-choice-row__meta {
    white-space: nowrap;
}

/* 守灵取宝器：列表 + 底部计数/操作条（弹窗类，全局作用域） */
.remain-spirit-list {
    max-height: 46vh;
    overflow-y: auto;
    margin: var(--space-8) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.remain-spirit-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-10);
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.remain-spirit-row.is-selected {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-panel));
}
.remain-spirit-row__main {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-action);
    text-align: left;
    cursor: pointer;
}
.remain-spirit-row__main input[type="checkbox"] {
    accent-color: var(--accent-gold);
    width: 16px;
    height: 16px;
    flex: none;
}
.remain-spirit-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.remain-spirit-row__qty {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex: none;
    font-size: var(--font-caption);
    color: var(--accent-gold);
    font-weight: 600;
}
.remain-spirit-row__qty button {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-action);
    cursor: pointer;
    line-height: 1;
}
/* #10952：祭炼/铭文折叠详情 */
.remain-spirit-row__toggle {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-action);
    cursor: pointer;
    line-height: 1;
}
.remain-spirit-row__detail {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    /* 缩进对齐首行名称（复选框 16px + 行内间距） */
    padding: var(--space-4) 0 0 calc(16px + var(--space-8));
    font-size: var(--font-caption);
}
.remain-spirit-row__refine {
    color: var(--accent-gold);
    font-weight: 600;
}
.remain-spirit-foot {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}
.remain-spirit-counter {
    flex: 1 1 auto;
    font-size: var(--font-action);
    font-weight: 600;
    color: var(--accent-gold);
}
.remain-spirit-counter.is-full {
    color: var(--accent-crimson, #c0392b);
}
.remain-spirit-mini-btn {
    flex: none;
    min-height: 34px;
    padding: 0 var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-caption);
    cursor: pointer;
}
.remain-spirit-mini-btn--gold {
    border-color: var(--accent-gold);
    background: var(--accent-gold);
    color: var(--text-on-gold, var(--bg-primary));
    font-weight: 700;
}

/* ===== 渡口渔市：鱼获/兑鱼功能卡 + 兑鱼弹窗 ===== */

/* 功能卡右上「预计可得 / 背包可兑」：与 shop-item__price 同语汇，多一层 micro 说明行 */
.fish-earn {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    text-align: right;
    white-space: nowrap;
}

.fish-earn__k {
    font-size: var(--font-micro);
    color: var(--text-muted);
    line-height: 1.3;
}

.fish-card .shop-item__row1 {
    align-items: flex-end;
}

/* 一键卖出金钮：渔市行为色（与 shop-item__btn 玉色钮同尺寸语汇） */
.fish-btn-gold {
    flex: none;
    height: 28px;
    padding: 0 var(--space-12);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--accent-gold);
    color: var(--text-on-gold, var(--bg-primary));
    font-family: inherit;
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: filter 0.12s ease;
}

.fish-btn-gold:hover {
    filter: brightness(1.06);
}

.fish-foot-btns {
    display: inline-flex;
    gap: var(--space-6);
    flex: none;
}

/* 兑鱼弹窗：gc-mid 默认居中（确认弹窗惯例），兑鱼内容一律左对齐 */
.fish-dialog .gc-mid,
.fish-dialog-mid {
    text-align: left;
}

.fish-tip {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 var(--space-8);
    text-align: left;
}

.fish-tip b {
    color: var(--text-secondary);
}

/* 模式 / 品阶胶囊行：复用 inv-filter-tab，仅收窄外距 */
.fish-grades {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: 0;
    margin: 0 0 var(--space-8);
}

/* 投入分组行 */
.fish-src-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    overflow: hidden;
    text-align: left;
    margin-bottom: var(--space-8);
}

.fish-src {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    cursor: pointer;
}

.fish-src + .fish-src {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}

.fish-src:hover {
    background: color-mix(in srgb, var(--accent-gold) 3%, transparent);
}

.fish-src.sel {
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
}

.fish-src__detail {
    flex: 1;
    min-width: 0;
    font-size: var(--font-caption);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    text-align: left;
}

.fish-src__sum {
    flex: none;
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 卖出确认弹窗：明细行内单价与标签 */
.fish-sell-tick {
    flex: none;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 1;
    color: var(--text-on-gold, var(--bg-primary));
}

.fish-sell-tick.on {
    border-color: var(--accent-gold);
    background: var(--accent-gold);
}

.fish-src__unit {
    margin-left: var(--space-6);
    font-size: var(--font-micro);
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}

.fish-sell-tag-hot,
.fish-sell-tag-legend {
    display: inline-block;
    margin-left: 2px;
    padding: 0 4px;
    border-radius: var(--radius-xs);
    font-size: var(--font-micro);
    font-weight: 700;
    line-height: 1.5;
    vertical-align: 1px;
}

.fish-sell-tag-hot {
    color: var(--text-gold);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
}

.fish-sell-tag-legend {
    color: var(--accent-crimson);
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 40%, transparent);
}

.fish-sell-list {
    max-height: min(46vh, 380px);
    overflow-y: auto;
}

.fish-sell-total {
    flex: none;
    font-size: var(--font-body);
    color: var(--text-secondary);
    white-space: nowrap;
}

.fish-sell-total b {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-action);
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}

.fish-tip-warn {
    color: var(--accent-crimson);
}

.fish-tip-warn b {
    color: var(--accent-crimson);
}

/* ===== 兑鱼弹窗 · 单鱼选择清单 ===== */
.fish-pick-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    overflow-y: auto;
    /* 鱼多时内部滚动（约 6~7 行可见），汇总条与底栏恒定可见 */
    max-height: min(44vh, 340px);
    text-align: left;
    margin-bottom: var(--space-8);
}

/* #9594：手机嵌套滚动吃掉手势，滑不到下方「换成哪条？」；窄屏改由弹窗中栏统滚 */
@media (max-width: 640px) {
    .fish-pick-list {
        max-height: none;
        overflow-y: visible;
    }
}

.fish-pick {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-12);
    cursor: pointer;
}

.fish-pick + .fish-pick {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}

.fish-pick:hover {
    background: color-mix(in srgb, var(--accent-gold) 3%, transparent);
}

.fish-pick.sel {
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
}

/* 已选组之外的水域整组置灰（同池规则显式化） */
.fish-pick.is-dim {
    opacity: 0.45;
    cursor: not-allowed;
}

.fish-pick__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.fish-pick__name {
    flex: none;
    width: 88px;
    font-family: var(--font-serif, "Songti SC", serif);
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fish-pick__owned {
    flex: 1;
    min-width: 0;
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.fish-pick__owned b {
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-weight: 700;
}

.fish-pick__step {
    flex: none;
    display: inline-flex;
    align-items: center;
}

.fish-pick__step button {
    width: 32px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-micro);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.fish-pick__step button:first-child {
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

.fish-pick__step button:last-child {
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

.fish-pick__step button:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
}

.fish-pick__step .val,
.fish-pick__qty-input {
    min-width: 36px;
    max-width: 72px;
    width: 48px;
    text-align: center;
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    line-height: 22px;
    padding: 0 var(--space-2);
    box-sizing: border-box;
    background: var(--bg-card);
}

/* #9582 兑鱼用量可点选输入，避免只能步进且重绘后跳顶 */
.fish-pick__qty-input {
    border-left: 0;
    border-right: 0;
    appearance: textfield;
    -moz-appearance: textfield;
}

.fish-pick__qty-input::-webkit-outer-spin-button,
.fish-pick__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fish-pick__qty-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
    color: var(--text-primary);
}

/* 水域分组头：吸顶 + 持有合计 */
.fish-pick-group {
    padding: var(--space-4) var(--space-12);
    font-size: var(--font-micro);
    color: var(--text-muted);
    letter-spacing: 1px;
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
    position: sticky;
    top: 0;
    z-index: 1;
}

.fish-pick-group.is-dim {
    color: color-mix(in srgb, var(--text-muted) 60%, transparent);
}

/* 全选本组 / 清空 工具行 */
.fish-tools {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-12);
    margin-bottom: var(--space-4);
}

.fish-tools button {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-caption);
    cursor: pointer;
    padding: 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--border-color) 90%, transparent);
}

.fish-tools button:hover {
    color: var(--text-gold);
}

.fish-tip-sub {
    margin-left: var(--space-6);
    font-weight: 400;
}

.fish-sell-summary {
    border: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-10);
}

/* 兑换结果弹窗：产出行 */
.fish-result-row {
    padding: var(--space-8) var(--space-12);
}

.fish-result-name {
    font-family: var(--font-serif, "Songti SC", serif);
    font-size: var(--font-body-lg);
    font-weight: 700;
    line-height: 1.3;
}

.fish-result-grade {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-left: 2px;
}

/* 产出池：同水域鱼种小卡（「收」角标 = 图鉴已收录） */
.fish-pool {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
}

.fish-pool__card {
    position: relative;
    text-align: left;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 2px;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.fish-pool__card:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 35%, transparent);
}

.fish-pool__card.sel {
    border-color: color-mix(in srgb, var(--accent-gold) 60%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
}

.fish-pool__name {
    font-size: var(--font-body);
    font-weight: 600;
    font-family: var(--font-serif, "Songti SC", serif);
    line-height: 1.3;
    padding-right: var(--space-10);
}

.fish-pool__price {
    font-size: var(--font-micro);
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, Menlo, monospace);
    font-variant-numeric: tabular-nums;
}

.fish-pool__jd {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 9px;
    line-height: 1;
    color: var(--text-jade);
    font-family: var(--font-serif, "Songti SC", serif);
}

@media (max-width: 480px) {
    .fish-pool {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}