/* ===== 商店（遗留基线；workbench 视觉见 game-systems .shop-workbench） =====
   已删：.shop-tab-bar / .shop-tab / .shop-search-row / .shop-search-btn /
   .shop-result-section / .shop-price / .btn-shop / 折叠分区装饰 —— 均无引用 */
.shop-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    flex: 1;
    overflow-y: auto;
}

/* 灵界黑市等：货源波动说明（workbench 内有覆写） */
.shop-section-hint {
    margin: 0 0 var(--space-8);
    padding: var(--space-6) var(--space-10);
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
    text-wrap: wrap;
}

/* 搜索输入：shop-workbench 搜索条复用 class */
.shop-search-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 var(--space-10);
    border: 1px solid color-mix(in srgb, var(--craft-gold) 22%, transparent);
    border-radius: var(--radius-sm);
    background: var(--shadow-black-3);
    color: var(--text-primary);
    font-size: var(--font-label);
}

.shop-search-input:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: var(--shadow-black-2);
}

/* ===== 玄筹阁入口 ===== */
.stone-panel-actions {
    margin-top: var(--space-8);
}

/* ===== 玄筹阁主题适配层(深浅色统一 token) =====
   玄筹阁大量使用金色半透明与白色半透明底,这里集中定义,深浅色各一套,
   让所有 .xuanchou-* / .deal-* 组件跟随主题,无需逐个改 rgba。 */
:root, html.theme-dark {
    --xc-gold-tint: color-mix(in srgb, var(--craft-gold) 12%, transparent);       /* 金色淡底(卡片高亮) */
    --xc-gold-tint-strong: color-mix(in srgb, var(--craft-gold) 18%, transparent); /* 金色强底(active/选中) */
    --xc-gold-border: color-mix(in srgb, var(--craft-gold) 32%, transparent);     /* 金色边框 */
    --xc-gold-border-strong: color-mix(in srgb, var(--craft-gold) 55%, transparent);
    --xc-surface-tint: var(--glass-white-3);  /* 白色半透明底(卡片悬浮感) */
    --xc-surface-tint-hover: var(--glass-white-2);
}
html.theme-light {
    --xc-gold-tint: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    --xc-gold-tint-strong: color-mix(in srgb, var(--accent-gold) 14%, transparent);
    --xc-gold-border: color-mix(in srgb, var(--accent-gold) 28%, transparent);
    --xc-gold-border-strong: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    --xc-surface-tint: var(--shadow-black-3);        /* 浅色下用黑色半透明,避免发灰 */
    --xc-surface-tint-hover: var(--shadow-black-3);
}

/* 玄匣定音专用色 token(金/紫/翠/绛半透明,深浅色各一套) */
:root, html.theme-dark {
    --deal-gold: rgba(217, 119, 6, 0.22);
    --deal-gold-soft: rgba(217, 119, 6, 0.10);
    --deal-gold-border: rgba(217, 119, 6, 0.4);
    --deal-gold-glow: rgba(217, 119, 6, 0.45);
    --deal-bright: rgba(251, 191, 36, 0.18);
    --deal-purple: rgba(124, 58, 237, 0.22);
    --deal-purple-border: var(--beihuang-purple);
    --deal-jade: rgba(22, 163, 74, 0.16);
    --deal-jade-border: rgba(22, 163, 74, 0.4);
    --deal-crimson: rgba(220, 38, 38, 0.14);
    --deal-crimson-border: rgba(220, 38, 38, 0.4);
}
html.theme-light {
    --deal-gold: color-mix(in srgb, var(--accent-gold) 16%, transparent);
    --deal-gold-soft: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    --deal-gold-border: color-mix(in srgb, var(--accent-gold) 38%, transparent);
    --deal-gold-glow: color-mix(in srgb, var(--accent-gold) 35%, transparent);
    --deal-bright: color-mix(in srgb, var(--accent-gold) 22%, transparent);
    --deal-purple: rgba(120, 103, 131, 0.16);
    --deal-purple-border: var(--accent-purple);
    --deal-jade: color-mix(in srgb, var(--accent-jade) 14%, transparent);
    --deal-jade-border: color-mix(in srgb, var(--accent-jade) 36%, transparent);
    --deal-crimson: rgba(183, 58, 49, 0.12);
    --deal-crimson-border: rgba(183, 58, 49, 0.36);
}

/* 玄筹阁 · gc-dialog 壳
   外壳宽高已交还 game-dialog.css 登记档(wide/xwide/手机392);此处仅保留布局语义 */
body.game-page [data-xuanchou-dialog] .modal-content.modal--decorated.gc-dialog.xc-dialog,
body.game-page [data-xuanchou-dialog] .modal-content.gc-dialog.xc-dialog,
body.game-page .xuanchou-modal-overlay .modal-content.modal--decorated.gc-dialog.xc-dialog,
body.game-page .xuanchou-modal-overlay .modal-content.gc-dialog.xc-dialog,
[data-xuanchou-dialog] .modal-content.xc-dialog,
.xuanchou-modal-overlay .modal-content.xc-dialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    box-sizing: border-box;
}



.xc-head {
    position: relative;
    flex-shrink: 0;
    padding: var(--space-14) var(--space-48) var(--space-10) var(--space-16);
}
.xc-head .gc-rule { margin-bottom: var(--space-10); }
.xc-head .modal-header-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
}
/* 取消通用 .gc-mid 的 55vh/420px 顶高，改由 flex 链 + mid 自滚 */
body.game-page [data-xuanchou-dialog] .gc-mid.xc-mid.xuanchou-body,
body.game-page .xuanchou-modal-overlay .gc-mid.xc-mid.xuanchou-body,
.gc-dialog.xc-dialog .gc-mid.xc-mid.xuanchou-body,
.xc-mid.xuanchou-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-14) var(--space-14) !important;
    text-align: left;
    scrollbar-width: none;
    background: transparent !important;
}
.xc-mid.xuanchou-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.xc-foot,
.gc-dialog.xc-dialog .gc-foot.xc-foot {
    flex-shrink: 0;
    display: flex;
    gap: var(--space-8);
    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);
}
.xc-foot .modal-btn {
    flex: 1;
    min-height: 44px;
}
@media (min-width: 640px) {
    .xc-mid.xuanchou-body { padding: var(--space-6) var(--space-20) var(--space-16) !important; }
    .xc-head { padding: var(--space-16) var(--space-48) var(--space-12) var(--space-20); }
    .xc-foot,
    .gc-dialog.xc-dialog .gc-foot.xc-foot { padding: var(--space-12) var(--space-20) var(--space-14); }
}

/* 壳内 info-card 去掉多余外框压迫 */
[data-xuanchou-dialog] .modal-info-card,
.xuanchou-modal-overlay .modal-info-card {
    margin-left: 0;
    margin-right: 0;
}

.btn-xuanchou-entry {
    width: 100%;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--xc-gold-border);
    border-radius: var(--radius-md);
    background: var(--xc-gold-tint);
    color: var(--text-gold);
    font-family: inherit;
    font-size: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.btn-xuanchou-entry:hover {
    border-color: var(--xc-gold-border-strong);
    background: var(--xc-gold-tint-strong);
    color: var(--text-primary);
}

.xuanchou-detail-hint {
    text-align: center;
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-bottom: var(--space-10);
}

.xuanchou-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}
@media (min-width: 640px) {
    .xuanchou-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-10);
    }
}

.xuanchou-main-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}

.xuanchou-main-tab {
    min-height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.xuanchou-main-tab--active {
    border-color: var(--xc-gold-border-strong);
    background: var(--xc-gold-tint-strong);
    color: var(--text-gold);
}

/* 四部筛选 */
.xuanchou-dept-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.xuanchou-dept-tab {
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.xuanchou-dept-tab b {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
}
.xuanchou-dept-tab span {
    font-size: var(--font-micro);
    color: var(--text-muted);
}
.xuanchou-dept-tab--active {
    border-color: var(--xc-gold-border);
    background: var(--xc-gold-tint);
}
.xuanchou-dept-tab--active b { color: var(--text-gold); }

.xuanchou-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
}
.xuanchou-section-head h3 {
    margin: 0;
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.xuanchou-section-head span {
    font-size: var(--font-caption);
    color: var(--text-muted);
}

/* 排行榜子标签（4 列：总盈利/单局盈利/总亏损/单局亏损） */
.xuanchou-board-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.xuanchou-board-tab {
    min-height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-caption);
    font-weight: 600;
    cursor: pointer;
}

.xuanchou-board-tab--active {
    border-color: var(--xc-gold-border-strong);
    background: var(--xc-gold-tint-strong);
    color: var(--text-gold);
}

.xuanchou-game-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}
@media (min-width: 420px) {
    .xuanchou-game-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-10);
    }
}
@media (min-width: 900px) {
    .xuanchou-game-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.xuanchou-game-card {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-6);
    padding: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    color: var(--text-secondary);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.xuanchou-game-card:hover,
.xuanchou-game-card:focus-visible {
    border-color: var(--xc-gold-border);
    background: var(--xc-gold-tint);
    outline: none;
}

.xuanchou-game-card__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
}

.xuanchou-game-card__name,
.xuanchou-game-card__desc,
.xuanchou-game-card__meta {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xuanchou-game-card__name {
    color: var(--text-primary);
    font-size: var(--font-body-lg);
    font-weight: 700;
    line-height: 1.35;
}

.xuanchou-game-card__chip {
    flex-shrink: 0;
    font-size: var(--font-micro);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-card);
    white-space: nowrap;
}
.xuanchou-game-card__chip--hot {
    border-color: var(--xc-gold-border);
    color: var(--text-gold);
}

.xuanchou-game-card__desc {
    flex: 1;
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.5;
}

.xuanchou-game-card__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    align-items: center;
    font-size: var(--font-caption);
    margin-top: var(--space-2);
}

.xuanchou-game-card__meta b {
    color: var(--text-gold);
    font-weight: 600;
    /* 天雷/心魔等多档返还并排时允许换行，避免挤成一行溢出 */
    white-space: normal;
    line-height: 1.35;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
}

.xuanchou-game-card__meta em {
    color: var(--text-muted);
    font-style: normal;
    flex: none;
}

.xuanchou-play-card,
.xuanchou-refill-card,
.xuanchou-panel-card {
    margin-bottom: var(--space-12);
    padding: var(--space-14) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    min-width: 0;
    box-sizing: border-box;
}
.xuanchou-play-card__title {
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}
.xuanchou-play-card__desc {
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: var(--space-10);
}
.xuanchou-stake-label {
    display: block;
    font-size: var(--font-label);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

/* 续筹：标题行 + 四格统计 + 全宽按钮，避免塞进 room-note 挤乱 */
.xuanchou-refill-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-10);
    min-width: 0;
}
.xuanchou-refill-card__title {
    margin: 0;
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.xuanchou-refill-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-xs);
    border: 1px solid var(--xc-gold-border);
    background: var(--xc-gold-tint);
    color: var(--text-gold);
    font-size: var(--font-caption);
    font-weight: 600;
    white-space: nowrap;
}
.xuanchou-refill-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-10);
}
@media (min-width: 640px) {
    .xuanchou-refill-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.xuanchou-refill-stat {
    min-width: 0;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.xuanchou-refill-stat span {
    display: block;
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}
.xuanchou-refill-stat b {
    display: block;
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.xuanchou-refill-extra {
    margin: 0 0 var(--space-10);
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.45;
}
.xuanchou-refill-extra b {
    color: var(--text-jade, var(--accent-jade));
    font-weight: 700;
}
.xuanchou-refill-card .xuanchou-refill-btn,
.xuanchou-refill-card .modal-btn {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    margin-top: 0;
}

.xuanchou-summary-cell {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-10) var(--space-12);
    background: var(--bg-panel);
}

.xuanchou-summary-label {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.xuanchou-summary-value {
    font-size: var(--font-body-lg);
    color: var(--text-primary);
    font-weight: 700;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}
.xuanchou-summary-value.gold { color: var(--text-gold); }
.xuanchou-summary-value.jade { color: var(--text-jade, var(--accent-jade)); }

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

.xuanchou-rule-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: flex-start;
    font-size: var(--font-label);
    line-height: 1.55;
    color: var(--text-secondary);
}

.xuanchou-rule-index {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--xc-gold-tint-strong);
    color: var(--text-gold);
    font-size: var(--font-micro);
    font-weight: 700;
}

.xuanchou-section-title {
    margin: var(--space-10) 0 var(--space-6);
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.xuanchou-back-btn {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: 0 0 var(--space-10);
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--font-label);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.xuanchou-back-btn:hover {
    color: var(--text-gold);
}

.xuanchou-rule-toggle {
    width: 100%;
    min-height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-body);
    font-weight: 700;
    cursor: pointer;
}

.xuanchou-rule-toggle b {
    color: var(--text-gold);
    font-size: var(--font-label);
}

.xuanchou-rule-collapsed {
    margin-top: var(--space-6);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.5;
}

.xuanchou-rule-block + .xuanchou-rule-block {
    margin-top: var(--space-6);
}

.xuanchou-profit-board {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    padding: var(--space-12);
    margin-bottom: var(--space-12);
    min-width: 0;
}

.xuanchou-profit-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}
@media (min-width: 640px) {
    .xuanchou-profit-summary {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-10);
    }
}

.xuanchou-profit-summary > div {
    min-width: 0;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.xuanchou-profit-summary span,
.xuanchou-profit-name small,
.xuanchou-profit-note {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.xuanchou-profit-summary b {
    display: block;
    margin-top: var(--space-4);
    color: var(--text-primary);
    font-size: var(--font-body);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* 盈亏色：只加在正/负 class 上，勿全局染 .xuanchou-profit-net */
.xuanchou-profit-positive {
    color: var(--text-jade, var(--accent-jade)) !important;
}
.xuanchou-profit-negative {
    color: var(--text-danger) !important;
}

.xuanchou-profit-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    min-width: 0;
}

/* 榜单行：上名下数，避免四列挤爆电脑宽壳 */
.xuanchou-profit-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-4) var(--space-10);
    align-items: center;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    font-size: var(--font-label);
    min-width: 0;
}

.xuanchou-profit-row--self {
    background: var(--xc-gold-tint-strong);
    border-color: var(--xc-gold-border);
    outline: none;
}

.xuanchou-profit-rank {
    grid-row: 1 / span 2;
    color: var(--text-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    align-self: center;
}

.xuanchou-profit-name {
    min-width: 0;
    color: var(--text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xuanchou-profit-name small {
    display: inline;
    margin-left: var(--space-6);
    font-weight: 400;
    color: var(--text-muted);
    font-size: var(--font-caption);
}
.xuanchou-profit-name .ranking-name-link {
    color: inherit;
    text-decoration: none;
}
.xuanchou-profit-name .ranking-name-link:hover {
    color: var(--text-gold);
    text-decoration: underline;
}

.xuanchou-profit-metrics {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-6) var(--space-12);
    min-width: 0;
    grid-column: 2;
}

.xuanchou-profit-net {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
}

.xuanchou-profit-meta {
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.xuanchou-profit-empty {
    padding: var(--space-14) var(--space-8);
    color: var(--text-muted);
    font-size: var(--font-label);
    text-align: center;
}

.xuanchou-profit-note {
    margin-top: var(--space-10);
    line-height: 1.5;
    font-size: var(--font-caption);
}

/* 桌面：榜行改为「名 | 主值 | 副值」三列更疏朗 */
@media (min-width: 640px) {
    .xuanchou-profit-row {
        grid-template-columns: 48px minmax(0, 1fr) auto auto;
        gap: var(--space-10) var(--space-14);
        align-items: center;
    }
    .xuanchou-profit-rank {
        grid-row: auto;
    }
    .xuanchou-profit-metrics {
        display: contents;
    }
    .xuanchou-profit-net {
        text-align: right;
        font-size: var(--font-body-lg);
        min-width: 7em;
    }
    .xuanchou-profit-meta {
        text-align: right;
        min-width: 9em;
    }
}

.xuanchou-finance-insights,
.xuanchou-finance-market {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.xuanchou-finance-insight,
.xuanchou-finance-market > div,
.xuanchou-finance-metrics > div {
    min-width: 0;
    padding: var(--space-8) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--xc-surface-tint);
}

.xuanchou-finance-insight span,
.xuanchou-finance-market span,
.xuanchou-finance-metrics span,
.xuanchou-finance-usage span,
.xuanchou-finance-usage small {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.xuanchou-finance-insight b,
.xuanchou-finance-market b,
.xuanchou-finance-metrics b,
.xuanchou-finance-usage b {
    display: block;
    margin-top: var(--space-2);
    color: var(--text-primary);
    font-size: var(--font-label);
    overflow-wrap: anywhere;
}

.xuanchou-finance-window-list,
.xuanchou-finance-usage-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.xuanchou-finance-window {
    padding: var(--space-8);
    border: 1px solid var(--xc-gold-tint-strong);
    border-radius: var(--radius-sm);
    background: var(--xc-gold-tint);
}

.xuanchou-finance-window__head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    color: var(--text-primary);
    font-size: var(--font-label);
}

.xuanchou-finance-window__head span {
    color: var(--text-muted);
    white-space: nowrap;
}

.xuanchou-finance-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.xuanchou-finance-usage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-6) var(--space-10);
    align-items: center;
    padding: var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--xc-surface-tint);
}

.xuanchou-finance-usage small {
    grid-column: 1 / -1;
}

/* 各玩法收支 */
.xuanchou-finance-game-periods {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.xuanchou-finance-game-period {
    padding: var(--space-8);
    border: 1px solid var(--xc-gold-tint-strong, var(--border-color));
    border-radius: var(--radius-sm);
    background: var(--xc-gold-tint, color-mix(in srgb, var(--accent-gold) 6%, transparent));
}

.xuanchou-finance-game-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.xuanchou-finance-game {
    padding: var(--space-8);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--xc-surface-tint, color-mix(in srgb, var(--bg-card) 88%, transparent));
}

.xuanchou-finance-game__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
    font-size: var(--font-label);
}

.xuanchou-finance-game__head b {
    color: var(--text-primary);
    font-weight: 700;
}

.xuanchou-finance-game__head span {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.xuanchou-finance-game__metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.xuanchou-finance-game__metrics > div {
    min-width: 0;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
}

.xuanchou-finance-game__metrics span {
    display: block;
    font-size: var(--font-micro);
    color: var(--text-muted);
}

.xuanchou-finance-game__metrics b {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--font-caption);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

@media (max-width: 420px) {
    .xuanchou-finance-game__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.xuanchou-outcome-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.xuanchou-outcome {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-sm);
    background: var(--xc-surface-tint);
    font-size: var(--font-label);
    color: var(--text-secondary);
}

.xuanchou-outcome-name {
    min-width: 0;
}

.xuanchou-outcome-name b,
.xuanchou-outcome-name small {
    display: block;
    overflow-wrap: anywhere;
}

.xuanchou-outcome-name b {
    color: var(--text-primary);
}

.xuanchou-outcome-name small {
    margin-top: var(--space-2);
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.xuanchou-outcome-name .xuanchou-outcome-probability {
    color: var(--accent-jade);
}

.xuanchou-outcome-payout {
    color: var(--text-gold);
    white-space: nowrap;
}

.xuanchou-choice-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
}

.xuanchou-choice-btn {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-body);
    cursor: pointer;
}

.xuanchou-choice-btn > span {
    line-height: 1.2;
}

.xuanchou-choice-payout {
    font-size: var(--font-caption);
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-gold);
    line-height: 1.2;
}

.xuanchou-choice-btn--active {
    border-color: var(--xc-gold-border-strong);
    background: var(--xc-gold-tint-strong);
    color: var(--text-gold);
    font-weight: 700;
}

.xuanchou-choice-btn--active .xuanchou-choice-payout {
    color: var(--text-gold);
}

.xuanchou-dice-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-8);
    margin: var(--space-6) 0 var(--space-8);
}

.xuanchou-dice {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-10);
    border-radius: var(--radius-sm);
    border: 1px solid var(--xc-gold-border);
    background: var(--xc-gold-tint);
    color: var(--text-gold);
    font-size: var(--font-action);
    font-weight: 700;
}

.xuanchou-match-opponent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-6);
    margin: 0 0 var(--space-8);
    font-size: var(--font-label);
    color: var(--text-muted);
}

.xuanchou-match-opponent span {
    color: var(--text-secondary);
}

.xuanchou-room-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.xuanchou-room-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-8);
    align-items: center;
    padding: var(--space-10) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--xc-surface-tint);
}

.xuanchou-room-main {
    min-width: 0;
}

.xuanchou-room-main b,
.xuanchou-room-main span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xuanchou-room-main b {
    color: var(--text-primary);
    font-size: var(--font-body);
}

.xuanchou-room-main span {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.xuanchou-room-main .xuanchou-room-lot {
    color: var(--text-secondary);
}

.xuanchou-room-join {
    min-height: 30px;
    padding: 0 var(--space-10);
    border: 1px solid var(--xc-gold-border);
    border-radius: var(--radius-sm);
    background: var(--xc-gold-tint-strong);
    color: var(--text-gold);
    font-family: inherit;
    font-size: var(--font-label);
    font-weight: 700;
    cursor: pointer;
}

.xuanchou-my-room {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}

.xuanchou-my-room > div {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-8);
    background: var(--xc-surface-tint);
}

.xuanchou-my-room span,
.xuanchou-my-room b {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xuanchou-my-room span {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.xuanchou-my-room b {
    margin-top: var(--space-4);
    color: var(--text-primary);
    font-size: var(--font-body);
}

.xuanchou-room-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.xuanchou-room-note {
    margin-top: var(--space-8);
    padding: var(--space-8) var(--space-8);
    border: 1px solid var(--xc-gold-border);
    border-radius: var(--radius-sm);
    background: var(--xc-gold-tint);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* 续筹徽记样式见上方 .xuanchou-refill-badge（扁平金边，勿再叠渐变） */

.xuanchou-auction-lot,
.xuanchou-auction-reward {
    margin-bottom: var(--space-10);
    padding: var(--space-10) var(--space-10);
    border: 1px solid var(--xc-gold-border);
    border-radius: var(--radius-sm);
    background: var(--xc-gold-tint);
}

.xuanchou-auction-lot b,
.xuanchou-auction-lot span,
.xuanchou-auction-lot em,
.xuanchou-auction-reward b,
.xuanchou-auction-reward span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xuanchou-auction-lot b,
.xuanchou-auction-reward b {
    color: var(--text-gold);
    font-size: var(--font-body);
}

.xuanchou-auction-lot span,
.xuanchou-auction-reward span {
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 1.45;
}

.xuanchou-auction-lot em {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-style: normal;
}

.xuanchou-auction-participants {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: var(--space-10) 0;
}

.xuanchou-auction-participants span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    max-width: 100%;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--xc-surface-tint-hover);
    color: var(--text-primary);
    font-size: var(--font-label);
    overflow-wrap: anywhere;
}

.xuanchou-auction-participants small {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.xuanchou-auction-reports {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-8) 0;
}

.xuanchou-auction-reports div {
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-sm);
    border: 1px dashed var(--xc-gold-border);
    background: var(--xc-gold-tint);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.45;
}

.xuanchou-auction-bluff {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-8);
    color: var(--text-muted);
    font-size: var(--font-label);
}

.xuanchou-auction-bluff input {
    width: 14px;
    height: 14px;
    accent-color: var(--text-gold);
}

.xuanchou-auction-guide {
    margin-top: var(--space-10);
    border: 1px solid var(--xc-gold-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--xc-gold-tint) 58%, transparent);
    overflow: hidden;
}

.xuanchou-auction-guide__head,
.xuanchou-auction-guide__source,
.xuanchou-auction-guide__note {
    padding: var(--space-8) var(--space-10);
    font-size: var(--font-label);
    line-height: 1.45;
}

.xuanchou-auction-guide__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    color: var(--text-gold);
}

.xuanchou-auction-guide__head span,
.xuanchou-auction-guide__source,
.xuanchou-auction-guide__note {
    color: var(--text-muted);
}

.xuanchou-auction-guide__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-label);
}

.xuanchou-auction-guide__table th,
.xuanchou-auction-guide__table td {
    padding: var(--space-8) var(--space-10);
    border-top: 1px solid color-mix(in srgb, var(--xc-gold-border) 70%, transparent);
    text-align: left;
    vertical-align: top;
}

.xuanchou-auction-guide__table th:last-child,
.xuanchou-auction-guide__table td:last-child {
    width: 76px;
    text-align: right;
    color: var(--text-gold);
    white-space: nowrap;
}

.xuanchou-auction-guide__table small {
    display: block;
    margin-top: var(--space-2);
    color: var(--text-muted);
    line-height: 1.4;
}

.xuanchou-result-net {
    text-align: center;
    font-size: var(--font-body);
    font-weight: 600;
}

.xuanchou-stake-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.xuanchou-stake-presets .modal-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    height: 32px;
    padding: 0 var(--space-8);
    font-size: var(--font-label);
}

/* 押注记忆 + 加减筹码（#4634） */
.xuanchou-stake-field {
    margin-bottom: var(--space-8);
}
.xuanchou-stake-row {
    display: flex;
    align-items: stretch;
    gap: var(--space-6);
}
.xuanchou-stake-row .xuanchou-stake-adj {
    flex: 0 0 40px;
    min-width: 40px;
    height: 44px;
    padding: 0;
    font-size: var(--font-heading);
    font-weight: 700;
    line-height: 1;
}
.xuanchou-stake-row .xuanchou-stake-input,
.xuanchou-stake-row .deal-stake-input,
.xuanchou-stake-row .xuanchou-input,
.xuanchou-stake-row .absorb-custom-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
    min-height: 44px;
}
.xuanchou-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-6);
}
.xuanchou-chip-row .xuanchou-chip-btn {
    flex: 1 1 calc(25% - 6px);
    min-width: 56px;
    height: 30px;
    padding: 0 var(--space-6);
    font-size: var(--font-caption);
}

@media (max-width: 520px) {
    .xuanchou-outcome-list,
.xuanchou-finance-insights,
.xuanchou-finance-market {
        grid-template-columns: minmax(0, 1fr);
    }

    .xuanchou-finance-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .xuanchou-finance-usage {
        grid-template-columns: minmax(0, 1fr);
    }

    .xuanchou-room-row,
    .xuanchou-my-room,
    .xuanchou-room-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 榜行保持 排名 | 名+数 两列，勿再压成残缺三列 */
    .xuanchou-dept-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-4);
    }
    .xuanchou-dept-tab {
        min-height: 44px;
        padding: var(--space-4) var(--space-2);
    }
    .xuanchou-dept-tab b { font-size: var(--font-label); }
    .xuanchou-dept-tab span { font-size: var(--font-micro); }
}

/* ===== 造化秘匣 ===== */
.mystery-box-section {
    border-top: 1px solid var(--border-color);
    padding: var(--space-10) 0 0 0;
    margin-top: var(--space-10);
}

.mystery-box-divider {
    text-align: center;
    margin-bottom: var(--space-8);
    position: relative;
}

.mystery-box-divider::before,
.mystery-box-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 25%;
    height: 1px;
}

.mystery-box-divider::before { left: 0; background: linear-gradient(90deg, transparent, var(--border-color)); }
.mystery-box-divider::after { right: 0; background: linear-gradient(270deg, transparent, var(--border-color)); }

.mystery-box-divider span {
    color: var(--text-gold);
    font-size: var(--font-body);
    font-weight: bold;
    padding: 0 var(--space-10);
}

.mystery-box-info { text-align: center; }

.mystery-box-tier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-4);
    margin-bottom: var(--space-4);
}

.mystery-box-name {
    font-size: var(--font-body-lg);
    font-weight: bold;
    color: var(--text-gold);
}

.mystery-box-price {
    font-size: var(--font-label);
    color: var(--text-gold);
    opacity: 0.85;
}

.mystery-box-desc {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.mystery-box-count {
    font-size: var(--font-label);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.mystery-box-count b { color: var(--text-gold); }

.mystery-box-weights { margin-bottom: var(--space-8); }

.mystery-box-weight-row {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    font-size: var(--font-caption);
    flex-wrap: wrap;
}

.mystery-box-result {
    margin-bottom: var(--space-8);
    animation: mysteryBoxReveal 0.5s ease-out;
}

@keyframes mysteryBoxReveal {
    0% { opacity: 0; transform: scale(0.8); }
    50% { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

.mystery-box-reveal {
    background: var(--glass-white-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--space-8) var(--space-10);
    text-align: center;
}

.mystery-box-reveal-name {
    font-size: var(--font-body-lg);
    font-weight: bold;
    margin-bottom: var(--space-4);
}

.mystery-box-reveal-desc {
    font-size: var(--font-caption);
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   寿元详情 · A 天年尺（gc-dialog gold）
   ═══════════════════════════════════════════════════════════════ */
.lifespan-modal-overlay .modal-content.lf-dialog {
    width: min(90vw, 392px);
    max-width: 392px;
    max-height: min(90dvh, 740px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.lifespan-modal-overlay .modal-content.lf-dialog.modal-content--self-scroll {
    overflow: hidden;
}
.lf-dialog--low {
    border-color: color-mix(in srgb, var(--text-red, var(--text-red)) 40%, var(--border-color));
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--text-red, var(--text-red)) 10%, transparent), transparent 60%),
        var(--bg-card);
}
.lf-dialog--loss {
    border-color: color-mix(in srgb, var(--text-gold) 35%, var(--border-color));
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .lf-dialog--low,
    .lf-dialog--loss {
        border-color: var(--border-color);
        background: var(--bg-card);
    }
}

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

.lf-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-16) var(--space-10);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lf-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.lf-hero {
    text-align: center;
    padding: var(--space-4) var(--space-4) var(--space-12);
}
.lf-age {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.lf-age__cur {
    font-size: var(--font-hero);
    font-weight: 700;
    color: var(--text-gold);
}
.lf-age__sep {
    font-size: var(--font-heading);
    color: var(--text-muted);
    margin: 0 var(--space-4);
}
.lf-age__max {
    font-size: var(--font-heading);
    font-weight: 600;
    color: var(--text-muted);
}
.lf-age__unit {
    font-size: var(--font-title);
    color: var(--text-muted);
    margin-left: var(--space-4);
    font-weight: 600;
}
.lf-remain {
    margin-top: var(--space-8);
    font-size: var(--font-body);
    color: var(--text-secondary);
}
.lf-remain b {
    color: var(--text-jade, var(--accent-jade));
    font-weight: 700;
}
.lf-remain.is-low b {
    color: var(--text-red, var(--accent-crimson));
}
.lf-bar {
    margin-top: var(--space-10);
    height: 10px;
    border-radius: var(--radius-pill);
    background: rgba(172, 186, 196, 0.14);
    overflow: hidden;
}
.lf-bar__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--accent-jade, var(--text-jade));
    transition: width 0.25s ease;
}
.lf-bar__fill.is-low {
    background: var(--text-red, var(--text-red));
}
.lf-bar__fill.is-loss {
    background: linear-gradient(90deg, var(--accent-jade, var(--text-jade)), var(--text-gold, var(--accent-gold)));
}

.lf-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}
.lf-metrics--loss {
    margin-bottom: var(--space-8);
}
.lf-metric {
    text-align: center;
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.lf-metric__k {
    font-size: var(--font-caption);
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.lf-metric__v {
    margin-top: var(--space-4);
    font-size: var(--font-title);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.lf-metric__v.is-jade { color: var(--text-jade, var(--accent-jade)); }
.lf-metric__v.is-danger { color: var(--text-red, var(--accent-crimson)); }
.lf-metric__v.is-gold { color: var(--text-gold); }

.lf-ok {
    text-align: center;
    padding: var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-panel));
    color: var(--text-jade, var(--accent-jade));
    font-size: var(--font-body);
    margin-bottom: var(--space-12);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .lf-ok {
        border-color: var(--border-color);
        background: var(--bg-panel);
    }
}
.lf-note {
    margin: 0 0 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);
    font-size: var(--font-label);
    line-height: 1.65;
    color: var(--text-muted);
    text-align: left;
}
.lf-sec { margin-bottom: var(--space-4); }
.lf-sec__title {
    font-size: var(--font-label);
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-8);
}
.lf-empty {
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.6;
    padding: var(--space-4) 0 var(--space-8);
}

.lf-dialog .dialog-pill-section {
    margin-top: var(--space-4) !important;
}
.lf-dialog .gc-foot {
    flex-shrink: 0;
    padding: var(--space-10) var(--space-16) var(--space-16);
}

@media (max-width: 640px) {
    .lifespan-modal-overlay .modal-content.lf-dialog {
        width: min(96vw, 400px);
        max-height: 94dvh;
        border-radius: var(--radius-lg);
    }
    .lf-body { padding: var(--space-2) var(--space-14) var(--space-8); }
    .lf-age__cur { font-size: var(--font-hero); }
}

/* ═══════════════════════════════════════════════════════════════
   毒素侵体 · B 环尺主视觉（gc-dialog danger）
   ═══════════════════════════════════════════════════════════════ */
.toxin-modal-overlay .modal-content.tx-dialog {
    width: min(90vw, 392px);
    max-width: 392px;
    max-height: min(90dvh, 740px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.toxin-modal-overlay .modal-content.tx-dialog.modal-content--self-scroll {
    overflow: hidden;
}
.tx-dialog--crit {
    border-color: color-mix(in srgb, var(--text-red, var(--text-red)) 42%, var(--border-color));
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--text-red, var(--text-red)) 12%, transparent), transparent 60%),
        var(--bg-card);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .tx-dialog--crit {
        border-color: var(--border-color);
        background: var(--bg-card);
    }
}

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

.tx-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-16) var(--space-10);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tx-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.tx-hero {
    text-align: center;
    padding: var(--space-2) var(--space-4) var(--space-10);
}
.tx-level {
    font-size: var(--font-label);
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: var(--space-8);
}
.tx-ring-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-4);
}
.tx-ring {
    --tx-pct: 0;
    --tx-tone: var(--text-gold);
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    background: conic-gradient(var(--tx-tone) calc(var(--tx-pct) * 1%), rgba(172, 186, 196, 0.16) 0);
}
.tx-ring::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--bg-card);
}
.tx-ring__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}
.tx-ring__pct {
    font-size: var(--font-hero);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tx-ring__sub {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.tx-pen {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin: var(--space-10) 0 var(--space-12);
}
.tx-pen__cell {
    text-align: center;
    padding: var(--space-10) var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
}
.tx-pen__k {
    font-size: var(--font-caption);
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.tx-pen__v {
    margin-top: var(--space-4);
    font-size: var(--font-title);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.tx-ok {
    text-align: center;
    padding: var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 35%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 8%, var(--bg-panel));
    color: var(--text-jade, var(--accent-jade));
    font-size: var(--font-body);
    margin: var(--space-10) 0 var(--space-12);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .tx-ok {
        border-color: var(--border-color);
        background: var(--bg-panel);
    }
}

.tx-note {
    margin: 0 0 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);
    font-size: var(--font-label);
    line-height: 1.65;
    color: var(--text-muted);
    text-align: left;
}
.tx-sec { margin-bottom: var(--space-10); }
.tx-sec__title {
    font-size: var(--font-label);
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: var(--space-8);
}
.tx-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.tx-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    min-height: 42px;
    padding: var(--space-10) var(--space-14);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-body);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.tx-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.tx-btn--primary {
    border-color: color-mix(in srgb, var(--text-red, var(--text-red)) 40%, transparent);
    background: color-mix(in srgb, var(--text-red, var(--text-red)) 12%, transparent);
    color: var(--text-red, var(--accent-crimson));
    font-weight: 600;
}
.tx-btn--jade {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .tx-btn--primary {
        border-color: var(--border-color);
        background: var(--bg-panel);
    }
    .tx-btn--jade {
        border-color: var(--border-color);
        background: var(--bg-panel);
    }
}
.tx-btn--outline:hover:not(:disabled) {
    border-color: var(--border-gold, var(--border-color));
    color: var(--text-primary);
}
.tx-btn__sub {
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-weight: 400;
}

/* 解毒丹列表嵌在毒素窗内时收紧间距 */
.tx-dialog .dialog-pill-section {
    margin-top: var(--space-8) !important;
}
.tx-dialog .auto-process-entry-card {
    margin-top: var(--space-10);
}
.tx-dialog .gc-foot {
    flex-shrink: 0;
    padding: var(--space-10) var(--space-16) var(--space-16);
}

@media (max-width: 640px) {
    .toxin-modal-overlay .modal-content.tx-dialog {
        width: min(96vw, 400px);
        max-height: 94dvh;
        border-radius: var(--radius-lg);
    }
    .tx-body { padding: var(--space-2) var(--space-14) var(--space-8); }
    .tx-ring { width: 120px; height: 120px; }
}

/* ═══════════════════════════════════════════════════════════════
   气运弹窗 · B 点阵主视觉（gc-dialog gold）
   ═══════════════════════════════════════════════════════════════ */
.luck-modal-overlay .modal-content.lk-dialog {
    width: min(90vw, 392px);
    max-width: 392px;
    max-height: min(90dvh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.luck-modal-overlay .modal-content.lk-dialog.modal-content--self-scroll {
    overflow: hidden;
}
.lk-dialog--top {
    border-color: color-mix(in srgb, var(--text-gold) 45%, var(--border-color));
    background:
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--text-gold) 14%, transparent), transparent 62%),
        var(--bg-card);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .lk-dialog--top {
        border-color: var(--border-gold, var(--border-color));
        background: var(--bg-card);
    }
}

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

.lk-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-16) var(--space-8);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lk-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.lk-hero {
    text-align: center;
    padding: var(--space-6) var(--space-4) var(--space-12);
}
.lk-tier {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-page-title);
    font-weight: 700;
    letter-spacing: 0.28em;
    line-height: 1.2;
    margin-bottom: var(--space-12);
}
/* B：5×2 点阵主锚 */
.lk-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-10);
    max-width: 200px;
    margin: 0 auto var(--space-12);
}
.lk-grid .luck-dot {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 50%;
    background: var(--text-gray, rgba(172, 186, 196, 0.28));
}
.lk-grid .luck-dot.on {
    background: var(--tier-color, var(--text-gold));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier-color, var(--text-gold)) 28%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .lk-grid .luck-dot.on {
        box-shadow: none;
    }
}
.lk-num {
    font-size: var(--font-body);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.lk-num b {
    color: var(--text-primary);
    font-weight: 600;
}

/* 求签结果（原「签已落地」并入主弹窗） */
.lk-result {
    margin: 0 0 var(--space-12);
    padding: var(--space-10) var(--space-12) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    text-align: center;
}
.lk-result[hidden] {
    display: none !important;
}
.lk-result__verse {
    font-size: var(--font-body);
    color: var(--text-primary);
    line-height: 1.85;
    font-style: italic;
    text-wrap: wrap;
}
.lk-result__note {
    margin-top: var(--space-6);
    font-size: var(--font-caption);
    letter-spacing: 0.06em;
    line-height: 1.5;
}

.lk-effects {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    margin: 0 0 var(--space-12);
}
.lk-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 var(--space-10);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    font-size: var(--font-caption);
    color: var(--text-secondary);
    white-space: nowrap;
}
.lk-chip b {
    color: var(--text-gold);
    font-weight: 600;
    margin-left: var(--space-4);
}

.lk-note {
    margin: 0 0 var(--space-14);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    font-size: var(--font-label);
    line-height: 1.65;
    color: var(--text-muted);
    text-align: left;
}
.lk-note strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.lk-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}
.lk-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    width: 100%;
    min-height: 44px;
    padding: var(--space-10) var(--space-14);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-body-lg);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.lk-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}
.lk-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;
    letter-spacing: 0.06em;
}
.lk-btn--gold:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-gold) 20%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .lk-btn--gold:hover:not(:disabled) {
        background: var(--gradient-gold, rgba(183, 120, 31, 0.18));
    }
}
.lk-btn--outline:hover:not(:disabled) {
    border-color: var(--border-gold, var(--border-color));
    color: var(--text-primary);
}
.lk-btn__sub {
    font-size: var(--font-caption);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-muted);
}
/* 逆天改命内联面板（不另开弹窗） */
.lk-refresh-label {
    font-size: var(--font-label);
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}
.lk-refresh-warn {
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid rgba(183, 58, 49, 0.32);
    background: rgba(183, 58, 49, 0.08);
    color: var(--text-danger, var(--accent-crimson, var(--accent-crimson)));
    font-size: var(--font-label);
    line-height: 1.55;
    text-align: center;
    margin-bottom: var(--space-4);
}
.lk-refresh-status {
    font-size: var(--font-label);
    color: var(--text-gold);
    text-align: center;
    letter-spacing: 0.08em;
    padding: var(--space-4) 0 var(--space-6);
}
.lk-auto-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-height: 44px;
}
.lk-auto-row__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-label);
    color: var(--text-secondary);
}
.lk-auto-stepper {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: none;
}
.lk-auto-step,
.lk-auto-max {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-action);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.lk-auto-step:hover:not(:disabled),
.lk-auto-max:hover:not(:disabled) {
    border-color: var(--border-gold, var(--border-color));
}
.lk-auto-input {
    width: 56px;
    min-height: 44px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding: var(--space-8) var(--space-4);
    -moz-appearance: textfield;
    appearance: textfield;
}
.lk-auto-input::-webkit-outer-spin-button,
.lk-auto-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lk-auto-preview {
    font-size: var(--font-label);
    line-height: 1.55;
    color: var(--text-muted);
    text-align: left;
    padding: var(--space-4) 0 var(--space-8);
}
.lk-auto-preview.is-warn {
    color: var(--text-danger, var(--accent-crimson));
}
.lk-auto-preview b {
    color: var(--text-gold);
    font-weight: 600;
}
.lk-dialog .gc-foot {
    flex-shrink: 0;
    padding: var(--space-10) var(--space-16) var(--space-16);
}

@media (max-width: 640px) {
    .luck-modal-overlay .modal-content.lk-dialog {
        width: min(96vw, 400px);
        max-height: 94dvh;
        border-radius: var(--radius-lg);
    }
    .lk-body { padding: var(--space-2) var(--space-14) var(--space-8); }
    .lk-grid { max-width: 180px; gap: var(--space-8); }
}

/* ===== 今日求签 · 签品揭示 (复用 mysteryBoxReveal 的 scale 动效) ===== */
.fortune-reveal {
    text-align: center;
    padding: var(--space-6) 0 var(--space-2);
    animation: mysteryBoxReveal 0.5s ease-out;
}
.fortune-reveal__tier {
    font-size: var(--font-hero);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.fortune-reveal__luck {
    font-size: var(--font-label);
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-top: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}
/* 气运点阵: 10 圆点, 亮=签品金色, 灭=text-gray */
.luck-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-gray);
    margin: 0 var(--space-2);
    vertical-align: middle;
}
.luck-dot.on {
    background: var(--text-gold);
}
.fortune-reveal__luck-num {
    margin-left: var(--space-4);
}
.fortune-reveal__verse {
    font-size: var(--font-body);
    color: var(--text-primary);
    line-height: 1.9;
    margin: var(--space-12) var(--space-12) var(--space-4);
    font-style: italic;
}
.fortune-reveal__note {
    font-size: var(--font-caption);
    letter-spacing: 0.1em;
    margin-top: var(--space-4);
}
/* 上上签: 金辉满版弹窗 */
.fortune-reveal-modal--top .modal-content {
    position: relative;
    background: radial-gradient(ellipse at center top, color-mix(in srgb, var(--craft-gold-bright) 18%, transparent), transparent 70%), var(--bg-secondary);
    border-color: color-mix(in srgb, var(--craft-gold-bright) 50%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--craft-gold-bright) 20%, transparent);
}

.mystery-box-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-label);
    padding: var(--space-10) 0;
}

.btn-mystery-box {
    width: 100%;
    padding: var(--space-8);
    font-size: var(--font-body);
    font-weight: bold;
    background: linear-gradient(135deg, color-mix(in srgb, var(--craft-gold-bright) 20%, transparent), color-mix(in srgb, var(--craft-gold-bright) 5%, transparent));
    border: 1px solid color-mix(in srgb, var(--craft-gold-bright) 30%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-gold);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-mystery-box:hover:not(:disabled) {
    background: linear-gradient(135deg, color-mix(in srgb, var(--craft-gold-bright) 30%, transparent), color-mix(in srgb, var(--craft-gold-bright) 10%, transparent));
}

.btn-mystery-box:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== 门户三署 · A 衙署笺（神庭 / 灵渊 / 仙界） =====
   头部已迁 gc-panel-head；保留署色差异（灵渊青 / 仙界碧）与原 8px 下沿间距
   （原 panel-title 的 margin-bottom 节奏，分署 Tab 不贴头部）。 */
.side-content.gc-panel.portal-panel > .gc-panel-head {
    margin-bottom: var(--space-8);
}
#guardianPanel.portal-panel--lingyuan > .gc-panel-head > .gc-rule {
    background: var(--accent-jade);
}

#immortalPanel.portal-panel--immortal > .gc-panel-head > .gc-rule {
    background: var(--accent-cyan, #7eb8b0);
}

/* 分署卡 */
.court-card {
    padding: var(--space-12);
    margin-bottom: var(--space-10);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.court-card-header {
    display: flex;
    align-items: center;
    font-family: var(--font-serif, var(--font-display, serif));
    font-size: var(--font-body-lg);
    color: var(--text-gold);
    text-align: left;
    margin-bottom: var(--space-10);
    letter-spacing: 1px;
    font-weight: 600;
    opacity: 1;
}

.court-card-header::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 2px;
    border-radius: var(--radius-pill);
    margin-right: var(--space-8);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--accent-gold) 70%, transparent);
}

.court-card-header--jade {
    color: var(--text-jade, var(--accent-jade));
}
.court-card-header--jade::before {
    background: color-mix(in srgb, var(--accent-jade) 70%, transparent);
}

.court-card-hint {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-top: var(--space-8);
    line-height: 1.55;
    text-align: left;
}

.court-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border-color);
}

.court-title-row:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.court-title-row:first-of-type {
    padding-top: 0;
}

.court-label {
    color: var(--text-muted);
    font-size: var(--font-label);
}

.court-value {
    color: var(--text-gold);
    font-size: var(--font-body);
    font-weight: 600;
    text-align: right;
}

.portal-chip {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    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;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-panel) 55%, transparent);
}
.portal-chip--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) 12%, transparent);
}
.portal-chip--gold {
    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);
}
.portal-chip--muted {
    color: var(--text-muted);
}

.portal-btn-row {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-10);
}
.portal-btn-row > .btn-action,
.portal-btn-row > button {
    flex: 1 1 0;
    width: auto !important;
    margin-top: 0 !important;
}

.portal-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin: var(--space-8) 0;
}
.portal-stat {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-10);
    background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
    min-width: 0;
}
.portal-stat span {
    display: block;
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.portal-stat b {
    display: block;
    font-size: var(--font-body);
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* 天策内嵌 tab（神庭/灵渊共用） */
#courtTaskSection .task-tabs,
#guardianTaskContent .task-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
#courtTaskSection .task-tab,
#guardianTaskContent .task-tab {
    flex: 0 0 auto;
    height: 30px;
    min-height: 30px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-weight: 600;
}
#courtTaskSection .task-tab.active,
#guardianTaskContent .task-tab.active {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-gold);
    font-weight: 600;
}
#guardianTaskContent .task-tab.active {
    border-color: color-mix(in srgb, var(--accent-jade) 42%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    color: var(--text-jade, var(--accent-jade));
}
#courtClaimAllBtn,
#guardianClaimAllBtn {
    margin-left: auto !important;
    min-height: 30px;
    padding: 0 var(--space-10) !important;
    font-size: var(--font-label) !important;
    border-radius: var(--radius-md);
}

/* ===== 仙界破界 ===== */
.immortal-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-bottom: var(--space-8);
}

.immortal-content .court-card {
    margin-bottom: 0;
}

.immortal-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-12);
    border-color: color-mix(in srgb, var(--accent-cyan, #7eb8b0) 28%, var(--border-color));
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent-cyan, #7eb8b0) 6%, transparent), transparent 48%),
        var(--bg-card);
    box-shadow: none;
}

/* A：去掉顶装饰条 */
.immortal-card::before {
    content: none;
    display: none;
}

.immortal-card .court-card-header {
    margin-bottom: var(--space-10);
    text-align: left;
    letter-spacing: 1px;
    color: var(--text-cyan, var(--accent-cyan, #7eb8b0));
}
.immortal-card .court-card-header::before {
    background: color-mix(in srgb, var(--accent-cyan, #7eb8b0) 70%, transparent);
}

.immortal-card--locked {
    min-height: 96px;
}

.immortal-hero .court-card-hint {
    text-align: left;
}

.immortal-identity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}

.immortal-identity-grid .court-title-row {
    display: block;
    min-width: 0;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-sm);
    background: var(--glass-white-3);
}

.immortal-identity-grid .court-label,
.immortal-identity-grid .court-value {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.immortal-identity-grid .court-label {
    margin-bottom: var(--space-4);
    font-size: var(--font-micro);
}

.immortal-identity-grid .court-value {
    font-size: var(--font-label);
    line-height: 1.35;
}

.immortal-progress {
    position: relative;
    height: 24px;
    border: 1px solid color-mix(in srgb, var(--accent-cyan) 28%, transparent);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--shadow-black-3);
}

.immortal-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-cyan) 70%, transparent), color-mix(in srgb, var(--craft-gold-bright) 82%, transparent));
    transition: width 0.25s ease;
}

.immortal-progress span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-label);
    color: var(--text-light);
    text-shadow: 0 1px 2px var(--shadow-black-1);
}

.immortal-milestones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.immortal-milestone {
    min-height: 74px;
    padding: var(--space-8);
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-sm);
    background: var(--glass-white-3);
}

.immortal-milestone b,
.immortal-milestone span,
.immortal-milestone small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.immortal-milestone b {
    color: var(--text-muted);
    font-size: var(--font-label);
}

.immortal-milestone span {
    color: var(--text-secondary);
    font-size: var(--font-label);
    font-weight: 700;
    margin-top: var(--space-2);
}

.immortal-milestone small {
    color: var(--text-muted);
    font-size: var(--font-micro);
    line-height: 1.35;
    margin-top: var(--space-4);
}

.immortal-milestone--done {
    border-color: color-mix(in srgb, var(--accent-cyan) 34%, transparent);
    background: color-mix(in srgb, var(--accent-cyan) 8%, transparent);
}

.immortal-milestone--done b,
.immortal-milestone--done span {
    color: var(--accent-jade);
}

.immortal-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-12);
}

.immortal-ascend-grid {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    margin-top: var(--space-10);
}

.immortal-resource-grid > div {
    min-width: 0;
    min-height: 52px;
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-sm);
    padding: var(--space-8) var(--space-10);
    background: var(--glass-white-3);
}

.immortal-resource-grid span {
    display: block;
    min-width: 0;
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
    overflow-wrap: anywhere;
}

.immortal-resource-grid b {
    display: block;
    min-width: 0;
    color: var(--text-gold);
    font-size: var(--font-body-lg);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* ===== 本源污染详情面板(主题变量自适应深浅色) ===== */
.immortal-card--pollution {
    margin-top: var(--space-4);
}

.pollution-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}
.pollution-hero__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.pollution-hero__label {
    font-size: var(--font-caption);
    color: var(--text-muted);
    letter-spacing: 0.5px;
}
.pollution-hero__value {
    font-size: var(--font-hero);
    font-weight: 700;
    line-height: 1;
    font-family: "Georgia", "PingFang SC", serif;
    color: var(--accent-crimson);
}
.pollution-hero__value small {
    font-size: var(--font-body-lg);
    font-weight: 500;
    opacity: 0.8;
}
.pollution-hero__tag {
    align-self: center;
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-xs);
    font-size: var(--font-caption);
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.pollution-hero__tag.tag-warn {
    color: var(--text-red);
    background: color-mix(in srgb, var(--accent-crimson) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 34%, transparent);
}
.pollution-hero__tag.tag-mid {
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 34%, transparent);
}
.pollution-hero__tag.tag-ok {
    color: var(--text-jade);
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 32%, transparent);
}

.pollution-penalty {
    padding: var(--space-8) var(--space-10);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-crimson) 10%, transparent);
    border-left: 2px solid var(--accent-crimson);
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-red);
}

.pollution-detail-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    margin-top: var(--space-12);
}
.pollution-detail-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.pollution-detail-row__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--font-caption);
}
.pollution-detail-row__name {
    color: var(--text-primary);
    letter-spacing: 0.3px;
}
.pollution-detail-row__name em {
    color: var(--text-muted);
    font-style: normal;
    font-size: var(--font-micro);
    margin-left: var(--space-4);
}
.pollution-detail-row__num {
    font-family: "Georgia", serif;
    font-weight: 600;
    color: var(--text-gold);
}
.pollution-detail-row__num em {
    font-style: normal;
    color: var(--text-muted);
    font-size: var(--font-micro);
    margin-left: var(--space-2);
}
.pollution-detail-bar {
    position: relative;
    height: 6px;
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    overflow: hidden;
}
.pollution-detail-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: var(--radius-xs);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-crimson) 50%, transparent), var(--accent-crimson));
    transition: width 0.3s ease;
}

/* 清源大醮净化预览 */
.purify-preview {
    margin-top: var(--space-14);
    padding: var(--space-12) var(--space-12);
    border-radius: var(--radius-sm);
    border: 1px dashed color-mix(in srgb, var(--accent-jade) 32%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 6%, transparent);
}
.purify-preview__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-caption);
    color: var(--text-jade);
    margin-bottom: var(--space-8);
    letter-spacing: 0.3px;
}
.purify-preview__title .cost {
    color: var(--text-muted);
    font-size: var(--font-caption);
}
.purify-preview__delta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    font-family: "Georgia", "PingFang SC", serif;
}
.purify-preview__before,
.purify-preview__after {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.purify-preview__before .v {
    font-size: var(--font-heading);
    font-weight: 700;
    color: var(--text-red);
}
.purify-preview__after .v {
    font-size: var(--font-heading);
    font-weight: 700;
    color: var(--text-jade);
}
.purify-preview__before .l,
.purify-preview__after .l {
    font-size: var(--font-micro);
    color: var(--text-muted);
}
.purify-preview__arrow {
    font-size: var(--font-heading);
    color: var(--text-gold);
    font-weight: 300;
}
.purify-preview__hint {
    margin-top: var(--space-8);
    text-align: center;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.5;
}

.immortal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: var(--space-8);
    margin-top: var(--space-10);
}

.immortal-actions button {
    width: 100%;
    min-height: 34px;
    overflow-wrap: anywhere;
}

.immortal-secondary-btn {
    border-color: color-mix(in srgb, var(--accent-cyan) 32%, transparent);
    color: var(--accent-jade);
    background: color-mix(in srgb, var(--accent-cyan) 7%, transparent);
}

.immortal-ascend-btn {
    font-weight: 700;
}

.immortal-warning {
    color: var(--text-danger);
}

.immortal-action-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.immortal-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-10);
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-sm);
    background: var(--glass-white-3);
}

.immortal-action__main {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.immortal-action__main b,
.immortal-action__main span,
.immortal-action__main small {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.immortal-action__main b {
    color: var(--text-gold);
    font-size: var(--font-body);
    margin-bottom: var(--space-4);
}

.immortal-action__main span {
    color: var(--text-secondary);
    font-size: var(--font-label);
    line-height: 1.45;
}

.immortal-action__main small {
    color: var(--text-muted);
    font-size: var(--font-caption);
    margin-top: var(--space-4);
    line-height: 1.4;
}

.immortal-action__disabled {
    color: var(--text-danger) !important;
}

.immortal-action > button,
.immortal-action__buttons > button {
    min-width: 58px;
    min-height: 32px;
    align-self: center;
}

.immortal-action__buttons {
    display: flex;
    gap: var(--space-6);
    align-self: center;
}

.immortal-challenge-btn {
    width: 100%;
    min-height: 36px;
    margin-top: var(--space-10);
}

@media (max-width: 520px) {
    .immortal-card {
        padding: var(--space-12);
    }

    .immortal-identity-grid {
        grid-template-columns: 1fr;
    }

    .immortal-actions {
        grid-template-columns: 1fr;
    }

    .immortal-milestones,
    .immortal-resource-grid {
        grid-template-columns: 1fr;
    }

    /* 窄屏：文案在上、按钮在下；禁止横排 + 按钮 width:100% 把主列挤成一字宽 */
    .immortal-action {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-8);
        grid-template-columns: unset;
    }

    .immortal-action__main {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    .immortal-action > button,
    .immortal-action__buttons {
        width: 100%;
        align-self: stretch;
    }

    .immortal-action > button,
    .immortal-action__buttons > button {
        width: 100%;
        min-width: 0;
    }

    .immortal-action__buttons {
        display: flex;
        flex-direction: row;
        gap: var(--space-8);
    }

    .immortal-action__buttons > button {
        flex: 1 1 0;
        width: auto;
    }
}

/* 扁平主钮（对齐 modal-btn / 衙署笺） */
.btn-court-salary {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
    padding: var(--space-8) var(--space-14);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-body);
    font-weight: 600;
    transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}

.btn-court-salary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 52%, transparent);
    transform: none;
}

.btn-court-salary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* 试炼面板 */
.trial-boss-stats {
    display: flex;
    gap: var(--space-12);
    padding: var(--space-8) 0;
    font-size: var(--font-label);
    color: var(--text-secondary);
}

.trial-boss-stats b {
    color: var(--text-gold);
    font-weight: 600;
}

.trial-status-msg {
    font-size: var(--font-label);
    text-align: left;
    margin: var(--space-8) 0 0;
    line-height: 1.5;
    color: var(--text-muted);
}

.btn-trial {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
    font-weight: 600;
    border-radius: var(--radius-md);
}

.btn-trial:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    transform: none;
}

.btn-trial.immortal-challenge-btn,
.immortal-ascend-btn {
    background: color-mix(in srgb, var(--accent-cyan, #7eb8b0) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-cyan, #7eb8b0) 40%, transparent);
    color: var(--text-cyan, var(--accent-cyan, #7eb8b0));
}

.btn-trial-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.trial-log-container {
    max-height: 40vh;
    overflow-y: auto;
    padding: var(--space-8) 0;
}

.trial-log {
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.6;
    padding: var(--space-2) 0;
}

.trial-log-round {
    font-size: var(--font-caption);
    color: var(--text-muted);
}

.trial-log-victory {
    color: var(--accent-jade);
    font-weight: 500;
}

.trial-log-defeat {
    color: var(--danger-color);
    font-weight: 500;
}

/* 试炼结果弹窗：封号信息与日志之间的虚线分隔（gc-q/gc-sub 与 trial-log-container 之间）。
   迁 gc-dialog 后废弃了旧 trial-promotion-text 的 border-bottom，这里接管分隔职责。 */
.trial-promotion-divider {
    margin: var(--space-14) 0 0;
    padding-bottom: var(--space-14);
    border-bottom: 1px dashed var(--border-color);
}

/* ===== 灵渊议事厅 · A 衙署笺 ===== */
.guardian-tabs {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    margin: 0 0 var(--space-10);
    padding: 0 0 var(--space-4);
    border-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* 与标题区隔离，避免被 sticky 头叠盖 */
    flex-shrink: 0;
}
.guardian-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }

.guardian-tab {
    flex: 0 0 auto;
    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);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-label);
    font-family: inherit;
    font-weight: 600;
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.guardian-tab:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent-jade) 30%, transparent);
}

.guardian-tab.active {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade) 42%, transparent);
    border-bottom-color: color-mix(in srgb, var(--accent-jade) 42%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    font-weight: 600;
}

.guardian-card {
    padding: var(--space-12);
    margin-bottom: var(--space-10);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.guardian-card-header {
    display: flex;
    align-items: center;
    font-family: var(--font-serif, var(--font-display, serif));
    font-size: var(--font-body-lg);
    color: var(--text-jade, var(--accent-jade));
    text-align: left;
    margin-bottom: var(--space-10);
    letter-spacing: 1px;
    font-weight: 600;
    opacity: 1;
}
.guardian-card-header::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 2px;
    border-radius: var(--radius-pill);
    margin-right: var(--space-8);
    background: color-mix(in srgb, var(--accent-jade) 70%, transparent);
}

.guardian-preview-hint {
    font-size: var(--font-label);
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-8);
    line-height: 1.5;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
}

.guardian-hidden-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-body);
    padding: var(--space-32) var(--space-12);
    line-height: 1.7;
}

.guardian-actions {
    display: flex;
    gap: var(--space-8);
    margin: var(--space-10) 0 0;
}

.guardian-actions .btn-icon,
.guardian-actions .btn-action {
    flex: 1 1 0;
    min-height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-label);
}
.guardian-actions .btn-icon:first-child,
.guardian-actions .portal-btn--primary {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}

.guardian-choice-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    margin-top: var(--space-8);
    margin-bottom: var(--space-2);
    width: 100%;
}

.guardian-choice-btn {
    min-width: 0;
    width: 100%;
    padding: var(--space-10) var(--space-12);
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
    color: var(--text-primary);
}
.guardian-choice-btn:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
}

.guardian-choice-name,
.guardian-choice-meta {
    display: block;
    min-width: 0;
}

.guardian-choice-name {
    font-family: var(--font-serif, var(--font-display, serif));
    font-size: var(--font-body);
    font-weight: 600;
}

.guardian-choice-meta {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
}

.guardian-rule-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.guardian-rule-list li {
    position: relative;
    padding: var(--space-6) 0 var(--space-6) var(--space-12);
    font-size: var(--font-label);
    line-height: 1.5;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}
.guardian-rule-list li:last-child { border-bottom: 0; }
.guardian-rule-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-jade) 55%, transparent);
}

.guardian-anchor-recipe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: var(--space-8) 0;
}
.guardian-anchor-recipe span {
    font-size: var(--font-caption);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.guardian-anchor-recipe span.is-ok {
    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) 12%, transparent);
}
.guardian-anchor-recipe span.is-lack {
    color: var(--text-red, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson) 40%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 12%, transparent);
}

.guardian-slot {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-8);
    background: var(--bg-card);
    transition: border-color 0.15s;
}

.guardian-slot:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 36%, var(--border-color));
}

.guardian-slot-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-8);
}

.guardian-slot-name {
    font-size: var(--font-body-lg);
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-serif, var(--font-display, serif));
}

.guardian-slot-meta {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-top: var(--space-4);
    line-height: 1.45;
}

.guardian-slot-guardian {
    font-size: var(--font-label);
    margin-top: var(--space-6);
    color: var(--text-secondary);
    line-height: 1.5;
}

.guardian-slot-vacant {
    font-size: var(--font-label);
    margin-top: var(--space-6);
    color: var(--text-muted);
}

.guardian-slot-state {
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-4);
    padding: 0 var(--space-8);
    min-height: 18px;
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 600;
    border: 1px solid var(--border-color);
}

.guardian-slot-state--active {
    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) 12%, transparent);
}

.guardian-slot-state--defeated {
    color: var(--text-red, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--accent-crimson) 40%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 12%, transparent);
}

.guardian-slot-debuff {
    display: inline-flex;
    margin-left: var(--space-4);
    padding: 0 var(--space-8);
    min-height: 18px;
    border-radius: var(--radius-pill);
    font-size: var(--font-micro);
    font-weight: 600;
    color: var(--text-gold);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
}

.guardian-slot-report {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-top: var(--space-6);
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-6);
    line-height: 1.45;
}

.guardian-slot-report .report-time {
    color: var(--text-muted);
    font-size: var(--font-caption);
}

.guardian-slot-report .report-win {
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}

.guardian-slot-report .report-lose {
    color: var(--text-red, var(--accent-crimson));
    font-weight: 600;
}

.guardian-slot-action {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.guardian-slot-action .btn-icon {
    width: auto;
    min-height: 32px;
    padding: 0 var(--space-12);
    font-size: var(--font-label);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--accent-jade) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    color: var(--text-jade, var(--accent-jade));
    font-weight: 600;
}

.guardian-slot-action--challenge .btn-icon {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    color: var(--text-gold);
}

.guardian-slot-reason {
    margin-top: var(--space-6);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.45;
}

.guardian-section-btn {
    width: 100%;
    min-height: 36px;
    margin-top: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--font-label);
    cursor: pointer;
}
.guardian-section-btn:hover {
    border-color: color-mix(in srgb, var(--accent-jade) 36%, transparent);
    color: var(--text-jade, var(--accent-jade));
}

.guardian-leaderboard {
    margin-top: var(--space-8);
}
.guardian-leaderboard table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-label);
}
.guardian-leaderboard th,
.guardian-leaderboard td {
    padding: var(--space-8) var(--space-6);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}
.guardian-leaderboard th {
    color: var(--text-muted);
    font-weight: 500;
}
.guardian-leaderboard td:last-child,
.guardian-leaderboard th:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 灵渊投影弹窗 · A（去掉 ✦ / 左轨） */
.ly-proj-modal .modal-info-card__title {
    font-family: var(--font-serif, var(--font-display, serif));
    letter-spacing: 1px;
}
.ly-proj-modal .modal-feat-icon {
    display: none;
}
.ly-proj-modal .modal-feat-row {
    padding-left: 0;
}
.ly-proj-quote {
    font-size: var(--font-body-lg);
    line-height: 1.7;
    color: var(--text-gold);
    margin-bottom: var(--space-8);
    padding: var(--space-8) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

.guardian-slot-action--challenge .btn-icon {
    color: var(--text-gold);
}

.guardian-slot-reason {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-top: var(--space-4);
}

.guardian-section-btn {
    width: 100%;
    margin-bottom: var(--space-8);
    padding: var(--space-8) 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--glass-white-2);
    color: var(--text-secondary);
    font-size: var(--font-label);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.guardian-section-btn:hover {
    background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
    border-color: var(--accent-gold);
    color: var(--text-gold);
}

.guardian-leaderboard table {
    width: 100%;
    font-size: var(--font-label);
    border-collapse: collapse;
}

.guardian-leaderboard th {
    text-align: left;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
}

.guardian-leaderboard th:last-child {
    text-align: right;
}

.guardian-leaderboard td {
    padding: var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.guardian-leaderboard td:first-child {
    color: var(--text-gold);
    font-weight: 600;
}

.guardian-leaderboard td:nth-child(3) {
    color: var(--text-gold);
}

.guardian-leaderboard td:last-child {
    text-align: right;
}

/* 散修绑定账号 */
.court-bind-section {
    padding: 0 var(--space-4);
}

.court-bind-desc {
    font-size: var(--font-body);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-16);
    padding: var(--space-10) var(--space-12);
    background: rgba(var(--accent-jade-rgb, 120, 200, 180), 0.08);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-jade);
}

.bind-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.bind-field label {
    display: block;
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.bind-field input {
    width: 100%;
    padding: var(--space-8) var(--space-10);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-input, var(--glass-white-1));
    color: var(--text-primary);
    font-size: var(--font-body);
    box-sizing: border-box;
}

.bind-field input:focus {
    outline: none;
    border-color: var(--accent-jade);
}

.bind-code-input {
    display: flex;
    gap: var(--space-8);
}

.bind-code-input input {
    flex: 1;
}

.btn-send-code {
    white-space: nowrap;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--accent-jade);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--accent-jade);
    font-size: var(--font-label);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-send-code:hover:not(:disabled) {
    background: var(--accent-jade);
    color: var(--bg-panel);
}

.btn-send-code:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== 装备样式 ===== */
.inventory-item.equipped {
    border-color: color-mix(in srgb, var(--craft-gold) 40%, transparent);
    background: color-mix(in srgb, var(--craft-gold) 6%, transparent);
}

.equip-badge {
    font-size: var(--font-caption);
    color: var(--text-gold);
    margin-left: var(--space-6);
}

/* 祭炼等级标记 */
.refine-badge {
    font-size: var(--font-caption);
    color: var(--accent-cyan);
    margin-left: var(--space-4);
    font-weight: 600;
}

/* 本命法宝标记 */
.natal-badge {
    font-size: var(--font-micro);
    color: var(--craft-gold-bright);
    margin-left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: color-mix(in srgb, var(--craft-gold-bright) 15%, transparent);
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.refine-feed-cb {
    accent-color: var(--accent-cyan);
}

/* ============================================================ */
/* ===== gc-panel 侧栏 chrome 规范（与 gc-dialog 共享 token） ===== */
/* 首个落地样板：功法与技能面板 #techniquePanel                   */
/* 与 gc-dialog 共享：--gc-tone / --gc-radius / rarity-* / 按钮  */
/* 形态适配侧栏：sticky 头 + 长滚列表（非居中浮层）              */
/* ============================================================ */
.gc-panel {
    --gc-tone: var(--accent-gold);
    --gc-radius: var(--radius-lg);
    --gc-radius-inner: var(--radius-md);
    --gc-radius-btn: var(--radius-md);
}
.gc-panel[data-tone="gold"] { --gc-tone: var(--accent-gold); }

/* gc-panel-head：短色条 + 标题 + 状态摘要 + × 关闭（sticky，无底边线）
   负 margin 抵消 side-content 的 padding:var(--space-16)，让 head 撑满面板宽度（同旧 panel-title 做法） */
.gc-panel > .gc-panel-head {
    position: sticky;
    top: -16px;
    z-index: 10;
    margin: calc(-1 * var(--space-16)) calc(-1 * var(--space-16)) 0;
    padding: var(--space-14) var(--space-48) var(--space-8) var(--space-16);
    background: var(--bg-panel);
    flex-shrink: 0;
}
.gc-panel > .gc-panel-head > .gc-rule {
    width: 36px; height: 3px; border-radius: var(--radius-pill);
    margin-bottom: var(--space-8);
    background: var(--gc-tone, var(--accent-gold));
}
.gc-panel > .gc-panel-head > .gc-title {
    font-family: var(--font-serif, "Songti SC", serif);
    font-size: var(--font-heading); letter-spacing: 2px; font-weight: 600;
    color: var(--text-primary); line-height: 1.35;
}
.gc-panel > .gc-panel-head > .gc-panel-sub {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    letter-spacing: 1px;
    line-height: 1.5;
}
.gc-panel > .gc-panel-head > .gc-panel-sub:empty {
    display: none;
}
/* FB4326 功法面板：不展示「主修/装配」副标题（JS 侧 subtitle=null / [hidden] 即可，无需 !important） */
#techniquePanel > .gc-panel-head > .gc-panel-sub {
    display: none;
}

/* FB4326：功法侧栏可滚但隐藏滚动条（保留 touch / 滚轮） */
#techniquePanel.side-content,
#techniquePanel {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#techniquePanel.side-content::-webkit-scrollbar,
#techniquePanel::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* × 关闭钮（复用 .btn-panel-close 基础样式，gc-panel-close 微调位置） */
.gc-panel-close {
    position: absolute;
    top: 14px; right: 14px;
}

/* gc-panel-tabs：分卷 tab（无底边线；负 margin 与 head 左右对齐） */
.gc-panel-tabs {
    flex-wrap: nowrap;
    gap: var(--space-6);
    margin: 0 calc(-1 * var(--space-16)) 0;
    padding: 0 var(--space-16) var(--space-8);
    background: var(--bg-panel);
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.gc-panel-tabs::-webkit-scrollbar { display: none; }

/*
 * 功法分卷 Tab 吸顶：标题 sticky top=-16px（抵消 side-content padding），
 * 标题区约 57px 高 → 吸顶后底边约在 41px；Tab 贴在标题下。
 *
 * 注意：game-themes 里对 .technique-volume-tabs 写了 padding:0 / background:transparent / border:0 !important，
 * 会吞掉左右留白、吸顶底和底边，正文会透过分卷条（#10330）。此处必须 !important 压回。
 */
#techniquePanel > .technique-sticky-nav,
#techniquePanel > .technique-volume-tabs.gc-panel-tabs {
    position: sticky;
    top: 40px;
    z-index: 11;
    margin: 0 calc(-1 * var(--space-16)) var(--space-10) !important;
    padding: 0 var(--space-16) var(--space-8) !important;
    background: var(--bg-panel) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent) !important;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* gc-panel-body：列表区（不加 overflow——由 side-content 单一滚动接管，避免双滚） */
.gc-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;  /* padding 由 side-content 的 16px 接管，避免叠双层 */
}

/* ===== gc-panel-head · 零 padding workbench 壳适配 =====
   仅适用于 side-content padding 已清 0、overflow:hidden 的 workbench 壳
   （见 game-layout.css 的 workbench 列表）。这些壳 sticky + 负 margin 无处抵消；
   壳自身不滚、头部天然固定，统一改为常规流式头部。与 #inventoryPanel 的既有落地同构。
   surface 底（--mkt-surface 等）由各面板自己的 __header 覆盖提供。
   注意：portal-panel / map-panel-shell / chat-horn-b 不在此列——
   它们保留 side-content 默认 16px padding，走 gc-panel-head 基础样式（sticky + 负 margin），
   与功法 / 储物等 A 类面板一致。 */
.side-content.gc-panel.inventory-workbench > .gc-panel-head,
.side-content.gc-panel.market-workbench > .gc-panel-head,
.side-content.gc-panel.auction-workbench > .gc-panel-head,
.side-content.gc-panel.shop-workbench > .gc-panel-head,
.side-content.gc-panel.transmit-workbench > .gc-panel-head,
.side-content.gc-panel.sect-workbench > .gc-panel-head,
.side-content.gc-panel.trial-workbench > .gc-panel-head,
.side-content.gc-panel.fb-workbench > .gc-panel-head,
.side-content.gc-panel.act-workbench > .gc-panel-head,
.side-content.gc-panel.np-workbench > .gc-panel-head,
.side-content.gc-panel.mb-workbench > .gc-panel-head,
.side-content.gc-panel.enc-workbench > .gc-panel-head,
.side-content.gc-panel.gd-workbench > .gc-panel-head,
.side-content.gc-panel.tournament-workbench > .gc-panel-head,
.side-content.gc-panel.friend-workbench > .gc-panel-head,
.side-content.gc-panel.cave-wb-shell .gc-panel-head {
    position: relative;
    top: auto;
    margin: 0;
    padding: var(--space-14) var(--space-48) var(--space-8) var(--space-16);
    background: var(--bg-panel);
    flex: none;
    z-index: 10;
}

/* 头部右上操作组（批量/规则/屏蔽/黑名单/刷新固定 + 关闭钮）：
   绝对定位浮于标题区右上，不参与流式布局；关闭钮在组内取消 gc-panel-close 的独立浮动。
   与 #inventoryPanel > .gc-panel-head .inventory-workbench__header-actions 同构。 */
.gc-panel > .gc-panel-head > [class*="__header-actions"],
.gc-panel > .gc-panel-head > .chat-title-actions {
    position: absolute;
    top: 12px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    margin-left: 0;
    z-index: 11;
}
.gc-panel > .gc-panel-head > [class*="__header-actions"] .gc-panel-close,
.gc-panel > .gc-panel-head > .chat-title-actions .gc-panel-close {
    position: relative;
    top: auto;
    right: auto;
}

/* 标题下方的余额/容量胶囊（坊市/拍卖/商铺/宗门）：落在 gc-title 与操作组之间，
   对齐 gc-panel-sub 的间距语汇，胶囊样式由各面板自己的 balance 类提供 */
.gc-panel > .gc-panel-head > [class*="__balance"] {
    display: inline-flex;
    margin-top: var(--space-4);
}

/* ===== 功法与技能 ===== */
.technique-section {
    margin-bottom: var(--space-20);
}

/* C 分卷：功法 | 技能 | 自创 */
.technique-content--volume {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.technique-volume-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-6);
    margin: 0 0 var(--space-10);
    overflow-x: auto;
    scrollbar-width: none;
}
.technique-volume-tabs::-webkit-scrollbar { display: none; }

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

.technique-volume-tab:hover {
    color: var(--accent-gold);
    border-color: color-mix(in srgb, var(--craft-gold) 35%, var(--border-color));
}

.technique-volume-tab.is-on {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--craft-gold) 42%, transparent);
    background: color-mix(in srgb, var(--craft-gold) 10%, transparent);
}

.technique-volume-tab.is-locked:not(.is-on) {
    opacity: 0.72;
}

.technique-volume {
    min-width: 0;
}

.technique-custom-locked {
    margin: 0 0 var(--space-12);
    padding: var(--space-16) var(--space-14);
    border: 1px dashed color-mix(in srgb, var(--craft-gold) 28%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--craft-gold) 5%, transparent);
    text-align: center;
}

.technique-custom-locked__title {
    font-size: var(--font-body-lg);
    font-weight: 700;
    color: var(--text-gold);
    margin-bottom: var(--space-6);
}

.technique-custom-locked__text {
    margin: 0;
    font-size: var(--font-label);
    line-height: 1.65;
    color: var(--text-muted);
}

.technique-limit-note {
    margin: 0 0 var(--space-12);
    padding: var(--space-10) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--craft-gold) 22%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--craft-gold) 6%, transparent);
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.6;
}

.technique-limit-note__title {
    margin-bottom: var(--space-4);
    color: var(--text-gold);
    font-size: var(--font-body);
    font-weight: 700;
}

.technique-limit-note__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-8);
    margin-top: var(--space-6);
}

.technique-limit-note__grid span {
    padding: var(--space-2) var(--space-6);
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-xs);
    background: var(--glass-white-2);
    color: var(--text-secondary);
    white-space: nowrap;
}
.technique-limit-note__grid span.is-current {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color, transparent));
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold);
    font-weight: 600;
}
.technique-limit-note__grid span.is-next {
    border-color: color-mix(in srgb, var(--accent-jade) 35%, var(--border-color, transparent));
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
    color: var(--text-jade, var(--accent-jade));
}

/* 自创工具条：创建 / 卷轴升品 / 洗炼石合成 / 仅看已装 同尺寸 */
#techniquePanel .technique-toolbar-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
}
#techniquePanel .technique-toolbar-actions .technique-btn,
#techniquePanel .technique-toolbar-actions .technique-btn--sm {
    height: 28px;
    min-height: 28px;
    padding: 0 var(--space-10);
    font-size: var(--font-caption);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}
#techniquePanel .technique-toolbar-actions .technique-fold-btn.is-active {
    background: color-mix(in srgb, var(--beihuang-blue, var(--accent-blue)) 18%, transparent);
    border-color: color-mix(in srgb, var(--beihuang-blue, var(--accent-blue)) 45%, var(--border-color, transparent));
    color: var(--accent-cyan, #2f8390);
}

/* 技能套装栏：通栏卡，名/覆盖/删同高，词条合计单独一行 */
.loadout-bar {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: var(--space-8);
    align-items: stretch;
}

.custom-skill-loadout-panel {
    margin: 0 0 var(--space-10);
    padding: var(--space-8);
    border: 1px solid color-mix(in srgb, var(--craft-gold) 18%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--craft-gold) 5%, transparent);
}

.custom-skill-loadout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}

.custom-skill-loadout-title {
    margin-bottom: 0;
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-gold);
}

.loadout-bar--compact {
    gap: var(--space-8);
}

details.loadout-item {
    display: block;
    width: 100%;
    min-height: 40px;
    border-radius: var(--radius-md);
    overflow: hidden;
    /* 常态即用强调边框，禁止再跟底色同色导致只有 hover 才看得见 */
    border: 1px solid var(--color-border-emphasis);
    background: color-mix(in srgb, var(--craft-gold) 7%, transparent);
}

.loadout-bar .loadout-item__btns {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0;
    list-style: none;
    cursor: pointer;
}

.loadout-bar .loadout-item__btns::-webkit-details-marker,
.loadout-bar .loadout-item__btns::marker {
    display: none;
    content: none;
}

.loadout-bar .loadout-item__name {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-8) 0 var(--space-12);
    font-size: var(--font-label);
    color: var(--text-primary);
}

/* 三角跟名称同一行盒垂直居中，禁止再当 stretch 子项贴行顶 */
.loadout-bar .loadout-item__name .ui-disclosure-caret {
    align-self: center;
    flex-shrink: 0;
}

.loadout-bar .loadout-affix-summary {
    padding: var(--space-4) var(--space-12) var(--space-12);
    font-size: var(--font-caption);
    line-height: 1.5;
    color: var(--text-muted);
}

.loadout-bar .btn-loadout-apply,
.loadout-bar .btn-loadout-update,
.loadout-bar .btn-loadout-del {
    border: 0;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.loadout-bar .loadout-item:hover {
    border-color: color-mix(in srgb, var(--craft-gold) 50%, transparent);
    background: color-mix(in srgb, var(--craft-gold) 10%, transparent);
}

.loadout-bar .btn-loadout-apply {
    flex: 0 0 auto;
    font-size: var(--font-label);
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--space-12);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
    cursor: pointer;
    border-left: 1px solid var(--glass-white-1);
}

.loadout-bar .btn-loadout-apply:hover {
    color: var(--text-gold);
    background: color-mix(in srgb, var(--craft-gold) 12%, transparent);
}

.loadout-bar .btn-loadout-del {
    flex: 0 0 40px;
    width: 40px;
    min-height: 40px;
    /* 删除属高危操作，常态即给克制红色提示，让无 hover 的手机端也能一眼识别 */
    color: var(--craft-gold);
    background: color-mix(in srgb, var(--jimo-crimson) 8%, transparent);
    cursor: pointer;
    border-left: 1px solid var(--glass-white-1);
    transition: all 0.2s;
}

.loadout-bar .btn-loadout-del:hover,
.loadout-bar .btn-loadout-del:active {
    color: var(--danger-color);
    background: color-mix(in srgb, var(--jimo-crimson) 18%, transparent);
}

.loadout-bar .btn-loadout-update {
    /* #6859：覆盖是常用操作，常态须可见；旧版用 --glass-white-1 写字，无 hover 的手机端等于没按钮 */
    flex: 0 0 auto;
    font-size: var(--font-label);
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--space-12);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
    cursor: pointer;
    border-left: 1px solid var(--glass-white-1);
    transition: all 0.2s;
}

.loadout-bar .btn-loadout-update:hover {
    color: var(--text-gold);
    background: color-mix(in srgb, var(--craft-gold) 12%, transparent);
}

.technique-section-title {
    font-size: var(--font-body);
    color: var(--text-gold);
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid color-mix(in srgb, var(--craft-gold) 20%, transparent);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}

.technique-section-title__text {
    flex: 1 1 auto;
    min-width: 0;
}

.technique-section-title__actions {
    /* #11044：0 0 auto 不许收缩，八键工具条在手机上以内容宽(≈559px)溢出标题行；
       改 0 1 auto 允许收缩到行宽，内部 flex-wrap 才能把按钮折成多行 */
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

/* 未装备折叠切换按钮 */
.btn-fold-toggle {
    padding: var(--space-2) var(--space-8);
    font-size: var(--font-caption);
    border: 1px solid color-mix(in srgb, var(--craft-gold) 35%, transparent);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
    color: var(--text-gold);
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-fold-toggle:hover {
    background: color-mix(in srgb, var(--craft-gold) 20%, transparent);
}

.btn-fold-toggle.is-active {
    background: color-mix(in srgb, var(--beihuang-blue) 22%, transparent);
    border-color: color-mix(in srgb, var(--beihuang-blue) 50%, transparent);
    color: var(--accent-cyan);
}

/* 折叠未装备时的"已折叠 N 个"提示行 */
.technique-fold-hint {
    font-size: var(--font-label);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-8);
    border: 1px dashed var(--glass-white-1);
    border-radius: var(--radius-sm);
    background: var(--glass-white-2);
    cursor: pointer;
    transition: background 0.2s;
}
.technique-fold-hint::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: var(--space-6);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    opacity: 0.6;
}

.technique-fold-hint:hover {
    background: color-mix(in srgb, var(--craft-gold) 8%, transparent);
    color: var(--text-gold);
}

/* 功法筛选：chip 基线见 game-inventory；此处仅允许换行 */
.technique-filter-tabs {
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
    overflow-x: visible;
}

.technique-filter-tabs .inv-filter-tab {
    flex: 0 0 auto;
    min-width: 0;
}

.custom-skill-query-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
    margin: 0 0 var(--space-10);
}

.custom-skill-query-bar .app-input {
    flex: 1 1 180px;
    min-width: 0;
}

.custom-skill-query-bar .technique-btn {
    flex: none;
}

#customSkillAffixFilterBtn.is-active {
    border-color: color-mix(in srgb, var(--text-gold) 50%, transparent);
    color: var(--text-gold);
}

.custom-skill-affix-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: 0 0 var(--space-10);
}

.custom-skill-affix-filter.hidden,
.custom-skill-affix-filter[hidden] {
    display: none;
}

.custom-affix-list .technique-chip.is-query-match {
    border-color: color-mix(in srgb, var(--text-gold) 55%, transparent);
    color: var(--text-gold);
}

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

/* ═══════════════════════════════════════════════════════════════
   功法 / 技能卡 · A 玉简行（_renderArtItem / 技能同族）
   铁律：无左竖条装饰
   ═══════════════════════════════════════════════════════════════ */
.technique-item {
    background: var(--bg-panel, var(--glass-white-2));
    border: 1px solid color-mix(in srgb, var(--border-color, var(--glass-white-1)) 90%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--space-12) var(--space-12) var(--space-10);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.technique-item.technique-active {
    border-color: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 42%, var(--border-color, transparent));
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 7%, var(--bg-panel, var(--glass-white-2)));
}

.technique-item--sect {
    border-color: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 28%, var(--border-color, transparent));
}

/* #10014 勾选组套：列表顶部状态条 + 行首勾选框 */
.technique-compose-bar {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
    padding: var(--space-6) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 42%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 6%, var(--bg-panel, transparent));
    font-size: var(--font-label);
}

.technique-compose-check {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-6);
    cursor: pointer;
}

.technique-compose-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-gold, var(--craft-gold));
    cursor: pointer;
}

/* FB#5638：置顶功法轻描金边 + 徽标 */
.technique-item--pinned {
    border-color: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 36%, var(--border-color, transparent));
}
.technique-badge--pin {
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 14%, transparent);
    color: var(--text-gold, var(--craft-gold));
    border: 1px solid color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 32%, transparent);
}

.technique-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-8);
    margin-bottom: var(--space-6);
}

.technique-name {
    font-family: var(--font-serif, "Songti SC", STSong, serif);
    font-size: var(--font-action);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

.technique-grade {
    flex: 0 0 auto;
    font-size: var(--font-caption);
    font-weight: 600;
    height: 20px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
}
/* 无本源徽标：灰色克制态。
 * 勿再使用 .empty：会与 game-workbench.css 的全局 .empty{padding:var(--space-32) var(--space-12)} 冲突，
 * 把 20px 高胶囊标撑成巨大圆框。 */
.technique-grade.technique-grade--none {
    color: var(--text-muted);
    background: var(--bg-glass);
    border-color: var(--border-color);
    opacity: 0.7;
    padding: 0 var(--space-8);
    height: 20px;
    font-size: var(--font-caption);
}

.technique-tag {
    flex: 0 0 auto;
    font-size: var(--font-caption);
    font-weight: 600;
    height: 20px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 32%, var(--border-color, transparent));
}

.grade-普通 {
    background: color-mix(in srgb, var(--rarity-1) 12%, transparent);
    color: var(--rarity-1);
    border-color: color-mix(in srgb, var(--rarity-1) 30%, transparent);
}

.grade-优良 {
    background: color-mix(in srgb, var(--rarity-2) 12%, transparent);
    color: var(--rarity-2);
    border-color: color-mix(in srgb, var(--rarity-2) 30%, transparent);
}

.grade-稀有 {
    background: color-mix(in srgb, var(--rarity-3) 12%, transparent);
    color: var(--rarity-3);
    border-color: color-mix(in srgb, var(--rarity-3) 30%, transparent);
}

.grade-史诗,
.grade-4 {
    background: color-mix(in srgb, var(--rarity-4) 12%, transparent);
    color: var(--rarity-4);
    border-color: color-mix(in srgb, var(--rarity-4) 30%, transparent);
}

.grade-传说,
.grade-5 {
    background: color-mix(in srgb, var(--rarity-5) 12%, transparent);
    color: var(--rarity-5);
    border-color: color-mix(in srgb, var(--rarity-5) 30%, transparent);
}

.grade-1 {
    background: color-mix(in srgb, var(--rarity-1) 12%, transparent);
    color: var(--rarity-1);
    border-color: color-mix(in srgb, var(--rarity-1) 30%, transparent);
}

.grade-2 {
    background: color-mix(in srgb, var(--rarity-2) 12%, transparent);
    color: var(--rarity-2);
    border-color: color-mix(in srgb, var(--rarity-2) 30%, transparent);
}

.grade-3 {
    background: color-mix(in srgb, var(--rarity-3) 12%, transparent);
    color: var(--rarity-3);
    border-color: color-mix(in srgb, var(--rarity-3) 30%, transparent);
}

.technique-desc {
    font-size: var(--font-label);
    color: var(--text-secondary, var(--text-muted));
    margin: 0 0 var(--space-8);
    line-height: 1.55;
}

.technique-origin-effect {
    font-size: var(--font-caption);
    color: var(--text-secondary, var(--text-muted));
    margin: 0 0 var(--space-8);
    line-height: 1.45;
}

.technique-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

.technique-chip {
    /* #6408：勿锁死 height:22px——长规则文案换行会叠成看不清；短文案 nowrap 单行胶囊 */
    min-height: 22px;
    height: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    font-weight: 600;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-jade, var(--success-color, var(--accent-jade)));
    background: color-mix(in srgb, var(--accent-jade, var(--success-color, var(--accent-jade))) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-jade, var(--success-color, var(--accent-jade))) 28%, var(--border-color, transparent));
}

/* 自创技能 · 综合属性行（触发/灵力/等级/经验）：与词条翠色胶囊刻意区分 */
.technique-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6) var(--space-10);
    align-items: center;
    margin: 0 0 var(--space-8);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-card, var(--bg-panel)) 88%, var(--accent-gold, var(--craft-gold)) 12%);
    border: 1px solid color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 16%, var(--border-color, transparent));
}
.technique-meta-pill {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--font-caption);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    line-height: 1.3;
    background: none;
    border: 0;
    padding: 0;
    border-radius: 0;
}
.technique-meta-pill::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: var(--space-2);
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 55%, transparent);
    transform: translateY(-1px);
}
.technique-meta-pill:first-child {
    color: var(--text-gold);
}
.technique-meta-pill:first-child::before {
    background: var(--accent-gold, var(--craft-gold));
}

.technique-subline {
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin: 0 0 var(--space-10);
    line-height: 1.5;
}

.technique-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
    padding-top: var(--space-8);
    border-top: 1px solid color-mix(in srgb, var(--border-color, var(--glass-white-1)) 55%, transparent);
}

/* 卡片底栏操作默认小号（装备/卸下/洗炼一行） */
#techniquePanel .technique-actions .technique-btn {
    height: 26px;
    min-height: 26px;
    padding: 0 var(--space-10);
    font-size: var(--font-caption);
    border-radius: var(--radius-sm);
}

/* 自创技能底栏：主操作 / 次操作 / 排序 分组，避免一长串同款灰钮 */
#techniquePanel .technique-actions--custom {
    gap: var(--space-8);
}
#techniquePanel .technique-actions__group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
}
#techniquePanel .technique-actions__move {
    gap: var(--space-4);
    margin-right: var(--space-2);
    padding-right: var(--space-8);
    border-right: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
#techniquePanel .technique-actions__move .technique-btn {
    width: 26px;
    min-width: 26px;
    padding: 0;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--bg-card, var(--bg-panel)) 70%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 70%, transparent);
}
#techniquePanel .technique-actions__move .technique-btn:not(:disabled):hover {
    color: var(--text-gold);
    border-color: color-mix(in srgb, var(--craft-gold) 40%, var(--border-color));
}
#techniquePanel .technique-actions__primary .technique-btn--jade {
    font-weight: 700;
}
#techniquePanel .technique-actions__primary .technique-btn--wash {
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 36%, var(--border-color, transparent));
    color: var(--text-gold);
}
#techniquePanel .technique-actions__primary .technique-btn--wash:hover {
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 16%, transparent);
}
#techniquePanel .technique-actions__more .technique-btn {
    background: transparent;
    border-color: color-mix(in srgb, var(--border-color) 75%, transparent);
    color: var(--text-secondary);
    font-weight: 500;
}
#techniquePanel .technique-actions__more .technique-btn:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--border-color) 95%, var(--text-muted));
}
#techniquePanel .technique-actions__more .technique-btn--danger {
    color: var(--text-danger, var(--danger-color, #c45c5c));
    border-color: color-mix(in srgb, var(--jimo-crimson, #c45c5c) 35%, var(--border-color, transparent));
}
#techniquePanel .technique-actions__more .technique-btn--danger:hover {
    background: color-mix(in srgb, var(--jimo-crimson, #c45c5c) 12%, transparent);
}

.technique-badge {
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 32%, var(--border-color, transparent));
    padding: 0 var(--space-8);
    height: 22px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
}

.technique-badge--foot {
    height: 32px;
    padding: 0 var(--space-12);
    letter-spacing: 1px;
}

.technique-btn {
    height: 32px;
    min-height: 32px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md);
    font-size: var(--font-label);
    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 ease, border-color 0.12s ease, opacity 0.12s ease;
}

.technique-btn--jade {
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 40%, var(--border-color, transparent));
    color: var(--text-jade, var(--accent-jade, var(--accent-jade)));
}

.technique-btn--jade:hover {
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 18%, transparent);
}

.technique-btn--outline {
    background: transparent;
    border-color: var(--border-color, var(--glass-white-1));
    color: var(--text-secondary, var(--text-muted));
}

.technique-btn--outline:hover {
    border-color: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 40%, var(--border-color, transparent));
    color: var(--text-primary);
}

/* #5680：置顶/上下移等次要操作，与 outline 同族，避免裸 button 无样式 */
.technique-btn--ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--border-color, var(--glass-white-1)) 70%, transparent);
    color: var(--text-muted, var(--text-secondary));
}
.technique-btn--ghost:hover {
    border-color: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 36%, var(--border-color, transparent));
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 6%, transparent);
}

.technique-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.technique-btn:disabled:hover {
    background: transparent;
    border-color: var(--border-color, var(--glass-white-1));
    color: var(--text-secondary, var(--text-muted));
}

.technique-btn--sm {
    height: 26px;
    min-height: 26px;
    padding: 0 var(--space-10);
    font-size: var(--font-caption);
    border-radius: var(--radius-sm);
}

.technique-btn--danger {
    background: transparent;
    border-color: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 40%, var(--border-color, transparent));
    color: var(--accent-crimson, var(--accent-crimson));
}
.technique-btn--danger:hover {
    background: color-mix(in srgb, var(--accent-crimson, var(--accent-crimson)) 10%, transparent);
}

/* 旧 btn-sm 仍用于自创技能区「创建」等入口 */
.btn-sm {
    padding: var(--space-4) var(--space-10);
    font-size: var(--font-caption);
    border: none;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.2s;
}

.technique-empty {
    font-size: var(--font-label);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-12);
}

.sect-art-tip-inline {
    margin: 0 0 var(--space-10);
    padding: var(--space-10);
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 28%, var(--border-color, transparent));
    border-radius: var(--radius-md);
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.7;
}

.sect-art-tip-inline[hidden] {
    display: none !important;
}

.technique-item .custom-affix-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0 0 var(--space-8);
}

/* 一键本源：范围横排分段 + 目标本源下拉 */
.directed-element-filter-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-6);
    width: 100%;
    margin: 0 0 var(--space-4);
}
.directed-element-filter-btn {
    flex: 1 1 0;
    min-width: 0;
    /* 与 eql-skill-link__select 一致：可见可点至少 44 */
    min-height: 44px;
    padding: 0 var(--space-8);
    border: 1px solid color-mix(in srgb, var(--accent-gold, var(--text-gold)) 32%, var(--border-color));
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-secondary, var(--text-muted));
    font-size: var(--font-label);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}
.directed-element-filter-btn:hover {
    color: var(--text-gold, var(--accent-gold));
    border-color: color-mix(in srgb, var(--accent-gold, var(--text-gold)) 48%, var(--border-color));
}
.directed-element-filter-btn.is-active,
.directed-element-filter-btn[data-active="1"] {
    color: var(--text-gold, var(--accent-gold));
    background: color-mix(in srgb, var(--accent-gold, var(--text-gold)) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold, var(--text-gold)) 52%, var(--border-color));
}
.directed-element-select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    margin: 0;
}

/* FB4326 自创词条：默认全部以翠色 technique-chip 胶囊展示 shortDesc */
/* 换行间距按胶囊高度排，勿用 44 高把行距撑空（词条胶囊可见高 22） */
.custom-affix-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin: 0 0 var(--space-8);
}
.custom-affix-detail-trigger,
.custom-affix-detail-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 视觉贴合 22 高胶囊；命中区用伪元素外扩到约 44，避免行与行之间大块空白 */
    min-height: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}
.custom-affix-detail-trigger {
    appearance: none;
    position: relative;
    min-width: 0;
    cursor: pointer;
}
/* 扩大可点区域但不占用 flex 行高（高密度词条列表；上下收窄避免侵入相邻胶囊） */
.custom-affix-detail-trigger::before {
    content: "";
    position: absolute;
    /* 上下各扩 space-6 → 约 34–40 命中，配合左右扩仍可点；gap 4/6 列表不误触 */
    top: calc(-1 * var(--space-6));
    bottom: calc(-1 * var(--space-6));
    left: calc(-1 * var(--space-4));
    right: calc(-1 * var(--space-4));
}
.custom-affix-detail-trigger:focus-visible {
    outline: 2px solid var(--accent-jade);
    outline-offset: var(--space-2);
    border-radius: var(--radius-pill);
}
.custom-affix-detail-trigger:hover .custom-affix-slot {
    border-color: color-mix(in srgb, var(--accent-jade) 52%, var(--border-color));
    background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
}
.custom-affix-detail-overlay .gc-detail__v {
    min-width: 0;
    overflow-wrap: anywhere;
}
@media (max-width: 640px) {
    .custom-affix-detail-overlay .gc-detail__row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }
    .custom-affix-detail-overlay .gc-detail__v { text-align: left; }
}
.custom-affix-list .technique-chip,
.custom-affix-slot {
    display: inline-flex;
    align-items: center;
    height: 22px;
    min-height: 22px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-pill);
    font-size: var(--font-caption);
    font-weight: 600;
    line-height: 1.2;
    max-width: 100%;
    color: var(--text-jade, var(--accent-jade, var(--accent-jade)));
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 28%, var(--border-color, transparent));
    white-space: nowrap;
}
.custom-affix-slot.empty,
.technique-chip.technique-chip--empty {
    color: var(--text-muted);
    border-color: var(--border-color, var(--glass-white-1));
    background: var(--bg-glass, var(--glass-white-2));
    font-weight: 500;
    border-style: solid;
}
/* 旧 grade 色统一归翠胶囊，避免三色抢戏 */
.custom-affix-slot.grade-3,
.custom-affix-slot.grade-2,
.custom-affix-slot.grade-1 {
    color: var(--text-jade, var(--accent-jade, var(--accent-jade)));
    border-color: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 28%, var(--border-color, transparent));
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 10%, transparent);
}

/* 自创技能弹窗；排除 gc-dialog / 公共头 gc-head（B顶×C中确认壳自管 padding）
   注意：:has() 不得与 .gc-dialog 写在同一逗号选择器列表——旧 WebKit 不支持 :has 时会整条丢弃，
   连合法的 .gc-dialog { padding:0 } 也会失效。 */
.modal--decorated.gc-dialog {
    padding: 0;
}
/* 以下含 :has 的规则仅现代浏览器生效；旧机回落 inventory 的 .modal--decorated { padding:0 } */
.modal--decorated:not(.gc-dialog):not(:has(> .modal-header-deco)):not(:has(> .gc-head)) {
    padding: var(--space-16) var(--space-20);
}
.modal--decorated:has(> .modal-header-deco),
.modal--decorated:has(> .gc-head) {
    padding: 0;
}
.modal--decorated h4 {
    margin: 0 0 var(--space-16);
    color: var(--text-gold, var(--craft-gold-bright));
    font-family: var(--font-serif, serif);
    font-size: var(--font-action);
    letter-spacing: 2px;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--craft-gold-bright) 15%, transparent);
    padding-bottom: var(--space-12);
}
.modal--decorated label {
    display: block;
    color: var(--text-muted, #888);
    font-size: var(--font-label);
    margin-bottom: var(--space-4);
    letter-spacing: 0.5px;
}
.modal--decorated select,
.modal--decorated input[type="text"] {
    width: 100%;
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-14);
    background: var(--bg-card, color-mix(in srgb, var(--ghost-purple-dark) 20%, black));
    color: var(--text-primary, color-mix(in srgb, var(--bg-card) 80%, var(--craft-gold-soft)));
    border: 1px solid var(--border-color, color-mix(in srgb, var(--ghost-purple-dark) 30%, var(--bg-primary)));
    border-radius: var(--radius-md);
    font-size: var(--font-body);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s;
}
.modal--decorated select:focus,
.modal--decorated input[type="text"]:focus {
    border-color: var(--accent-gold, var(--craft-gold-bright));
}
/* ===== 自创技能洗炼弹窗（对齐炼造弹窗设计语言）=====
   洗炼主弹窗 overlay 复用 craft-modal-overlay 的 token 与宽度体系，
   与炼造/炼器/制符弹窗视觉同源。 */
.wash-modal-overlay,
.wash-modal-overlay .modal-content {
    --craft-modal-line: var(--border-color);
    --craft-modal-line-strong: color-mix(in srgb, var(--accent-gold) 42%, var(--border-color));
}
.wash-modal-overlay .modal-content {
    width: min(94vw, 720px);
    max-width: 720px;
    border: 1px solid var(--craft-modal-line-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card-hover) 18%, transparent), transparent 36%),
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent-gold) 10%, transparent), transparent 34%),
        var(--bg-panel);
    box-shadow: var(--shadow-md);
}
/* 外壳宽高已交还 game-dialog.css 登记档(wide 720 / 手机与 is-mobile 均回收 392) */

/* ===== 槽位清单（手机 C 双态 / 电脑 D3 点选） ===== */
.cs-wash-slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: 0;
}
.cs-wash-slot {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color, color-mix(in srgb, var(--ghost-purple-dark) 30%, var(--bg-primary)));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
    overflow: hidden;
}
.cs-wash-slot:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-gold) 5%, var(--bg-card));
}
.cs-wash-slot.is-empty { border-style: dashed; }
.cs-wash-slot.is-on {
    border-color: color-mix(in srgb, var(--accent-gold) 48%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 16%, transparent) inset;
}
.cs-wash-slot__row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 18px;
    gap: var(--space-8);
    align-items: center;
    min-width: 0;
    min-height: var(--pattern-touch-target);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.cs-wash-slot__row:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: var(--space-2);
}
.cs-wash-slot-idx {
    color: var(--text-muted, #888);
    font-size: var(--font-body);
    min-width: 16px;
    opacity: 0.75;
    text-align: center;
    font-family: var(--font-display, KaiTi, serif);
    font-weight: 600;
}
.cs-wash-slot-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
}
.cs-wash-slot-desc {
    display: block;
    font-size: var(--font-body);
    color: var(--text-primary);
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 500;
}
.cs-wash-slot-desc.muted,
.cs-wash-slot-desc:empty { color: var(--text-muted); font-weight: 400; }
.cs-wash-slot-desc.grade-3 { color: var(--craft-gold, var(--text-gold)); }
.cs-wash-slot-desc.grade-2 { color: var(--text-jade, #4f8a4f); }
.cs-wash-slot-desc.grade-1 { color: var(--accent-cyan, #3a8a9a); }
.cs-wash-slot-rule {
    display: block;
    font-size: var(--font-caption);
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.45;
}
.cs-wash-slot-rule b { color: var(--text-muted); font-weight: 600; }
/* #6264 图2：定向词条卡——纵向堆叠标题/来源/叠加规则，禁止被 modal-action-btn 默认 row 挤成竖排字 */
.directed-affix-hint {
    margin-bottom: var(--space-10);
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.65;
}
.directed-affix-hint__em {
    color: var(--text-gold);
    font-weight: 600;
}
.directed-affix-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.directed-affix-pick.modal-action-btn,
button.directed-affix-pick {
    flex: 1 1 calc(50% - var(--space-8));
    min-width: min(100%, 148px);
    max-width: 100%;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-6);
    text-align: left;
    white-space: normal;
    height: auto;
    min-height: var(--pattern-control-height-comfortable, 44px);
    box-sizing: border-box;
    cursor: pointer;
}
.directed-affix-pick__head {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-6);
    min-width: 0;
    width: 100%;
}
.directed-affix-pick__name {
    font-weight: 600;
    font-size: var(--font-body);
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.directed-affix-pick__cat {
    font-size: var(--font-micro);
    color: var(--text-muted);
    flex-shrink: 0;
}
/* #10581：词条效果速览一行，弱化展示不抢名称 */
.directed-affix-pick__hint {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: var(--font-micro);
    line-height: 1.4;
    color: var(--text-secondary);
    text-align: left;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* #10625 熔诀：勾选框与落槽下拉 */
.fuse-affix-row .fuse-box {
    width: 16px; height: 16px; border-radius: 4px;
    border: 1px solid var(--border-color);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 11px; color: var(--text-gold);
}
.fuse-affix-row.is-on .fuse-box {
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
    border-color: var(--border-gold);
}
.fuse-affix-row.is-on .fuse-box::after { content: '✓'; }
.fuse-affix-row .fuse-target { margin-left: auto; flex-shrink: 0; }
.fuse-affix-row .fuse-target select {
    max-width: 150px; height: 28px; font-size: var(--font-caption);
    padding: 0 6px; color: var(--text-secondary);
    background: var(--bg-panel); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.fuse-bill {
    margin-top: var(--space-10); padding: var(--space-8) var(--space-12);
    border: 1px dashed var(--border-gold); border-radius: var(--radius-sm);
    font-size: var(--font-label); line-height: 1.8; color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent-gold) 5%, transparent);
}
.fuse-bill b { color: var(--text-gold); font-weight: 600; }
.fuse-dialog .gc-mid { max-height: 62vh; overflow-y: auto; }
.directed-affix-pick .cs-wash-max-val,
.directed-affix-pick .cs-wash-slot-rule {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
}
/* 极窄屏：单列全宽，避免双列仍过窄 */
@media (max-width: 420px) {
    .directed-affix-pick.modal-action-btn,
    button.directed-affix-pick {
        flex: 1 1 100%;
        min-width: 100%;
    }
}
/* 电脑 D3：右侧圆点选中态；手机 C：展开提示 */
.cs-wash-slot__mark {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    justify-self: end;
    flex-shrink: 0;
}
.cs-wash-slot.is-on .cs-wash-slot__mark {
    border-color: var(--accent-gold);
    background: var(--accent-gold);
    box-shadow: inset 0 0 0 3px var(--bg-card, #fff);
}
/* 默认隐藏操作行：手机 is-on 展开 / 电脑始终隐藏（洗炼在右侧） */
.cs-wash-slot__ops {
    display: none;
    align-items: center;
    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) 70%, transparent);
}
.wash-dialog.is-mobile .cs-wash-slot.is-on .cs-wash-slot__ops {
    display: flex;
}
.wash-dialog.is-mobile .cs-wash-slot.is-on .cs-wash-slot__mark {
    /* 手机用「展开」字感：隐藏圆点，改用伪文案可选；保留圆点也可 */
    opacity: 0.9;
}
.ops-spacer { flex: 1; }
/* 词条分类色丸（攻/防/辅），一眼分类 */
.cs-wash-cat-pill {
    display: inline-block;
    font-size: var(--font-micro);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    margin-right: var(--space-8);
    letter-spacing: 0.5px;
    vertical-align: 1px;
    font-weight: 600;
}
/* 词条"本品质最大值"小标签：低调次要色，不抢主词条视觉 */
.cs-wash-max-val {
    display: block;
    font-size: var(--font-caption);
    color: var(--text-muted, #888);
    line-height: 1.4;
    font-weight: normal;
}
/* 洗炼误点撤销提示条 */
.cs-wash-revert-hint {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-10) var(--space-12);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 32%, transparent);
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 7%, transparent), transparent 62%),
        color-mix(in srgb, var(--bg-card-hover) 24%, transparent);
    font-size: var(--font-label);
    color: var(--text-secondary, #ccc);
    line-height: 1.5;
}
.cs-wash-revert-hint__text { flex: 1; }
.cs-wash-revert-hint__icon { color: var(--accent-gold, var(--craft-gold)); font-weight: bold; }
.cs-wash-revert-hint .modal-btn--sm { min-width: 56px; padding: var(--space-4) var(--space-12) !important; font-size: var(--font-label) !important; margin: 0 !important; }
.cs-wash-btn {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 48px;
    padding: var(--space-4) var(--space-10) !important;
    font-size: var(--font-label) !important;
    margin-top: 0 !important;
    border: 1px solid var(--border-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: var(--text-gold);
    border-radius: var(--radius-xs);
    transition: background 0.15s;
    white-space: nowrap;
}
.cs-wash-btn:hover { background: color-mix(in srgb, var(--accent-gold) 16%, transparent); }
/* #10983 十连选牌格 */
.cs-wash-batch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-6);
}
.cs-wash-batch-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-label);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.cs-wash-batch-card:hover {
    border-color: var(--border-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
}
.cs-wash-batch-card__idx {
    font-size: var(--font-micro);
    color: var(--text-muted);
}
.cs-wash-batch-card__desc {
    line-height: 1.5;
    word-break: break-all;
}
.cs-wash-batch-card__max { font-size: var(--font-micro); }
.cs-wash-batch-card__max .wash-max-tag { margin-left: 0; }
/* 定向：次要描边，与主洗炼区分，避免双钮并排抢视觉 */
.cs-wash-btn--directed {
    min-width: 44px;
    padding: var(--space-4) var(--space-8) !important;
    border-color: color-mix(in srgb, var(--border-color) 80%, var(--border-gold));
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
    color: var(--text-secondary, var(--text-muted));
}
.cs-wash-btn--directed:hover {
    border-color: var(--border-gold);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-gold);
}

/* 槽位上下移动按钮组：低调次要色，不抢"洗炼"主操作视觉 */
.cs-wash-move {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-left: 0;
    margin-right: 0;
}
.cs-wash-move-btn {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0 !important;
    line-height: 1;
    font-size: var(--font-caption) !important;
    border: 1px solid var(--border-soft, var(--glass-white-1));
    background: color-mix(in srgb, var(--text-muted, #888) 10%, transparent);
    color: var(--text-muted, #888);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.cs-wash-move-btn:hover {
    background: color-mix(in srgb, var(--accent-gold, var(--craft-gold)) 18%, transparent);
    color: var(--text-gold, var(--craft-gold));
    border-color: var(--border-gold, color-mix(in srgb, var(--craft-gold-bright) 40%, transparent));
}

/* 洗炼石列表 */
.wash-stone-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.wash-stone-grid .wash-stone-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    padding: 0 var(--space-10) !important;
    font-size: var(--font-label);
    line-height: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    gap: var(--space-8);
}
.wash-stone-btn__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wash-stone-btn__qty {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: 0.85;
    flex-shrink: 0;
}
.wash-stone-grid .wash-stone-btn[data-active="1"] {
    border-color: var(--text-gold) !important;
    color: var(--text-gold) !important;
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent) !important;
    box-shadow: 0 0 0 1px var(--text-gold) inset;
    font-weight: 600;
}
.wash-stone-empty {
    font-size: var(--font-label);
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-10) var(--space-8);
}

/* 洗炼方向 */
.wash-category-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}
.wash-category-grid--compact {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}
.wash-category-grid .wash-category-btn {
    min-height: 44px;
    align-items: flex-start;
    text-align: left;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    padding: var(--space-8) var(--space-8) !important;
}
.wash-category-grid--compact .wash-category-btn {
    min-height: 32px;
    align-items: center;
    text-align: center;
    padding: var(--space-6) var(--space-4) !important;
}
.wash-category-btn .cat-name { font-weight: 600; font-size: var(--font-label); }
.wash-category-btn .cat-desc { font-size: var(--font-micro); color: var(--text-muted); font-weight: normal; line-height: 1.3; margin-top: var(--space-2); }
.wash-category-grid--compact .wash-category-btn .cat-desc { display: none; }
.wash-category-grid .wash-category-btn[data-active="1"] {
    border-color: var(--text-gold) !important;
    color: var(--text-gold) !important;
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent) !important;
    box-shadow: 0 0 0 1px var(--text-gold) inset;
    font-weight: 600;
}
.wash-category-btn[data-active="1"] .cat-desc { color: var(--text-gold); opacity: 0.85; }

.wash-stone-foot {
    margin-top: var(--space-8);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
}
.wash-stone-foot__note { font-size: var(--font-caption); color: var(--text-muted); line-height: 1.4; flex: 1; min-width: 0; }

/* ── C/D3 布局骨架 ── */
.wash-mid { display: flex; flex-direction: column; gap: 0; min-height: 0; }
.wash-sec__h {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--text-gold);
    letter-spacing: 0.08em;
    margin: 0 0 var(--space-8);
}
.wash-sec__h .note {
    font-weight: 400;
    font-size: var(--font-caption);
    color: var(--text-muted);
    letter-spacing: 0;
}
.wash-mat-strip {
    display: none;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) var(--space-10);
    margin-bottom: var(--space-10);
    border-radius: var(--radius-md, var(--radius-md));
    border: 1px solid color-mix(in srgb, var(--accent-gold) 32%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card));
}
.wash-mat-strip__lab {
    font-size: var(--font-micro);
    color: var(--text-muted);
    letter-spacing: 0.1em;
    flex-shrink: 0;
}
.wash-mat-strip__val {
    flex: 1;
    min-width: 0;
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-gold);
}
.wash-mat-strip__val span { font-weight: 500; font-size: var(--font-caption); color: var(--text-muted); margin-left: var(--space-2); }
.wash-mat-strip__act {
    flex-shrink: 0;
    height: 26px;
    padding: 0 var(--space-10);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    font-size: var(--font-caption);
    color: var(--text-secondary);
    cursor: pointer;
}
.wash-split {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    flex: 1 1 auto;
}
.wash-main { min-width: 0; }
.wash-side {
    display: none;
    flex-direction: column;
    gap: var(--space-12);
    min-width: 0;
    padding: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, var(--radius-lg));
    background: color-mix(in srgb, var(--bg-panel) 85%, transparent);
}
.wash-side-block + .wash-side-block {
    padding-top: var(--space-10);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}
.wash-pick {
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-md, var(--radius-md));
    border: 1px solid color-mix(in srgb, var(--accent-gold) 28%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 7%, var(--bg-card));
}
.wash-pick__lab { font-size: var(--font-micro); color: var(--text-muted); letter-spacing: 0.08em; }
.wash-pick__val { margin-top: var(--space-4); font-size: var(--font-body); font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.wash-pick__gan { color: var(--text-muted); font-family: var(--font-display, KaiTi, serif); }
.wash-side-actions {
    display: flex;
    gap: var(--space-8);
    margin-top: auto;
    padding-top: var(--space-4);
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
}
.wash-side-actions .wash-side-dir { flex: 0 0 auto; height: 38px; padding: 0 var(--space-14) !important; }
.wash-side-actions .wash-side-wash {
    flex: 1;
    height: 38px;
    padding: 0 var(--space-16) !important;
    font-size: var(--font-body) !important;
}
.wash-order-bar {
    display: none;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-10);
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.wash-order-bar .cs-wash-move-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.wash-disc {
    margin-top: var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, var(--radius-md));
    padding: var(--space-8) var(--space-10);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.5;
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
}
.wash-disc + .wash-disc { margin-top: var(--space-8); }
.wash-disc summary {
    cursor: pointer;
    list-style: none;
    color: var(--text-secondary);
    font-weight: 500;
    user-select: none;
}
.wash-disc summary::-webkit-details-marker { display: none; }
.wash-disc summary::before { content: "▸ "; color: var(--text-muted); }
.wash-disc[open] summary::before { content: "▾ "; }
.wash-disc .wash-stone-grid { margin-top: var(--space-8); }
.wash-stone-grid--in-disc { grid-template-columns: 1fr 1fr; }

/* 分端显隐：默认按电脑 D3；.is-mobile 切手机 C */
.wash-note--m,
.wash-m-only { display: none; }
.wash-note--d,
.wash-d-only { display: block; }

/* 电脑 D3 */
.wash-dialog:not(.is-mobile) .wash-split {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 1fr);
    gap: var(--space-14);
    align-items: stretch;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.wash-dialog:not(.is-mobile) .wash-main {
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--space-2);
}
.wash-dialog:not(.is-mobile) .wash-side {
    display: flex;
    min-height: 0;
    overflow-y: auto;
}
.wash-dialog:not(.is-mobile) .wash-order-bar { display: flex; }
.wash-dialog:not(.is-mobile) .wash-mat-strip { display: none; }
.wash-dialog:not(.is-mobile) .cs-wash-slot__ops { display: none !important; }
.wash-dialog:not(.is-mobile) .wash-m-only { display: none !important; }
.wash-dialog:not(.is-mobile) .wash-d-only { display: block; }
.wash-dialog:not(.is-mobile) .wash-note--d { display: inline; }
.wash-dialog:not(.is-mobile) .wash-note--m { display: none; }

/* 手机 C */
.wash-dialog.is-mobile .wash-mat-strip { display: flex; }
.wash-dialog.is-mobile .wash-side { display: none !important; }
.wash-dialog.is-mobile .wash-order-bar { display: none !important; }
.wash-dialog.is-mobile .wash-m-only { display: block; }
.wash-dialog.is-mobile .wash-d-only { display: none !important; }
.wash-dialog.is-mobile .wash-note--m { display: inline; }
.wash-dialog.is-mobile .wash-note--d { display: none; }
.wash-dialog.is-mobile .wash-stone-foot { flex-direction: column; align-items: stretch; }
.wash-dialog.is-mobile .wash-stone-foot .modal-btn { width: 100%; }
.wash-dialog.is-mobile .cs-wash-move-btn { width: 28px; height: 28px; }
.wash-dialog.is-mobile .cs-wash-btn { min-width: 48px; height: 30px; }

/* ============================================================ */
/* ===== 自创技能洗炼主面板 · gc-dialog 迁移补充样式          ===== */
/* 旧 modal-header-deco / modal-body-padded 已废弃，外壳由     */
/* gc-dialog(gc-head/gc-mid) 接管。这里只补迁移后新增的分区   */
/* 样式与移动端重组覆盖，业务卡 cs-wash-* / wash-* 不动。     */
/* ============================================================ */

/* 弹窗标记：洗炼主面板。
   宽度由 .wash-modal-overlay .modal-content (min(94vw,620px)) 接管，这里不重复。
   仅作 CSS 钩子，供移动端重组（.is-mobile）与内边距覆盖使用。 */

/* gc-mid 内无 gc-foot 时自带 16px 底部留白（避免末张卡贴底）；
   覆盖 gc-dialog 默认 padding-bottom:var(--space-4)（那是为 foot 留的缓冲） */
.modal-content.wash-dialog > .gc-mid {
    padding-bottom: var(--space-16);
}

/* 副标题（gc-title 下方那行说明） */
.modal-content.wash-dialog .gc-title__sub {
    margin-top: var(--space-4);
    font-size: var(--font-label);
    color: var(--text-muted);
    letter-spacing: 1px;
    font-weight: 400;
    line-height: 1.5;
}

/* 分区卡标题内的 note 副提示（替代旧内联 style） */
.modal-content.wash-dialog .modal-info-card__title .note {
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-weight: normal;
    margin-left: var(--space-6);
    letter-spacing: 0;
}

/* 仙缘定向说明面板（替代旧内联 style） */
.modal-content.wash-dialog .directed-wash-panel {
    font-size: var(--font-label);
    line-height: 1.7;
    color: var(--text-muted);
}

/* 概率公示折叠区（替代旧内联 style；display:none 由 JS toggleWashProb 控制） */
.modal-content.wash-dialog .wash-prob-title { cursor: pointer; user-select: none; }
.modal-content.wash-dialog .wash-prob-body { margin-top: var(--space-8); font-size: var(--font-label); line-height: 1.8; }

/* 属性溢出警告：共享 danger 基元（替代旧大段内联 rgba style） */
.wash-overflow-warn {
    margin-top: var(--space-10);
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-sm);
    font-size: var(--font-caption);
    line-height: 1.6;
    color: var(--text-danger);
    background: rgba(183, 58, 49, 0.08);
    border: 1px solid rgba(183, 58, 49, 0.28);
}
.wash-overflow-warn__title { display: block; font-weight: 600; letter-spacing: 1px; margin-bottom: var(--space-4); }
.wash-overflow-warn__row { padding-left: var(--space-8); }
.wash-overflow-warn__row .muted { color: var(--text-muted); font-size: var(--font-micro); }
.wash-overflow-warn__hint { margin-top: var(--space-6); color: var(--text-muted); font-size: var(--font-micro); font-style: italic; }

/* 手机 C 头/中区收紧 */
.modal-content.wash-dialog.is-mobile > .gc-head { padding: var(--space-14) var(--space-48) 0 var(--space-14); }
.modal-content.wash-dialog.is-mobile .gc-title { font-size: var(--font-title); letter-spacing: 1.5px; }
.modal-content.wash-dialog.is-mobile > .gc-mid { padding: var(--space-12) var(--space-12) var(--space-14); }
.modal-content.wash-dialog.is-mobile .cs-wash-slot { padding: var(--space-10) var(--space-10); }
.modal-content.wash-dialog.is-mobile .cs-wash-revert-hint { padding: var(--space-8) var(--space-10); font-size: var(--font-caption); gap: var(--space-8); }

/* 电脑 D3 中区：双栏吃满高度，侧栏可滚 */
.modal-content.wash-dialog:not(.is-mobile) > .gc-mid.wash-mid {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: min(72dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 88px), 560px);
    overflow: hidden;
    padding-bottom: var(--space-12);
}

/* 隐藏滚动条但保留滚动（弹窗内 gc-mid + 整个壳） */
.modal-content.wash-dialog,
.modal-content.wash-dialog .gc-mid {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal-content.wash-dialog::-webkit-scrollbar,
.modal-content.wash-dialog .gc-mid::-webkit-scrollbar {
    display: none;
}

/* ===== 洗炼确认弹窗：旧→新对比块 + 三档分层按钮 ===== */
.wash-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: stretch;
    margin: 0;
}
.wash-compare__side {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-14) var(--space-12);
    text-align: center;
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 78px;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}
.wash-compare__side--old { border-color: color-mix(in srgb, var(--text-muted) 25%, transparent); }
.wash-compare__side--new { border-color: var(--border-gold); background: color-mix(in srgb, var(--accent-gold) 6%, transparent); }
.wash-compare__label { color: var(--text-gray); font-size: var(--font-caption); letter-spacing: 2px; display: block; margin-bottom: var(--space-6); font-family: var(--font-display, KaiTi, serif); }
.wash-compare__side--old .wash-compare__label { color: var(--text-gray); }
.wash-compare__side--new .wash-compare__label { color: var(--text-gold); }
.wash-compare__name { color: var(--text-green-light); font-family: var(--font-display, KaiTi, serif); font-size: var(--font-title); font-weight: bold; line-height: 1.3; display: block; }
.wash-compare__side--new .wash-compare__name { color: var(--text-orange); }
.wash-compare__max { font-size: var(--font-micro); color: var(--text-muted); display: block; margin-top: var(--space-4); letter-spacing: 0.5px; }
.wash-compare__rule {
    display: block;
    margin-top: var(--space-6);
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: left;
    overflow-wrap: anywhere;
}
.wash-compare__arrow { justify-self: center; align-self: center; color: var(--text-gold); font-size: var(--font-heading); font-family: var(--font-display, KaiTi, serif); opacity: 0.7; line-height: 1; }
/* 趋势徽章：▲ 更佳 / ▼ 略逊 / ＝ 持平 */
.wash-compare__trend {
    position: absolute;
    top: -9px;
    right: 8px;
    font-size: var(--font-micro);
    padding: var(--space-2) var(--space-8);
    border-radius: var(--radius-pill);
    letter-spacing: 0.5px;
    font-weight: bold;
}
.wash-compare__trend--up { background: color-mix(in srgb, var(--success-color) 14%, transparent); color: var(--text-green-light); border: 1px solid color-mix(in srgb, var(--success-color) 30%, transparent); }
.wash-compare__trend--down { background: color-mix(in srgb, var(--accent-crimson) 12%, transparent); color: var(--text-red); border: 1px solid color-mix(in srgb, var(--accent-crimson) 28%, transparent); }
.wash-compare__trend--same { background: color-mix(in srgb, var(--text-muted) 12%, transparent); color: var(--text-gray); border: 1px solid color-mix(in srgb, var(--text-muted) 25%, transparent); }
/* 坏结果时新词条侧转红 */
.wash-compare__side--bad { border-color: color-mix(in srgb, var(--accent-crimson) 28%, transparent); background: color-mix(in srgb, var(--accent-crimson) 5%, transparent); }
.wash-compare__side--bad .wash-compare__label { color: var(--text-red); }
.wash-compare__side--bad .wash-compare__name { color: var(--text-red); }
/* 兼容：旧版 wash-compare__side 内 strong 样式 */
.wash-compare__side strong { color: var(--text-green-light); }

/* 确认弹窗三档分层按钮 */
.wc-actions { display: flex; flex-direction: column; gap: var(--space-10); }
.wc-actions__primary { }
.wc-actions__secondary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.wc-actions__paid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px dashed color-mix(in srgb, var(--accent-orange) 20%, transparent);
}
.wc-actions__paid .modal-btn--orange { flex: 0 0 auto; padding: var(--space-8) var(--space-14); font-size: var(--font-body); }
.wc-cost-note { font-size: var(--font-caption); color: var(--text-muted); letter-spacing: 0.5px; }
.wc-cost-note b { color: var(--accent-orange); }

.natal-type-btn[data-active="1"]::after {
    content: "已选";
    align-self: flex-end;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--craft-gold) 22%, transparent);
    color: var(--text-gold);
    font-size: var(--font-micro);
    line-height: 1.4;
}

.natal-artifact-slot {
    margin: var(--space-8) 0;
}
.natal-artifact-card {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}
.natal-artifact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    min-width: 0;
    width: 100%;
}
.natal-artifact-card .equip-name-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
}
.natal-artifact-desc {
    color: var(--text-muted);
    font-size: var(--font-label);
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: break-word;
}
.natal-artifact-cost-title {
    font-size: var(--font-label);
    color: var(--text-gray);
    line-height: 1.45;
}
.natal-artifact-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-6);
    min-width: 0;
    max-width: 100%;
}
.natal-artifact-btn {
    min-width: 0;
}
.natal-artifact-detail {
    padding: var(--space-2) var(--space-12) var(--space-8);
}
.natal-overdrive-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    margin: var(--space-2) 0 var(--space-8);
    padding: var(--space-10) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--craft-gold) 18%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--craft-gold) 6%, transparent);
}
.natal-overdrive-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.natal-overdrive-copy b {
    color: var(--text-gold);
    font-size: var(--font-label);
    line-height: 1.35;
}
.natal-overdrive-copy span {
    color: var(--text-muted);
    font-size: var(--font-caption);
    line-height: 1.45;
}
.natal-overdrive-switch {
    flex-shrink: 0;
}

/* 超限催动代价三签：玉青=灵力 / 紫=神识 / 朱砂=寿命，选中签金框 */
.natal-overdrive-costs {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}
.natal-overdrive-cost {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card, transparent);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.16s ease, background-color 0.16s ease;
}
.natal-overdrive-cost:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
}
.natal-overdrive-cost.is-sel {
    border-color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--bg-card, transparent));
    box-shadow: inset 0 0 0 1px var(--accent-gold);
}
.natal-overdrive-cost__top {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
}
.natal-overdrive-cost__glyph {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-style: normal;
    font-size: var(--font-micro);
    line-height: 1;
    font-weight: 600;
}
.natal-overdrive-cost.is-jade .natal-overdrive-cost__glyph {
    color: var(--accent-jade);
    background: color-mix(in srgb, var(--accent-jade) 14%, transparent);
}
.natal-overdrive-cost.is-purple .natal-overdrive-cost__glyph {
    color: var(--accent-purple, var(--accent-gold));
    background: color-mix(in srgb, var(--accent-purple, var(--accent-gold)) 14%, transparent);
}
.natal-overdrive-cost.is-crimson .natal-overdrive-cost__glyph {
    color: var(--status-danger, var(--accent-gold));
    background: color-mix(in srgb, var(--status-danger, var(--accent-gold)) 12%, transparent);
}
.natal-overdrive-cost__name {
    font-size: var(--font-caption);
    line-height: 1;
    font-weight: 600;
    color: var(--text-primary);
}
.natal-overdrive-cost.is-sel .natal-overdrive-cost__name {
    color: var(--text-gold);
}
.natal-overdrive-cost__rule {
    font-size: var(--font-micro);
    line-height: 1.3;
    color: var(--text-muted);
}
.natal-overdrive-cost__est {
    font-size: var(--font-caption);
    line-height: 1;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.natal-overdrive-cost.is-sel .natal-overdrive-cost__est {
    color: var(--text-gold);
}

.natal-overdrive-ratio {
    width: 100%;
    margin-top: var(--space-10);
    padding-top: var(--space-10);
    border-top: 1px solid var(--border-color, var(--ghost-purple-dark));
}
.natal-overdrive-ratio__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
    font-size: var(--font-label);
    color: var(--text-secondary);
}
.natal-overdrive-ratio__head b {
    color: var(--text-primary);
    font-weight: 600;
}
.natal-overdrive-ratio__slider {
    width: 100%;
    accent-color: var(--accent-gold);
    height: 28px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}
/* #9773 催动比例数字输入框（与滑条双向同步） */
.natal-overdrive-ratio__edit {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--text-muted);
}
.natal-overdrive-ratio__input {
    width: 72px;
    padding: var(--space-2) var(--space-6);
    font-size: var(--font-label);
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xs);
    -moz-appearance: textfield;
    appearance: textfield;
}
.natal-overdrive-ratio__input::-webkit-outer-spin-button,
.natal-overdrive-ratio__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.natal-overdrive-ratio__input:focus {
    outline: none;
    border-color: var(--accent-gold);
}
.natal-overdrive-ratio__slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--radius-xs);
    background: linear-gradient(
        to right,
        var(--accent-gold) 0%,
        var(--accent-gold) var(--natal-overdrive-fill, 0%),
        var(--border-color) var(--natal-overdrive-fill, 0%),
        var(--border-color) 100%
    );
}
.natal-overdrive-ratio__slider::-moz-range-track {
    height: 4px;
    border-radius: var(--radius-xs);
    background: var(--border-color);
}
.natal-overdrive-ratio__slider::-moz-range-progress {
    height: 4px;
    border-radius: var(--radius-xs);
    background: var(--accent-gold);
}
.natal-overdrive-ratio__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--accent-gold);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 6px color-mix(in srgb, var(--craft-gold) 40%, transparent);
}
.natal-overdrive-ratio__slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-gold);
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 6px color-mix(in srgb, var(--craft-gold) 40%, transparent);
}
.natal-overdrive-ratio__hint {
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.5;
}

.natal-artifact-stats-line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    font-size: var(--font-label);
    line-height: 1.55;
}
.natal-artifact-stats-line span {
    color: var(--text-gray);
    flex: none;
}
.natal-artifact-stats-line b {
    color: var(--text-jade);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}
.natal-artifact-materials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}
.natal-artifact-materials span {
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-6);
    font-size: var(--font-caption);
    font-weight: 600;
    border: 1px solid transparent;
}
.natal-type-list .modal-action-btn__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}
.natal-type-list small {
    color: var(--text-muted);
    font-size: var(--font-caption);
    font-weight: 400;
}
.natal-type-btn[data-active="1"] {
    border-color: var(--text-gold) !important;
    color: var(--text-gold) !important;
    background: color-mix(in srgb, var(--craft-gold) 18%, transparent) !important;
    box-shadow: 0 0 0 1px var(--text-gold) inset;
}
.modal-input {
    background: var(--shadow-black-2);
    border: 1px solid var(--glass-white-1);
    border-radius: var(--radius-sm);
    color: var(--text-light);
    font: inherit;
    padding: var(--space-10) var(--space-10);
}
.modal-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--craft-gold) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--craft-gold) 20%, transparent);
}
.natal-artifact-materials .ok {
    color: var(--accent-jade);
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 22%, transparent);
}
.natal-artifact-materials .lack {
    color: var(--text-red);
    background: color-mix(in srgb, var(--jimo-crimson) 10%, transparent);
    border-color: color-mix(in srgb, var(--jimo-crimson) 22%, transparent);
}
@media (max-width: 520px) {
    .natal-artifact-head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-8);
    }
    .natal-artifact-actions {
        justify-content: flex-start;
    }
    .natal-overdrive-row {
        align-items: flex-start;
    }
}

.xuanchou-input {
    width: 100%;
    padding: var(--space-8) var(--space-10);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color, var(--ghost-purple-dark));
    border-radius: var(--radius-sm);
    color: var(--text-primary, color-mix(in srgb, var(--bg-card) 80%, var(--bg-primary)));
    font-size: var(--font-body-lg);
    box-sizing: border-box;
}

.xuanchou-deal-wrap { padding: var(--space-4) 0; position: relative; overflow: hidden; }
.xuanchou-deal-wrap.readonly .deal-case { cursor: default; }
.deal-header { margin-bottom: var(--space-10); font-size: var(--font-body); color: var(--text-secondary, var(--text-muted)); line-height: 1.45; }

/* 玄匣定音 · 匣语（玩家自填，展示「用户名：正文」） */
.deal-danmaku-mount {
    margin-top: var(--space-12);
    min-height: 0;
}
.deal-danmaku {
    margin-top: 0;
    padding: var(--space-12) var(--space-12) var(--space-10);
    border: 1px solid var(--deal-gold-border, color-mix(in srgb, var(--accent-gold, #c9a227) 32%, transparent));
    border-radius: var(--radius-md, var(--radius-md));
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--accent-gold, #c9a227) 7%, transparent) 0%,
            transparent 42%
        ),
        var(--deal-gold-soft, color-mix(in srgb, var(--accent-gold, #c9a227) 4%, var(--bg-panel, var(--bg-secondary))));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-gold, #c9a227) 12%, transparent);
}
.deal-danmaku__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}
.deal-danmaku__title {
    font-size: var(--font-label);
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-gold, var(--accent-gold, #c9a227));
}
.deal-danmaku__hint {
    font-size: var(--font-caption);
    color: var(--text-muted, var(--text-secondary));
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.deal-danmaku__stage {
    max-height: 96px;
    overflow-y: auto;
    margin-bottom: var(--space-6);
    padding: var(--space-2) var(--space-2) var(--space-2) 0;
    font-size: var(--font-label);
    line-height: 1.5;
    color: var(--text-secondary, var(--text-muted));
    scrollbar-width: thin;
}
.deal-danmaku__stage.is-empty {
    display: none;
}
.deal-danmaku__empty {
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-muted, var(--text-secondary));
    padding: var(--space-6) var(--space-2) var(--space-10);
    text-align: center;
    letter-spacing: 0.04em;
}
.deal-danmaku__empty[hidden] {
    display: none !important;
}
.deal-danmaku__line {
    padding: var(--space-4) 0;
    color: var(--text-primary, inherit);
    word-break: break-word;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color, currentColor) 35%, transparent);
}
.deal-danmaku__line:last-child {
    border-bottom: none;
}
.deal-danmaku__composer {
    display: flex;
    gap: var(--space-8);
    align-items: stretch;
    margin-top: var(--space-2);
    padding-top: var(--space-8);
    border-top: 1px solid color-mix(in srgb, var(--deal-gold-border, var(--accent-gold, #c9a227)) 28%, transparent);
}
.deal-danmaku__input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 var(--space-12);
    font-size: var(--font-body);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--border-color, #5a4a3a) 80%, var(--accent-gold, #c9a227));
    background: color-mix(in srgb, var(--bg-card, var(--bg-primary)) 88%, transparent);
    color: var(--text-primary, inherit);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.deal-danmaku__input::placeholder {
    color: var(--text-muted, #8a7a68);
    letter-spacing: 0.02em;
}
.deal-danmaku__input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 65%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold, #c9a227) 18%, transparent);
}
.deal-danmaku__send {
    flex: 0 0 auto;
    min-height: 40px;
    height: 40px;
    padding: 0 var(--space-16);
    font-size: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.08em;
    border-radius: var(--radius-md);
}
.deal-danmaku__send:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.deal-danmaku__fly {
    position: absolute;
    left: 100%;
    white-space: nowrap;
    pointer-events: none;
    z-index: 6;
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-gold, #e8c56a);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    animation: deal-danmaku-fly 7.5s linear forwards;
}
@keyframes deal-danmaku-fly {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(calc(-100vw - 100%)); opacity: 0.85; }
}
.deal-header b { color: var(--text-primary, color-mix(in srgb, var(--bg-card) 80%, var(--bg-primary))); }
.deal-realm { color: var(--text-muted, var(--text-muted)); font-size: var(--font-label); }
.spectate-tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-xs);
    border: 1px solid color-mix(in srgb, var(--text-blue, #3a6ea5) 35%, transparent);
    color: var(--text-blue);
    font-size: var(--font-caption);
}

/* 开局选匣:庄严的祭台质感 */
.deal-stage {
    border: 1px solid var(--deal-gold);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 50% 0%, var(--deal-gold-soft), var(--bg-secondary));
    padding: var(--space-16) var(--space-14) var(--space-14);
    box-shadow: inset 0 1px 0 var(--glass-white-2);
    margin-bottom: var(--space-12);
}
.deal-stage__title {
    text-align: center;
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--text-gold);
    letter-spacing: 0.06em;
    margin-bottom: var(--space-6);
}
.deal-stage__desc {
    text-align: center;
    font-size: var(--font-label);
    line-height: 1.55;
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}
.deal-stage__remain {
    text-align: center;
    font-size: var(--font-label);
    color: var(--text-muted);
    margin-bottom: var(--space-12);
}
.deal-stage__remain b { color: var(--text-gold); font-weight: 600; }
.deal-stake-label {
    display: block;
    font-size: var(--font-label);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}
.deal-stake-input { width: 100%; box-sizing: border-box; min-height: 44px; }
/* deal 开局押注走 xuanchou-stake-field 时由上方通用样式接管 */
.deal-disabled-reason {
    color: var(--text-danger);
    font-size: var(--font-label);
    margin-top: var(--space-6);
}

/* 开局奖池预览 — FB#5633：2×2 等宽网格，芯片大小平均 */
.deal-pool-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
    justify-content: center;
    margin: var(--space-8) 0 var(--space-4);
    padding: var(--space-8) var(--space-8);
    border-radius: var(--radius-md);
    background: var(--bg-secondary, var(--shadow-black-2));
    border: 1px solid var(--deal-gold-border, color-mix(in srgb, var(--craft-gold-bright) 25%, transparent));
    font-size: var(--font-caption);
}
.deal-pool-label {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted, var(--text-muted));
    margin-bottom: var(--space-2);
    letter-spacing: 0.02em;
    font-size: var(--font-caption);
}
.deal-pool-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-md);
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    box-sizing: border-box;
}
.deal-pool-chip.pool-zero { color: var(--text-muted, var(--text-muted)); background: color-mix(in srgb, var(--text-muted) 15%, transparent); }
.deal-pool-chip.pool-low { color: var(--text-secondary, var(--text-muted)); background: color-mix(in srgb, var(--text-muted) 10%, transparent); }
.deal-pool-chip.pool-mid { color: var(--text-gold, var(--craft-gold-bright)); background: var(--deal-gold-soft, color-mix(in srgb, var(--craft-gold-bright) 15%, transparent)); }
.deal-pool-chip.pool-high {
    color: var(--text-gold, var(--craft-gold-bright));
    background: var(--deal-bright, color-mix(in srgb, var(--craft-gold-bright) 30%, transparent));
    font-weight: 600;
    box-shadow: none; /* 去掉外发光，避免高档芯片视觉偏大 */
}

/* ════════════════════════════════════════
   倍率计分板 + 26 匣
   三列 CSS grid 锁宽，避免侧栏被挤没
   左 low 13 档 | 中 26 匣 | 右 high 13 档
   ════════════════════════════════════════ */
.deal-board-layout {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: var(--space-6);
    align-items: start;
    justify-content: center;
    margin: var(--space-10) 0 var(--space-14);
    width: 100%;
    box-sizing: border-box;
}
.deal-board-cap {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    font-size: var(--font-caption);
    color: var(--text-gold);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
    padding: 0 var(--space-2);
}
/* 侧栏倍率板：整列有底有边 */
.deal-mult-board {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    width: 100%;
    min-width: 0;
    padding: var(--space-4) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--deal-gold-border, color-mix(in srgb, var(--craft-gold-bright) 25%, transparent));
    background: var(--bg-panel, var(--bg-secondary));
    box-sizing: border-box;
    align-content: start;
}
.deal-mult-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    text-align: center;
    font-size: var(--font-micro);
    font-weight: 600;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color, rgba(168, 124, 237, 0.3));
    background: var(--bg-card);
    color: var(--text-secondary, var(--text-muted));
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* FB#5633：固定行高，高低档视觉大小一致 */
    min-height: 18px;
    height: 18px;
    box-sizing: border-box;
}
.deal-mult-item.high-tier {
    color: #e0c060;
    border-color: rgba(224, 192, 96, 0.4);
    background: rgba(224, 192, 96, 0.08);
}
.deal-mult-item.mid-tier {
    color: var(--accent-jade);
    border-color: color-mix(in srgb, var(--accent-jade) 30%, transparent);
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
}
.deal-mult-item.zero-tier {
    color: var(--text-muted);
    opacity: 0.7;
}
.deal-mult-item.out {
    opacity: 0.3;
    text-decoration: line-through;
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border-color);
}
/* 极窄屏：侧栏再收一点 */
@media (max-width: 360px) {
    .deal-board-layout { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: var(--space-4); }
    .deal-mult-item { font-size: var(--font-micro); padding: var(--space-2) 0; min-height: 16px; }
}

/* 28 匣网格：手机 4 列 · 中屏 5 列 · 桌面 7 列（恰好 4 行铺满） */
.deal-cases {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6);
    margin: 0;
    min-width: 0;
    align-content: start;
}
@media (min-width: 420px) and (max-width: 767px) {
    .deal-cases { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* 桌面布局断点见文末 .deal-desktop-layout，须在 .deal-case 基样式之后 */

.deal-case {
    position: relative;
    padding: var(--space-10) var(--space-4);
    text-align: center;
    border: 1px solid var(--border-color, var(--ghost-purple-dark));
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--bg-card), var(--bg-panel));
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .14s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .18s ease;
    min-height: 48px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    word-break: break-all;
    box-sizing: border-box;
    width: 100%;
}
.deal-case::after {
    /* 封印符文微光:仅未开匣有,暗示"内有乾坤" */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%, var(--xc-surface-tint-hover), transparent 70%);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.deal-case.state-sealed:hover {
    background: linear-gradient(180deg, var(--xc-gold-tint), var(--bg-card));
    border-color: var(--accent-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--deal-gold-glow);
}
.deal-case.state-sealed:hover::after { opacity: 1; }

/* 本命匣:金色命定光晕,缓慢呼吸(强调"你的命匣") */
.deal-case.state-picked {
    background: linear-gradient(180deg, var(--deal-gold), transparent);
    border-color: var(--accent-gold);
    box-shadow: 0 0 12px var(--deal-gold-border);
    animation: dealPickedPulse 2.4s ease-in-out infinite;
}
@keyframes dealPickedPulse {
    0%, 100% { box-shadow: 0 0 10px var(--deal-gold); }
    50% { box-shadow: 0 0 18px var(--deal-gold-glow), inset 0 0 10px var(--deal-bright); }
}

/* 开匣揭晓:翻牌式 scale 弹出(复用 mysteryBoxReveal 的弹性范式) */
.deal-case.state-opened {
    background: var(--bg-panel);
    opacity: .62;
    cursor: default;
    animation: dealCaseReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dealCaseReveal {
    0% { opacity: 0; transform: scale(0.7) rotateY(40deg); }
    55% { transform: scale(1.06); }
    100% { opacity: .62; transform: scale(1) rotateY(0); }
}
/* 开出高倍率(x5+):金光高亮,诱惑感 */
.deal-case.state-opened.high-tier {
    opacity: 1;
    border-color: var(--deal-bright);
    background: linear-gradient(180deg, var(--deal-bright));
    box-shadow: 0 0 10px var(--deal-bright);
}
/* 开出小盈档(x1.5~x3.5):柔和金边,弱于大奖但区别于保本/亏损档 */
.deal-case.state-opened.mid-tier {
    opacity: .92;
    border-color: var(--deal-gold-border);
    background: linear-gradient(180deg, var(--deal-gold-soft));
    box-shadow: 0 0 5px var(--deal-gold-border);
}
.deal-case.mid-tier .case-mult { color: var(--text-gold); }
/* 开出 x0:暗淡破碎,失落感 */
.deal-case.state-opened.zero-tier {
    opacity: .4;
    filter: grayscale(0.6);
}
.deal-case .case-num { display: block; font-weight: bold; font-size: var(--font-body); }
.deal-case .case-mult { display: block; color: var(--text-gold); font-size: var(--font-body); font-weight: 700; margin-top: var(--space-4); }
.deal-case.high-tier .case-mult { color: var(--text-gold); }
.deal-case .case-pick { display: block; color: var(--text-gold); font-size: var(--font-micro); margin-top: var(--space-2); letter-spacing: 0.05em; }
.deal-case .case-amount {
    display: block;
    color: var(--text-gold);
    font-size: clamp(var(--font-micro), 2.6vw, var(--font-label));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    max-width: 100%;
    word-break: break-all;
    min-width: 0;
}
.deal-case.zero-tier .case-amount { color: var(--text-muted); }
.deal-case.zero-tier .case-mult { color: var(--text-muted); }

/* 终局揭晓匣:紫光破封 */
.deal-case.state-revealed {
    background: linear-gradient(180deg, var(--deal-purple));
    border-color: var(--deal-purple-border);
    box-shadow: 0 0 14px var(--deal-purple);
    animation: dealCaseReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 掌柜报价:从下浮入 + 金光扫过(报价是关键戏剧节点) */
.deal-offer {
    position: relative;
    background:
        linear-gradient(135deg, var(--deal-gold-soft));
    border: 1px solid var(--deal-gold-border);
    padding: var(--space-14) var(--space-10);
    border-radius: var(--radius-md);
    margin: var(--space-10) 0;
    text-align: center;
    font-size: var(--font-body-lg);
    overflow: hidden;
    animation: dealOfferIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dealOfferIn {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}
.deal-offer::before {
    /* 金光扫过:报价出现时的"开价"仪式 */
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--deal-bright));
    animation: dealOfferSheen 1.1s ease-out 0.2s;
    pointer-events: none;
}
@keyframes dealOfferSheen {
    0% { left: -60%; }
    100% { left: 110%; }
}
.deal-offer-label { font-size: var(--font-label); color: var(--text-secondary, var(--text-muted)); margin-bottom: var(--space-4); }
.deal-offer b { color: var(--text-gold); font-size: var(--font-page-title); font-weight: 700; display: inline-block; }
.deal-offer-mult { color: var(--text-gold, var(--craft-gold-bright)); font-size: var(--font-label); font-weight: 700; }
.deal-waiting { text-align: center; color: var(--text-muted, var(--text-muted)); font-size: var(--font-label); margin-top: var(--space-6); font-style: italic; }

/* 主抉择底栏：落筹/续博/移匣，触控 ≥44px，避免被匣阵顶出视口 */
.deal-actions-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin: var(--space-12) 0 var(--space-8);
}
.deal-actions-bar .deal-action-btn,
.deal-actions-bar .modal-btn {
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}
.deal-swap-prompt {
    text-align: center;
    margin: var(--space-12) 0 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);
    color: var(--text-secondary, var(--text-primary));
    font-size: var(--font-body);
    line-height: 1.55;
}
.deal-recruit-btn {
    display: block;
    width: 100%;
    margin: var(--space-10) auto 0;
    min-height: 44px;
    box-sizing: border-box;
}

/* 终局揭晓:大倍率爆裂出现(高潮/状态转换) */
.deal-result {
    margin-top: var(--space-14);
    padding: var(--space-20) var(--space-14);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-body);
    position: relative;
    overflow: hidden;
    animation: dealResultIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dealResultIn {
    0% { opacity: 0; transform: scale(0.85); }
    60% { transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}
.deal-result.outcome-win {
    background: linear-gradient(135deg, var(--deal-jade));
    border: 1px solid var(--deal-jade-border);
}
.deal-result.outcome-lose {
    background: linear-gradient(135deg, var(--deal-crimson));
    border: 1px solid var(--deal-crimson-border);
}
.deal-result-title {
    font-size: var(--font-heading);
    font-weight: 700;
    margin-bottom: var(--space-8);
    color: var(--text-gold);
    letter-spacing: 0.03em;
}
/* 天命大彩(x15):金色全屏高光 */
.deal-result.outcome-jackpot {
    background: linear-gradient(135deg, var(--deal-bright));
    border-color: var(--text-gold);
    box-shadow: 0 0 24px var(--deal-gold-glow);
}
.deal-result.outcome-jackpot .deal-result-title {
    color: var(--text-gold);
    font-size: var(--font-page-title);
    text-shadow: 0 0 12px var(--deal-gold-glow);
}
/* 血本无归(x0):暗淡破碎 */
.deal-result.outcome-ruin {
    filter: saturate(0.5);
}
.deal-result.outcome-ruin .deal-result-title { color: var(--text-muted, var(--text-muted)); }
.deal-result-mult { font-size: var(--font-title); color: var(--text-gold, var(--craft-gold-bright)); font-weight: 700; margin-bottom: var(--space-4); text-shadow: 0 0 8px var(--deal-gold-glow, color-mix(in srgb, var(--craft-gold-bright) 40%, transparent)); }
.deal-result-net { font-size: var(--font-body); }

/* 尊重无障碍:减少动效偏好下退回静态 */
@media (prefers-reduced-motion: reduce) {
    .deal-case, .deal-case.state-picked, .deal-case.state-opened, .deal-case.state-revealed,
    .deal-offer, .deal-offer::before, .deal-result {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== 玄匣定音 · 挑箱台交互仪式感 ===== */
.deal-progress {
    text-align: center;
    font-size: var(--font-label);
    color: var(--text-secondary, var(--text-muted));
    margin: var(--space-6) 0 var(--space-10);
    letter-spacing: 0.02em;
}

.deal-decay {
    text-align: center;
    font-size: var(--font-caption);
    color: var(--text-muted, var(--accent-orange));
    margin: 0 0 var(--space-8);
    letter-spacing: 0.03em;
    opacity: 0.85;
}
.deal-decay b {
    color: var(--text-gold, var(--craft-gold-bright));
}

/* 聚光舞台:被选中的匣子上浮置顶 */
.deal-spotlight {
    position: relative;
    margin: var(--space-10) auto var(--space-14);
    padding: var(--space-20) var(--space-14) var(--space-14);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 50% 30%, var(--deal-gold-soft), var(--bg-secondary));
    border: 1px solid var(--deal-gold);
    text-align: center;
    animation: dealSpotlightIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 8px 24px var(--shadow-black-2);
}
@keyframes dealSpotlightIn {
    0% { opacity: 0; transform: translateY(-8px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 翻牌中:揭晓等待态 */
.deal-revealing {
    padding: var(--space-24) var(--space-10);
    color: var(--text-gold);
    font-size: var(--font-body-lg);
    letter-spacing: 0.1em;
    animation: dealRevealingPulse 1s ease-in-out infinite;
}
@keyframes dealRevealingPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 聚光激活时,台面网格变暗(聚焦被选匣子)；倍率板保持清晰 */
.deal-cases.dimmed { opacity: 0.42; transition: opacity .25s ease; }
.deal-board-layout.dimmed .deal-cases { opacity: 0.42; }
.deal-cases[data-spotlight-active] .deal-case { cursor: pointer; }
.deal-case.is-spotlight { opacity: 0.3; }

@media (prefers-reduced-motion: reduce) {
    .deal-spotlight,
.deal-revealing {
        animation: none !important;
    }
}

/* 桌面：一行 7 匣（7+7+7+5 末行居中）+ 更清晰倍率侧栏
   放在基样式之后，避免被 .deal-case { min-height:48px } 覆盖 */
@media (min-width: 768px) {
    .deal-board-layout {
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        gap: var(--space-12);
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
        align-items: stretch;
    }
    .deal-mult-board {
        gap: var(--space-4);
        padding: var(--space-6) var(--space-4);
        align-content: space-between;
        min-height: 100%;
    }
    .deal-mult-item {
        font-size: var(--font-caption);
        min-height: 20px;
        padding: var(--space-4) var(--space-2);
    }
    .deal-cases {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: var(--space-10);
    }
    .deal-case {
        min-height: 68px;
        aspect-ratio: 1 / 1;
        max-height: 92px;
        border-radius: var(--radius-md);
        padding: var(--space-8) var(--space-4);
    }
    .deal-case .case-num { font-size: var(--font-action); }
    .deal-case .case-mult { font-size: var(--font-body); }
    .deal-case .case-amount { font-size: var(--font-label); }
}
@media (min-width: 900px) {
    [data-xuanchou-dialog] .deal-board-layout {
        max-width: 920px;
    }
}

/* ===== 玄匣定音 · 玄匣易主（围观出价）=====
   让主挂拍面板 + 围观出价栏；扁平描边，无左竖条/顶横条 accent。
   遵循 gc-dialog 设计语言：用 deal-* 局部 token + var(--token)，
   圆角 var(--radius-md)，不硬编码颜色。 */
.deal-transfer-panel {
    margin: var(--space-12) 0 var(--space-4);
    padding: var(--space-12) var(--space-14);
    border: 1px solid var(--deal-gold-border, var(--border-gold));
    border-radius: var(--radius-md);
    background: var(--deal-gold-soft, color-mix(in srgb, var(--accent-gold) 5%, var(--bg-panel)));
}
.deal-transfer-panel__title {
    font-size: var(--font-label);
    letter-spacing: 1px;
    color: var(--text-gold);
    margin-bottom: var(--space-8);
}
.deal-transfer-panel__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--font-body);
    color: var(--text-secondary, var(--text-muted));
    padding: var(--space-4) 0;
}
.deal-transfer-panel__row b {
    color: var(--text-primary, color-mix(in srgb, var(--bg-card) 80%, var(--bg-primary)));
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.deal-transfer-panel__countdown {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-heading);
    font-weight: 600;
    color: var(--accent-gold);
    text-align: center;
    margin: var(--space-6) 0 var(--space-8);
}
.deal-transfer-panel__countdown.is-urgent {
    color: var(--accent-crimson);
}
.deal-transfer-bid-bar {
    display: flex;
    gap: var(--space-8);
    align-items: stretch;
    margin-top: var(--space-10);
}
.deal-transfer-bid-bar .app-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    box-sizing: border-box;
}
.deal-transfer-bid-bar .modal-btn {
    flex: 0 0 auto;
    min-height: 44px;
}
.deal-transfer-bid-hint {
    font-size: var(--font-caption);
    color: var(--text-muted, var(--text-muted));
    margin-top: var(--space-4);
    line-height: 1.5;
}
.deal-transfer-bid-hint.is-overbid {
    color: var(--accent-crimson);
}

/* ═══════════════════════════════════════════════════════════════
   虚空淬体 · A 药力总览（design/void-body-modal）
   gc-dialog jade：头区大倍率 + 三格状态 + 段列表卡
   ═══════════════════════════════════════════════════════════════ */
body.game-page #voidBodyDetailModal .modal-content.modal--decorated.gc-dialog.vb-dialog,
body.game-page #voidBodyDetailModal .modal-content.gc-dialog.vb-dialog,
#voidBodyDetailModal .modal-content.vb-dialog,
.gc-dialog.vb-dialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
#voidBodyDetailModal {
    z-index: var(--z-overlay-top, 1200);
}

.vb-head {
    position: relative;
    padding: var(--space-16) var(--space-48) var(--space-8) var(--space-16);
    flex-shrink: 0;
}
.vb-head .gc-rule { margin-bottom: var(--space-10); }
.vb-head .gc-title { color: var(--text-jade, var(--accent-jade)); }
.vb-head .modal-header-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
}

body.game-page .gc-dialog.vb-dialog .gc-mid.vb-mid,
.gc-dialog.vb-dialog .gc-mid.vb-mid,
.vb-mid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    text-align: left;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-14) var(--space-12);
    scrollbar-width: none;
}
.vb-mid::-webkit-scrollbar { display: none; }

/* 当前倍率头区 */
.vb-hero {
    text-align: center;
    padding: var(--space-16) var(--space-12);
    margin-bottom: var(--space-12);
    border: 1px solid var(--border-jade, rgba(22, 128, 106, 0.36));
    border-radius: var(--radius-lg);
    background: var(--gradient-jade, rgba(22, 128, 106, 0.10));
}
.vb-hero__k {
    font-size: var(--font-caption);
    letter-spacing: 1px;
    color: var(--text-muted);
}
.vb-hero__v {
    margin-top: var(--space-4);
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-hero-lg);
    font-weight: 600;
    color: var(--text-jade, var(--accent-jade));
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
    line-height: 1.1;
}
.vb-hero__x {
    font-size: var(--font-heading);
    opacity: 0.85;
    margin-left: var(--space-2);
}
.vb-hero__sub {
    margin-top: var(--space-6);
    font-size: var(--font-label);
    color: var(--text-secondary);
}

/* 三格状态 */
.vb-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    margin-bottom: var(--space-12);
}
.vb-stat {
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}
.vb-stat--wide { grid-column: 1 / -1; }
.vb-stat span {
    display: block;
    font-size: var(--font-caption);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}
.vb-stat b {
    font-size: var(--font-body-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.vb-stat__jade,
.vb-stat b.vb-stat__jade {
    color: var(--text-jade, var(--accent-jade));
}

.vb-section-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin: var(--space-4) 0 var(--space-8);
}
.vb-section-h h3 {
    margin: 0;
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
}
.vb-section-h span {
    font-size: var(--font-caption);
    color: var(--text-muted);
}

/* 药力段卡 */
.vb-queue { display: flex; flex-direction: column; gap: 0; }
.vb-seg {
    padding: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    margin-bottom: var(--space-8);
}
.vb-seg.is-active {
    border-color: var(--border-jade, rgba(22, 128, 106, 0.40));
    background: var(--gradient-jade, rgba(22, 128, 106, 0.10));
}
.vb-seg__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}
.vb-seg__mul {
    font-size: var(--font-title);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.vb-seg.is-active .vb-seg__mul {
    color: var(--text-jade, var(--accent-jade));
}
.vb-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-8);
    border-radius: var(--radius-xs);
    font-size: var(--font-caption);
    font-weight: 600;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: transparent;
}
.vb-chip--on {
    border-color: var(--border-jade, rgba(22, 128, 106, 0.40));
    color: var(--text-jade, var(--accent-jade));
    background: var(--gradient-jade, rgba(22, 128, 106, 0.16));
}
.vb-seg__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    font-size: var(--font-label);
    color: var(--text-muted);
}
.vb-seg__meta time {
    font-variant-numeric: tabular-nums;
}
.vb-dismiss-btn {
    min-height: 36px;
    height: 36px;
    width: auto;
    flex-shrink: 0;
    padding: 0 var(--space-12);
    font-size: var(--font-label);
    border-radius: var(--radius-md);
}

.vb-note {
    margin: var(--space-4) 0 0;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.55;
    text-align: center;
}
.vb-empty {
    text-align: center;
    padding: var(--space-20) var(--space-12);
    color: var(--text-muted);
    font-size: var(--font-body);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
    .vb-hero {
        border-color: color-mix(in srgb, var(--accent-jade) 36%, transparent);
        background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    }
    .vb-seg.is-active {
        border-color: color-mix(in srgb, var(--accent-jade) 36%, transparent);
        background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    }
    .vb-chip--on {
        border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent);
        background: color-mix(in srgb, var(--accent-jade) 16%, transparent);
    }
}

@media (min-width: 768px) {
    body.game-page #voidBodyDetailModal .modal-content.modal--decorated.gc-dialog.vb-dialog,
    body.game-page #voidBodyDetailModal .modal-content.gc-dialog.vb-dialog,
    #voidBodyDetailModal .modal-content.vb-dialog,
    .gc-dialog.vb-dialog {
        width: min(92vw, 440px);
        max-width: 440px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   装备祭炼 · B 投喂台（design/equip-refine-modal）
   顶条紧凑状态 · 列表主导 · 粘底合计 · gc gold
   ═══════════════════════════════════════════════════════════════ */
body.game-page .modal-content.modal--decorated.gc-dialog.rf-dialog,
.modal-content.modal--decorated.gc-dialog.rf-dialog,
.gc-dialog.rf-dialog {
    display: flex;
    flex-direction: column;
    width: min(94vw, 420px);
    max-width: 420px;
    max-height: min(92dvh, 720px);
    overflow: hidden;
    padding: 0;
}
.rf-head {
    position: relative;
    padding: var(--space-14) var(--space-48) var(--space-8) var(--space-16);
    flex-shrink: 0;
}
.rf-head .gc-rule { margin-bottom: var(--space-10); }
.rf-head .gc-title { color: var(--text-gold); }
.rf-head .modal-header-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
}
body.game-page .gc-dialog.rf-dialog .gc-mid.rf-mid,
.gc-dialog.rf-dialog .gc-mid.rf-mid,
.rf-mid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    text-align: left;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-2) var(--space-14) var(--space-8);
    scrollbar-width: none;
}
.rf-mid::-webkit-scrollbar { display: none; }
.rf-foot {
    flex-shrink: 0;
    margin-top: 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);
}
.rf-foot .modal-btn--gold { flex: 1.15; }
.rf-foot .modal-btn--outline,
.rf-foot .modal-btn--danger { flex: 0.85; }

/* 顶条 */
.rf-top {
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-10);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}
.rf-top__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6) var(--space-10);
}
.rf-top__name {
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-action);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    min-width: 0;
}
.rf-top__lv {
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.rf-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--space-6);
    margin-left: var(--space-6);
    border-radius: var(--radius-xs);
    font-size: var(--font-micro);
    font-weight: 600;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    vertical-align: middle;
}
.rf-chip--gold {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .rf-chip--gold {
        border-color: var(--border-gold, var(--border-color));
        background: rgba(183, 120, 31, 0.12);
    }
}

.rf-bar {
    position: relative;
    margin-top: var(--space-10);
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-input, rgba(42, 42, 38, 0.06));
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.rf-bar__fill {
    position: relative;
    z-index: 1;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--text-gold, var(--accent-gold));
    transition: width 0.2s ease;
}
.rf-bar__preview {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 48%, transparent);
    opacity: 0.75;
    pointer-events: none;
    transition: width 0.2s ease;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .rf-bar__preview { background: rgba(22, 128, 106, 0.45); }
}
.rf-bar__text {
    margin-top: var(--space-6);
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.rf-bar__text .rf-add { color: var(--text-jade, var(--accent-jade)); font-weight: 600; }
.rf-natal-line {
    margin-top: var(--space-6);
    font-size: var(--font-caption);
    color: var(--text-secondary);
    line-height: 1.45;
}
.rf-natal-line b {
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}

.rf-rate {
    font-size: var(--font-label);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
    line-height: 1.5;
}
.rf-rate strong { color: var(--text-jade, var(--accent-jade)); }
.rf-rate strong.is-warn { color: var(--text-danger, var(--accent-crimson)); }
.rf-rate b { color: var(--text-gold); font-variant-numeric: tabular-nums; }

.rf-cost {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.rf-cost span {
    font-size: var(--font-caption);
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    background: var(--bg-panel);
}
.rf-cost b {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.rf-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}
.rf-feed-head h3 {
    margin: 0;
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
}
.rf-select-all {
    min-height: 32px !important;
    height: 32px;
    padding: 0 var(--space-10) !important;
    font-size: var(--font-label) !important;
    width: auto !important;
    flex: 0 0 auto !important;
}
.rf-feed-hint {
    margin: 0 0 var(--space-8);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.45;
}

.rf-feed-search-row {
    position: relative;
    margin: 0 0 var(--space-8);
}
.rf-feed-search {
    width: 100%;
    box-sizing: border-box;
    height: 34px;
    padding: 0 var(--space-32) 0 var(--space-12);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-input, var(--bg-panel));
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-body);
    outline: none;
}
.rf-feed-search:focus {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
}
.rf-feed-search::placeholder {
    color: var(--text-muted);
    opacity: 0.85;
}
.rf-feed-search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--font-title);
    line-height: 1;
    cursor: pointer;
}
.rf-feed-search-clear:hover {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-muted) 8%, transparent);
}
.rf-feed-search-clear.hidden { display: none; }

/* C 密货架：弱卡片 / 单行扫读 / 步进常显 */
.rf-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 80px;
}
.rf-feed-list--shelf {
    border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}
.rf-feed {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto auto;
    gap: var(--space-4) var(--space-8);
    align-items: center;
    min-height: 48px;
    padding: var(--space-8) var(--space-8) var(--space-8) var(--space-2);
    border: 1px solid transparent;
    border-bottom-color: color-mix(in srgb, var(--border-color) 85%, transparent);
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    user-select: none;
}
.rf-feed--shelf {
    /* 与 .rf-feed 同为密货架；保留类名供测试/脚本识别 */
}
.rf-feed.is-search-hidden {
    display: none;
}
.rf-feed.is-on {
    border-radius: var(--radius-md);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .rf-feed.is-on {
        border-color: var(--border-gold, var(--border-color));
        background: rgba(183, 120, 31, 0.1);
    }
}
/* 传说不再整行发灰，文案「传说慎投」表达 */
.rf-feed.is-legend { opacity: 1; }
.rf-feed__check {
    width: 36px;
    height: 40px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.rf-feed-cb {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-gold, var(--accent-gold));
    cursor: pointer;
}
.rf-feed__main {
    min-width: 0;
}
.rf-feed__name {
    font-size: var(--font-body);
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rf-feed__sub {
    margin-top: var(--space-2);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rf-feed__sub-jade {
    color: var(--text-jade, var(--accent-jade));
}
.rf-feed__sub-warn {
    color: var(--rarity-5, var(--accent-crimson, #c94a3c));
    font-weight: 600;
}
.rf-feed__qty {
    flex-shrink: 0;
}
.rf-stepper {
    display: inline-flex;
    align-items: center;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel, var(--bg-card));
    overflow: hidden;
}
.rf-feed:not(.is-on) .rf-stepper {
    opacity: 0.42;
}
.rf-stepper__btn {
    width: 26px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--font-body-lg);
    line-height: 1;
    cursor: pointer;
}
.rf-stepper__btn:active {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
}
.rf-feed-num {
    width: 28px;
    min-width: 28px;
    height: 28px;
    margin: 0;
    padding: 0 var(--space-2);
    box-sizing: border-box;
    text-align: center;
    font-size: var(--font-caption);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 0;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    -moz-appearance: textfield;
}
.rf-feed-num::-webkit-outer-spin-button,
.rf-feed-num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rf-stepper--fixed {
    border: 0;
    background: transparent;
    opacity: 0.55 !important;
    pointer-events: none;
}
.rf-stepper__fixed {
    min-width: 28px;
    padding: 0 var(--space-4);
    font-size: var(--font-caption);
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.rf-feed__exp {
    min-width: 52px;
    font-size: var(--font-label);
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
    text-align: right;
    line-height: 1.2;
}
.rf-feed__exp small {
    display: block;
    font-size: var(--font-micro);
    font-weight: 500;
    color: var(--text-muted);
}

.rf-sticky {
    position: sticky;
    bottom: 0;
    margin-top: var(--space-8);
    padding-top: var(--space-8);
    background: linear-gradient(180deg, transparent, var(--bg-card) 36%);
}
.rf-summary {
    padding: var(--space-10) var(--space-12);
    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) 10%, transparent);
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.5;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .rf-summary {
        border-color: var(--border-gold, var(--border-color));
        background: rgba(183, 120, 31, 0.1);
    }
}
.rf-summary b {
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}
.rf-discard {
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 600;
}
.rf-empty {
    text-align: center;
    padding: var(--space-20) var(--space-12);
    color: var(--text-muted);
    font-size: var(--font-body);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

@media (min-width: 768px) {
    body.game-page .modal-content.modal--decorated.gc-dialog.rf-dialog,
    .modal-content.modal--decorated.gc-dialog.rf-dialog,
    .gc-dialog.rf-dialog {
        width: min(94vw, 460px);
        max-width: 460px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   本命吞材料 · nd-dialog（材料清单 + 灵力投入）
   ═══════════════════════════════════════════════════════════════ */
body.game-page .modal-content.modal--decorated.gc-dialog.nd-dialog,
.modal-content.modal--decorated.gc-dialog.nd-dialog,
.gc-dialog.nd-dialog {
    display: flex;
    flex-direction: column;
    width: min(94vw, 420px);
    max-width: 420px;
    max-height: min(90dvh, 700px);
    overflow: hidden;
    padding: 0;
}
.nd-head {
    position: relative;
    padding: var(--space-14) var(--space-48) var(--space-8) var(--space-16);
    flex-shrink: 0;
}
.nd-head .gc-rule { margin-bottom: var(--space-10); }
.nd-head .gc-title { color: var(--text-gold); }
.nd-head .modal-header-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
}
body.game-page .gc-dialog.nd-dialog .gc-mid.nd-mid,
.gc-dialog.nd-dialog .gc-mid.nd-mid,
.nd-mid {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    text-align: left;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-14) var(--space-12);
    scrollbar-width: none;
}
.nd-mid::-webkit-scrollbar { display: none; }
.nd-foot {
    flex-shrink: 0;
    margin-top: 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);
}
.nd-foot .modal-btn--gold { flex: 1.2; }
.nd-foot .modal-btn--outline { flex: 0.8; }

.nd-hero {
    text-align: center;
    padding: var(--space-14) var(--space-12);
    margin-bottom: var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .nd-hero {
        border-color: var(--border-gold, var(--border-color));
        background: rgba(183, 120, 31, 0.1);
    }
}
.nd-hero__k {
    font-size: var(--font-caption);
    letter-spacing: 1px;
    color: var(--text-muted);
}
.nd-hero__v {
    margin-top: var(--space-4);
    font-family: var(--font-serif, "Songti SC", STSong, "Noto Serif SC", serif);
    font-size: var(--font-heading);
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-gold);
}
.nd-hero__sub {
    margin-top: var(--space-6);
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.5;
}
.nd-hero__sub b { color: var(--text-primary); font-weight: 600; }

.nd-gain {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-10) var(--space-12);
    margin-bottom: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}
.nd-gain__k {
    font-size: var(--font-micro);
    letter-spacing: 1px;
    color: var(--text-muted);
}
.nd-gain__v {
    font-size: var(--font-body);
    color: var(--text-secondary);
}
.nd-gain__v b { color: var(--text-gold); font-variant-numeric: tabular-nums; }
.nd-gain__note {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.45;
}

.nd-section-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-8);
    margin: 0 0 var(--space-8);
}
.nd-section-h h3 {
    margin: 0;
    font-size: var(--font-body);
    font-weight: 600;
}
.nd-section-h span { font-size: var(--font-caption); font-weight: 600; }
.nd-section-h .is-ok { color: var(--text-jade, var(--accent-jade)); }
.nd-section-h .is-lack { color: var(--text-danger, var(--accent-crimson)); }

.nd-mats {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.nd-mat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-8);
    align-items: center;
    min-height: 40px;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}
.nd-mat.is-ok {
    border-color: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 36%, transparent);
}
.nd-mat.is-lack {
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 36%, transparent);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .nd-mat.is-ok { border-color: var(--border-jade, var(--border-color)); }
    .nd-mat.is-lack { border-color: rgba(183, 58, 49, 0.4); }
}
.nd-mat__name {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
}
.nd-mat__qty {
    font-size: var(--font-label);
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: 600;
}
.nd-mat.is-ok .nd-mat__qty { color: var(--text-jade, var(--accent-jade)); }
.nd-mat.is-lack .nd-mat__qty { color: var(--text-danger, var(--accent-crimson)); }
.nd-mat__tag {
    font-size: var(--font-caption);
    font-weight: 700;
    min-width: 1.5em;
    text-align: center;
}
.nd-mat.is-ok .nd-mat__tag { color: var(--text-jade, var(--accent-jade)); }
.nd-mat.is-lack .nd-mat__tag { color: var(--text-danger, var(--accent-crimson)); }
.nd-empty {
    text-align: center;
    padding: var(--space-14) var(--space-12);
    margin-bottom: var(--space-12);
    color: var(--text-muted);
    font-size: var(--font-body);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

/* 投入灵力控制（吞材料 / 吞装备确认共用） */
.nd-mp {
    margin-top: var(--space-4);
    padding: var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
}
.nd-mp__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4) var(--space-10);
    margin-bottom: var(--space-8);
}
.nd-mp__title {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-gold);
}
.nd-mp__rule {
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.nd-mp__slider {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}
.nd-mp__slider input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 28px;
    accent-color: var(--accent-gold, var(--accent-gold));
    cursor: pointer;
}
.nd-mp__num-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: var(--font-label);
}
.nd-mp__num-wrap input[type="number"] {
    width: 56px;
    min-height: 36px;
    padding: 0 var(--space-6);
    text-align: center;
    font-size: var(--font-body);
    font-variant-numeric: tabular-nums;
    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;
}
.nd-mp__preview {
    margin-top: var(--space-8);
    font-size: var(--font-label);
    line-height: 1.5;
    color: var(--text-jade, var(--accent-jade));
    font-variant-numeric: tabular-nums;
}
.nd-mp__preview.is-lack {
    color: var(--text-danger, var(--accent-crimson));
}
.nd-refill {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin-top: var(--space-10);
}
.nd-refill__btn {
    min-height: 36px !important;
    height: 36px;
    padding: 0 var(--space-12) !important;
    font-size: var(--font-label) !important;
    width: auto !important;
    flex: 0 0 auto !important;
}
.nd-refill__hint {
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.4;
}
.nd-refill__hint.is-lack {
    color: var(--text-danger, var(--accent-crimson));
}
.nd-note {
    margin: var(--space-10) 0 0;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.55;
    text-align: center;
}

@media (min-width: 768px) {
    body.game-page .modal-content.modal--decorated.gc-dialog.nd-dialog,
    .modal-content.modal--decorated.gc-dialog.nd-dialog,
    .gc-dialog.nd-dialog {
        width: min(94vw, 460px);
        max-width: 460px;
    }
}
.nd-warn {
    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(--text-danger, var(--accent-crimson)) 32%, transparent);
    background: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 8%, transparent);
    font-size: var(--font-label);
    line-height: 1.5;
    color: var(--text-secondary);
}
.nd-warn b {
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 700;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .nd-warn {
        border-color: rgba(183, 58, 49, 0.35);
        background: rgba(183, 58, 49, 0.08);
    }
}
.nd-batch-preview {
    margin-bottom: var(--space-12);
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}
.nd-picker-mp {
    margin-bottom: var(--space-12);
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-panel);
}
.nd-picker-mp__title {
    font-size: var(--font-body);
    font-weight: 700;
    color: var(--text-gold);
    margin-bottom: var(--space-4);
}
.nd-picker-mp__hint {
    font-size: var(--font-label);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: var(--space-6);
}

/* 吞装备 · 选装列表（含储物同款 inv-seal 铭文） */
.nd-eq-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
.nd-eq-filter {
    font-size: var(--font-caption);
    font-family: inherit;
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.nd-eq-filter.is-on {
    color: var(--text-gold);
    font-weight: 600;
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
}
.nd-eq-filter.is-warn-on {
    color: var(--text-danger, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 40%, transparent);
    background: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 10%, transparent);
}
.nd-eq-search {
    margin-bottom: var(--space-8);
}
.nd-eq-search .app-input,
.nd-eq-search input {
    width: 100%;
    min-height: 40px;
    padding: 0 var(--space-12);
    font-size: var(--font-body);
    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;
    box-sizing: border-box;
}
.nd-eq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    margin-bottom: var(--space-4);
}
.nd-eq {
    display: block;
    width: 100%;
    text-align: left;
    min-height: 52px;
    padding: var(--space-12) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.nd-eq:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}
.nd-eq.is-inscribed {
    border-color: color-mix(in srgb, #a78bfa 32%, var(--border-color));
    background:
        linear-gradient(135deg, color-mix(in srgb, #a78bfa 7%, transparent), transparent 55%),
        var(--bg-panel);
}
.nd-eq.is-high-risk {
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 38%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 8%, transparent), transparent 50%),
        var(--bg-panel);
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .nd-eq:hover {
        border-color: var(--border-gold, var(--border-color));
        background: rgba(183, 120, 31, 0.08);
    }
    .nd-eq.is-inscribed {
        border-color: rgba(167, 139, 250, 0.35);
        background: rgba(167, 139, 250, 0.06);
    }
    .nd-eq.is-high-risk {
        border-color: rgba(183, 58, 49, 0.4);
        background: rgba(183, 58, 49, 0.07);
    }
}
.nd-eq:active { opacity: 0.9; }
.nd-eq__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
}
.nd-eq__name {
    font-size: var(--font-body-lg);
    font-weight: 700;
    line-height: 1.3;
    min-width: 0;
}
.nd-eq__qty {
    margin-left: var(--space-6);
    font-size: var(--font-caption);
    font-weight: 700;
    color: var(--text-gold);
    font-variant-numeric: tabular-nums;
}
.nd-eq__qty-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
    flex-wrap: wrap;
}
.nd-eq__qty-label {
    font-size: var(--font-caption);
    color: var(--text-secondary);
}
.nd-qty {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    flex: none;
}
.nd-qty__btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-body);
    line-height: 1;
}
.nd-qty__input {
    width: 52px;
    height: 44px;
    text-align: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-label);
    font-variant-numeric: tabular-nums;
}
.nd-qty__max {
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.nd-eq__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    flex-shrink: 0;
}
.nd-eq__badge {
    font-size: var(--font-micro);
    font-weight: 700;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    line-height: 1.35;
}
.nd-eq__badge--refine {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--text-jade, #2a8f6a) 30%, transparent);
}
.nd-eq__badge--insc {
    color: #a78bfa;
    border-color: color-mix(in srgb, #a78bfa 35%, transparent);
    background: color-mix(in srgb, #a78bfa 10%, transparent);
}
.nd-eq__badge--risk {
    color: var(--text-danger, var(--accent-crimson));
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 40%, transparent);
    background: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 12%, transparent);
}
.nd-eq__meta {
    margin-top: var(--space-6);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.nd-eq__meta span {
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    font-variant-numeric: tabular-nums;
}
/* 储物同款印章行：嵌在 nd-eq 内 */
.nd-eq__seals.inv-seal-row {
    margin-top: var(--space-8);
}
.nd-eq__seals .inv-seal-row__seals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}
.nd-eq__foot {
    margin-top: var(--space-6);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
}
.nd-eq__foot strong {
    color: var(--text-danger, var(--accent-crimson));
    font-weight: 600;
}
/* 确认页：铭文 warn 内印章 */
.nd-warn__seals {
    margin-top: var(--space-8);
}
.nd-warn__seals .inv-seal-row__seals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}
.nd-warn.is-high {
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 45%, transparent);
    background: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 12%, transparent);
}

/* 一键吞噬多选清单 · 工具条 + 勾选行 */
.nd-batch-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
    padding: var(--space-8) var(--space-10);
    margin-bottom: var(--space-8);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.nd-batch-stats {
    font-size: var(--font-label);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.nd-batch-stats b {
    color: var(--text-gold);
    font-weight: 700;
}
.nd-batch-quick {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.nd-batch-warn {
    font-size: var(--font-caption);
    line-height: 1.45;
    color: var(--text-danger, var(--accent-crimson));
    padding: var(--space-6) var(--space-10);
    margin-bottom: var(--space-8);
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 30%, transparent);
    background: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 8%, transparent);
}
.nd-batch-warn b { font-variant-numeric: tabular-nums; }
.nd-batch-mp-hint {
    margin-top: var(--space-8);
    font-size: var(--font-caption);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
.nd-batch-mp-hint b { color: var(--text-primary); font-weight: 600; }
.nd-batch-mp-hint.is-lack b,
.nd-batch-mp-hint.is-lack { color: var(--text-danger, var(--accent-crimson)); }

/* 多选行：左侧勾选框 + 右侧 body */
.nd-eq--check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10);
    padding-left: var(--space-10);
}
.nd-eq__check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    position: relative;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.nd-eq--check .nd-eq__body {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}
.nd-eq--check.is-checked {
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 10%, transparent), transparent 55%),
        var(--bg-panel);
}
.nd-eq--check.is-checked .nd-eq__check {
    border-color: var(--accent-gold);
    background: var(--accent-gold);
}
.nd-eq--check.is-checked .nd-eq__check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--bg-panel);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* 含铭文 / 高风险被勾上时，强化警示边 */
.nd-eq--check.is-inscribed.is-checked {
    border-color: color-mix(in srgb, #a78bfa 55%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, #a78bfa 14%, transparent), transparent 55%),
        var(--bg-panel);
}
.nd-eq--check.is-high-risk.is-checked {
    border-color: color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 60%, transparent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--text-danger, var(--accent-crimson)) 14%, transparent), transparent 50%),
        var(--bg-panel);
}
.nd-eq--check.is-high-risk.is-checked .nd-eq__check {
    border-color: var(--text-danger, var(--accent-crimson));
    background: var(--text-danger, var(--accent-crimson));
}
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
    .nd-eq--check.is-checked {
        border-color: var(--border-gold, var(--border-color));
        background: rgba(183, 120, 31, 0.1);
    }
    .nd-eq--check.is-inscribed.is-checked {
        border-color: rgba(167, 139, 250, 0.55);
        background: rgba(167, 139, 250, 0.12);
    }
    .nd-eq--check.is-high-risk.is-checked {
        border-color: rgba(183, 58, 49, 0.6);
        background: rgba(183, 58, 49, 0.13);
    }
}
.nd-eq__badge--rarity {
    border-color: currentColor;
    background: transparent;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   门户 A · 衙署笺 完整 1:1（覆盖旧 task/btn/revive/storage/immortal 皮肤）
   作用域：#courtPanel / #guardianPanel / #immortalPanel
   头部已迁 gc-panel-head（gc-rule + gc-title + gc-panel-sub），旧 panel-title 眉样式废弃。
   ═══════════════════════════════════════════════════════════ */

/* 分署卡间距 */
.portal-panel .court-card,
.portal-panel .guardian-card {
    margin-bottom: var(--space-10);
}
.portal-panel .court-card:last-child,
.portal-panel .guardian-card:last-child {
    margin-bottom: 0;
}

/* 扁平钮：门户内全部 btn-action / btn-icon 对齐设计 */
.portal-panel .btn-action,
.portal-panel .btn-icon,
.portal-panel .btn-trial,
.portal-panel .btn-court-salary,
.portal-panel .btn-send-code,
.portal-panel .btn-task-claim,
.portal-panel .btn-revive-other,
.portal-panel .guardian-section-btn {
    min-height: 36px;
    padding: 0 var(--space-12);
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-color) !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    font-size: var(--font-label) !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transform: none !important;
    background-image: none !important;
}
.portal-panel .btn-action:hover:not(:disabled),
.portal-panel .btn-icon:hover:not(:disabled),
.portal-panel .btn-court-salary:hover:not(:disabled),
.portal-panel .btn-trial:hover:not(:disabled) {
    color: var(--text-primary) !important;
    border-color: color-mix(in srgb, var(--accent-gold) 36%, transparent) !important;
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent) !important;
    transform: none !important;
}
.portal-panel .btn-court-salary,
.portal-panel .btn-trial,
.portal-panel .btn-task-claim,
.portal-panel .btn-action.btn-court-salary,
.portal-panel .immortal-ascend-btn,
.portal-panel .immortal-challenge-btn {
    border-color: color-mix(in srgb, var(--accent-gold) 40%, transparent) !important;
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent) !important;
    color: var(--text-gold) !important;
    font-weight: 600 !important;
}
.portal-panel--lingyuan .btn-court-salary,
.portal-panel--lingyuan .btn-task-claim,
.portal-panel--lingyuan .portal-btn--primary,
.portal-panel--lingyuan .guardian-actions .btn-icon.portal-btn--primary,
.portal-panel--lingyuan .guardian-slot-action .btn-icon {
    border-color: color-mix(in srgb, var(--accent-jade) 40%, transparent) !important;
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent) !important;
    color: var(--text-jade, var(--accent-jade)) !important;
}
.portal-panel--immortal .btn-court-salary,
.portal-panel--immortal .immortal-ascend-btn,
.portal-panel--immortal .immortal-challenge-btn,
.portal-panel--immortal .btn-trial {
    border-color: color-mix(in srgb, var(--accent-cyan, #7eb8b0) 40%, transparent) !important;
    background: color-mix(in srgb, var(--accent-cyan, #7eb8b0) 14%, transparent) !important;
    color: var(--text-cyan, var(--accent-cyan, #7eb8b0)) !important;
}
.portal-panel .btn-action:disabled,
.portal-panel .btn-icon:disabled,
.portal-panel .btn-court-salary:disabled {
    opacity: 0.45 !important;
}

/* 天策 tab：胶囊，压过 game-systems 实心渐变 */
.portal-panel .task-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: var(--space-6) !important;
    margin-bottom: var(--space-10) !important;
}
.portal-panel .task-tab {
    flex: 0 0 auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 var(--space-12) !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent) !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--text-secondary) !important;
    font-size: var(--font-label) !important;
    font-weight: 600 !important;
}
.portal-panel .task-tab:hover {
    color: var(--text-primary) !important;
    border-color: color-mix(in srgb, var(--accent-gold) 30%, transparent) !important;
}
.portal-panel .task-tab.active {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, transparent) !important;
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent) !important;
    background-image: none !important;
    color: var(--text-gold) !important;
    font-weight: 600 !important;
}
.portal-panel--lingyuan .task-tab.active {
    border-color: color-mix(in srgb, var(--accent-jade) 42%, transparent) !important;
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent) !important;
    color: var(--text-jade, var(--accent-jade)) !important;
}
.portal-panel #courtClaimAllBtn,
.portal-panel #guardianClaimAllBtn {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    min-height: 30px !important;
    padding: 0 var(--space-10) !important;
    font-size: var(--font-label) !important;
}

/* 任务卡 · 对齐设计 .task */
.portal-panel .task-card {
    border-radius: var(--radius-md) !important;
    padding: var(--space-10) var(--space-10) !important;
    background: color-mix(in srgb, var(--bg-panel) 55%, transparent) !important;
    border: 1px solid var(--border-color) !important;
    margin: 0 !important;
}
.portal-panel .task-card:hover {
    border-color: color-mix(in srgb, var(--accent-gold) 32%, var(--border-color)) !important;
}
.portal-panel .task-card.task-completed {
    border-color: color-mix(in srgb, var(--accent-gold) 36%, transparent) !important;
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent) !important;
}
.portal-panel .task-card.task-tutorial {
    border-left: 1px solid var(--border-color) !important; /* 禁左轨 */
    background: color-mix(in srgb, var(--bg-panel) 55%, transparent) !important;
}
.portal-panel .task-header {
    margin-bottom: var(--space-4);
    gap: var(--space-8);
}
.portal-panel .task-name {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
}
.portal-panel .task-desc {
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: var(--space-6);
}
.portal-panel .task-progress-bar {
    height: 3px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--border-color) 80%, transparent);
    margin-bottom: var(--space-6);
}
.portal-panel .task-progress-fill {
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--accent-gold) 70%, transparent);
}
.portal-panel--lingyuan .task-progress-fill {
    background: color-mix(in srgb, var(--accent-jade) 70%, transparent);
}
.portal-panel .task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.portal-panel .task-type-tag {
    border-radius: var(--radius-pill) !important;
    padding: var(--space-2) var(--space-8) !important;
    font-size: var(--font-micro) !important;
}
.portal-panel .task-type-tutorial {
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent) !important;
    color: var(--text-gold) !important;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 36%, transparent);
}
.portal-panel .task-empty,
.portal-panel .inventory-empty {
    text-align: center;
    padding: var(--space-24) var(--space-12);
    color: var(--text-muted);
    font-size: var(--font-body);
}

/* 引渡行 · 对齐设计 .revive */
.portal-panel .dead-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border-color);
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.portal-panel .dead-player-row:last-child {
    border-bottom: 0;
}
.portal-panel .dead-player-name {
    font-size: var(--font-label);
    color: var(--text-primary);
    font-weight: 600;
    min-width: 0;
}
.portal-panel .dead-player-name small {
    display: block;
    font-size: var(--font-caption);
    font-weight: 400;
    color: var(--text-muted);
    margin-top: var(--space-2);
}
.portal-panel .btn-revive-other {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    width: auto !important;
    white-space: nowrap;
}
.portal-panel .revive-thanks-list {
    margin-bottom: 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) 36%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    font-size: var(--font-label);
    color: var(--text-gold);
    line-height: 1.5;
}

/* 灵宝寄存列表 */
.portal-panel .storage-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.portal-panel .storage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}
.portal-panel .storage-item:last-child {
    border-bottom: 0 !important;
}

/* 仙界行动行 · 对齐设计 .action */
.portal-panel .immortal-actions {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-10);
}
.portal-panel .immortal-actions button {
    flex: 1 1 0;
    min-height: 36px !important;
}
.portal-panel .immortal-action-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.portal-panel .immortal-action {
    display: flex;
    flex-direction: row;
    gap: var(--space-10);
    align-items: flex-start;
    padding: var(--space-10) 0;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}
.portal-panel .immortal-action:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0;
}
.portal-panel .immortal-action:first-child {
    padding-top: 0;
}
.portal-panel .immortal-action__main {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.portal-panel .immortal-action__main b {
    display: block;
    width: 100%;
    font-size: var(--font-body);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    font-weight: 600;
}
.portal-panel .immortal-action__main span {
    display: block;
    width: 100%;
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.45;
}
.portal-panel .immortal-action__main small {
    display: block;
    width: 100%;
    margin-top: var(--space-4);
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.4;
}
.portal-panel .immortal-action > button,
.portal-panel .immortal-action__buttons > button {
    flex-shrink: 0;
    min-height: 32px !important;
    min-width: 56px;
}
.portal-panel .immortal-action__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.portal-panel .immortal-secondary-btn {
    border-color: var(--border-color) !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
}

/* 手机 WebView：portal 横排 + 通用 width:100% 会把文案列挤成一字竖排 */
@media (max-width: 520px) {
    .portal-panel .immortal-action {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-8);
    }
    .portal-panel .immortal-action__main {
        width: 100%;
        flex: 1 1 auto;
    }
    .portal-panel .immortal-action > button,
    .portal-panel .immortal-action__buttons {
        width: 100%;
        align-self: stretch;
    }
    .portal-panel .immortal-action > button {
        min-width: 0;
        width: 100%;
    }
    .portal-panel .immortal-action__buttons {
        flex-direction: row;
        gap: var(--space-8);
    }
    .portal-panel .immortal-action__buttons > button {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
}

/* 进度条 */
.portal-panel .immortal-progress {
    height: 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
    overflow: hidden;
}
.portal-panel .immortal-progress__fill {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent-cyan, #7eb8b0) 55%, transparent),
        color-mix(in srgb, var(--accent-gold) 70%, transparent)
    );
}
.portal-panel .immortal-progress span {
    font-size: var(--font-caption);
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: none;
}

/* 资源格统一 portal-stat 气质 */
.portal-panel .immortal-resource-grid > div {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 70%, transparent);
    min-height: 52px;
    padding: var(--space-8) var(--space-10);
}
.portal-panel .immortal-resource-grid span {
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.portal-panel .immortal-resource-grid b {
    font-size: var(--font-body);
    color: var(--text-primary);
    font-weight: 600;
}

/* 里程碑 */
.portal-panel .immortal-milestone {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
}
.portal-panel .immortal-milestone--done {
    border-color: color-mix(in srgb, var(--accent-cyan, #7eb8b0) 36%, transparent);
    background: color-mix(in srgb, var(--accent-cyan, #7eb8b0) 10%, transparent);
}

/* 污染：去掉左轨 */
.portal-panel .pollution-penalty {
    border-left: 0 !important;
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 34%, transparent);
    border-radius: var(--radius-md);
}

/* 入庭表单 */
.portal-panel .bind-field label {
    font-size: var(--font-label);
    color: var(--text-muted);
}
.portal-panel .bind-field input {
    min-height: 36px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-panel) 80%, transparent);
    color: var(--text-primary);
}

/* 灵渊本体卡与本座卡间距 */
#lingyuanEntryBox > .guardian-card {
    margin-top: 0;
}
#guardianSlotList > .guardian-card {
    margin-top: 0;
}
.guardian-board-wrap {
    margin-top: var(--space-2);
}

/* 排行：纳入卡壳 */
.portal-panel--lingyuan .guardian-board-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    padding: var(--space-12);
}
.portal-panel--lingyuan .guardian-section-btn {
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--space-4);
}

/* #9688 污染分元术语说明惊叹号：hover 出 title，点击弹 toast */
.pollution-term-tip {
    display: inline-grid;
    place-items: center;
    width: 14px; height: 14px;
    margin-left: 2px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-panel);
    color: var(--text-muted);
    /* 14px 圆内放最小字号档；行高锁 1 防止真机字体行盒竖向裁切 */
    font-size: var(--font-micro);
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    vertical-align: 1px;
    user-select: none;
}
.pollution-term-tip:hover {
    color: var(--text-gold);
    border-color: var(--accent-gold);
}

/* 义结金兰侧栏：卡片 / 成员行 / 立帖多选，token 对齐好友空态与 gc 弹窗 */
#swornPanel > .gc-panel-head {
    padding-right: calc(var(--space-48) + var(--space-40));
}
.sworn-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
.sworn-empty-act {
    display: flex;
    justify-content: center;
    margin-top: var(--space-16);
}
.sworn-empty-act .modal-btn {
    min-height: 44px;
    min-width: 120px;
}
.sworn-card {
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}
.sworn-card--invite {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
}
.sworn-card__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
}
.sworn-card__head-text {
    min-width: 0;
    flex: 1;
}
.sworn-card__head-acts {
    flex: none;
    display: inline-flex;
    align-items: center;
}
.sworn-card__title {
    margin: 0;
    font-size: var(--font-body-lg);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}
.sworn-card__sub {
    margin: var(--space-4) 0 0;
    font-size: var(--font-caption);
    color: var(--text-muted);
    line-height: 1.5;
}
.sworn-card__acts {
    display: flex;
    gap: var(--space-8);
    margin-top: var(--space-10);
}
.sworn-card__acts .modal-btn {
    flex: 1;
    min-height: 44px;
}
.sworn-members {
    list-style: none;
    margin: var(--space-10) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
/* #10768：本伙进行中的邀新 */
.sworn-join-list {
    margin-top: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.sworn-join-row {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-6) var(--space-8);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}
.sworn-join-row__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}
.sworn-join-row__name {
    font-size: var(--font-label);
    color: var(--text-primary);
}
.sworn-member {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--font-label);
    color: var(--text-primary);
}
.sworn-member__epithet {
    color: var(--text-gold);
    font-size: var(--font-caption);
}
.sworn-member__meta {
    font-size: var(--font-micro);
    color: var(--text-muted);
}
.sworn-member__right {
    margin-left: auto;
    display: inline-flex;
    gap: var(--space-6);
}
.sworn-member__wait {
    font-size: var(--font-micro);
    color: var(--text-danger);
}
.sworn-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin-top: var(--space-10);
}
.sworn-field__lab,
.sworn-field__hint {
    font-size: var(--font-caption);
    color: var(--text-muted);
}
.sworn-field__hint {
    margin: var(--space-8) 0 var(--space-6);
}
.sworn-pick {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-height: 260px;
    overflow-y: auto;
}
.sworn-pick__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-height: 44px;
    padding: var(--space-10) var(--space-12);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    color: var(--text-primary);
    font-size: var(--font-label);
    text-align: left;
    cursor: pointer;
}
.sworn-pick__row.is-on {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
}
.sworn-pick__mark {
    flex: none;
    color: var(--text-muted);
}
.sworn-pick__row.is-on .sworn-pick__mark {
    color: var(--text-gold);
}
.sworn-action {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0 0 var(--space-6);
    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-size: var(--font-action);
    cursor: pointer;
}
.sworn-action--warn {
    color: var(--text-danger);
}
.sworn-action:last-child {
    margin-bottom: 0;
}