/* ===== Build Library Feed ===== */
/*
 * 卡片正常高度 150px，点击「展开」后在卡片下方出现构筑预览面板。
 * 面板第一行放属性 / 装备 / 技能 / 珠宝，第二行放整宽天赋树。同时只能展开 1 张卡。
 * 信息流采用 1 行 2 列布局，展开的 entry 跨满整行。
 */

.build-feed-panel {
    --feed-card-h: 154px;
    --feed-card-media-w: 114px;
    --feed-comment-preview-h: 257px;
    /*
     * viewport 是装备 / 技能 / 天赋树真正可见的像素高度。
     * 整体面板高度 = viewport + 面板上下 padding（label 文本已移除，不再占高度）。
     * 装备和技能以 --feed-scale = viewport / 600 等比缩放，保证底部不会被裁掉。
     */
    --feed-viewport-h: 474px;
    --feed-tree-h: 550px;
    --feed-scale: 0.79;
    --feed-stats-w: 230px;
    --feed-equip-w: 611px;
    --feed-jewel-w: 48px;
    --feed-skill-w: 608px;
    --feed-expand-padding: 8px;
    --feed-expand-h: calc(var(--feed-viewport-h) + var(--feed-tree-h) + 16px + var(--feed-expand-padding) * 2);
    margin-bottom: 20px;
    padding: 22px;
}

.build-feed-panel.panel {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* ===== Filter row (picker + filters) ===== */

.build-feed-filter-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 18px;
}

.build-feed-filter-row > .build-feed-filters {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

/* ===== Owned-build picker card ===== */

.build-feed-picker {
    position: relative;
    flex: 0 0 200px;
    max-width: 220px;
}

.build-feed-picker-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    /* v4.2：去掉 height:100%（父列已改成 align-items:center，不再 stretch），
     * 改用 min-height 让空态和已选态都有"厚重"视觉权重；空态会再加高到 96。 */
    min-height: 80px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px dashed var(--line-bright);
    background: var(--card-bg-solid);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s, background 0.16s, box-shadow 0.16s, transform 0.12s;
}

.build-feed-picker-card:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.build-feed-picker-card:not(:disabled):hover,
.build-feed-picker.is-open .build-feed-picker-card {
    border-color: var(--brand);
    background: var(--panel-strong);
    box-shadow: var(--soft-shadow);
}

.build-feed-picker-card--empty {
    /* v4.2：空态改成图标 + 文字居中；最小高度从 80 拉到 96，
     * 视觉权重接近左栏「职业 + 升华」两行卡片堆叠，不会再被旁边衬得扁扁的。 */
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    border-style: dashed;
    text-align: center;
}

.build-feed-picker-card--empty:not(:disabled):hover {
    transform: translateY(-1px);
}

.build-feed-picker-card--selected {
    border-style: solid;
    border-color: var(--line-bright);
}

.build-feed-picker-card__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--chip-bg);
    color: var(--brand-2);
    font-size: 22px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
}

.build-feed-picker-card__placeholder {
    flex: 1 1 auto;
    color: var(--text);
    opacity: 0.8;
    font-size: 13px;
    line-height: 1.35;
}

.build-feed-picker-card__thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-feed-picker-card__thumb img,
.build-feed-picker-option__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.build-feed-picker-card__thumb-fallback,
.build-feed-picker-option__thumb-fallback {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-2);
}

.build-feed-picker-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.build-feed-picker-card__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-feed-picker-card__meta {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-feed-picker-card__clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-gold-tint);
    color: var(--muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}

.build-feed-picker-card__clear:hover {
    background: var(--danger-bg);
    color: var(--danger-text);
}

/* Dropdown */

.build-feed-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: 320px;
    max-height: 360px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--line-bright);
    background: var(--panel);
    box-shadow: var(--deep-shadow);
}

.build-feed-picker-group + .build-feed-picker-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--divider-soft);
}

/* Picker 下拉里的赛季 / 模式筛选器 */

.build-feed-picker-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--divider-soft);
}

.build-feed-picker-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.build-feed-picker-filter-label {
    flex: 0 0 auto;
    padding-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.build-feed-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
}

.build-feed-picker-chip {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--card-bg-solid);
    color: var(--text);
    font-size: 11px;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.build-feed-picker-chip:hover {
    background: var(--chip-bg-hover);
    border-color: var(--line-bright);
    color: var(--text);
}

.build-feed-picker-chip.is-active {
    background: var(--chip-bg-active);
    border-color: var(--brand);
    color: var(--brand-2);
    font-weight: 700;
}

.build-feed-picker-heading {
    margin-bottom: 6px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.build-feed-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.build-feed-picker-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
}

.build-feed-picker-option:hover {
    background: var(--chip-bg);
    border-color: var(--line);
}

.build-feed-picker-option__thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg-solid);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-feed-picker-option__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.build-feed-picker-option__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.build-feed-picker-option__meta {
    font-size: 11px;
    color: var(--muted);
}

.build-feed-picker-empty {
    padding: 8px;
    font-size: 12px;
    color: var(--muted);
}

/* ===== Filters ===== */

.build-feed-filters {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

.build-feed-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.build-feed-field--sm {
    max-width: 150px;
}

.build-feed-field span {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.build-feed-field select,
.build-feed-field input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

.build-feed-field select:focus,
.build-feed-field input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--accent-gold-tint);
    background: var(--panel);
}

/* ===== Status / Empty ===== */

.build-feed-status,
.build-feed-empty {
    padding: 34px 18px;
    border-radius: 14px;
    text-align: center;
    color: var(--muted);
}

.build-feed-status {
    border: 1px dashed var(--line);
    background: var(--card-bg-solid);
}

.build-feed-status--error {
    border-color: var(--danger-border);
    color: var(--danger-text);
    background: var(--danger-bg);
}

.build-feed-empty {
    border: 1px dashed var(--line);
    background: var(--card-bg-solid);
}

/* ===== Feed list (2 columns) ===== */

.build-feed-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
}

/*
 * entry 是卡片 + 展开面板的外包装。默认状态下只显示卡片部分；
 * 展开后让两块拼成一张连续的容器，彼此之间只用一条分割线分开，
 * 不再各自带边框 / 圆角 / 阴影 / 间距。
 */
.build-feed-entry {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transition: none;
}

.build-feed-list > .build-feed-entry + .build-feed-entry {
    position: relative;
    margin-top: 2px;
    padding-top: 2px;
    border-top: 0;
}

.build-feed-list > .build-feed-entry + .build-feed-entry::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-image: repeating-linear-gradient(
        90deg,
        var(--divider-soft) 0 18px,
        transparent 18px 32px
    );
    pointer-events: none;
}

:root:not([data-theme="dark"]) .build-feed-list > .build-feed-entry + .build-feed-entry::before {
    background-image: repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--line-bright) 82%, #475569) 0 18px,
        transparent 18px 32px
    );
}

.build-feed-entry--expanded {
    grid-column: 1 / -1;
    box-shadow: none;
}

/* ===== Card =====
 * 卡片内部布局保持不变，但外部的边框 / 背景 / 阴影全部交给 .build-feed-entry，
 * 这样展开时就是一个容器自上而下长高，而不是两块独立卡片堆叠。
 */

.build-feed-card {
    display: block;
    padding: 10px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
}

/* 主区：头像 + 中列主体信息 + 第 3 列（作者/计数）+（可选）第 4 列（相似度）
 *   · 普通模式：三列（头像 / 主体 / 作者+计数）
 *   · 相似玩法激活：四列，第 4 列由相似度独占，作者/计数仍在第 3 列
 * 所有列同高，high() 由 align-items: stretch 保证。 */
.build-feed-card__shell {
    display: grid;
    grid-template-columns: var(--feed-card-media-w) minmax(0, 1fr);
    gap: 14px;
    height: var(--feed-card-h);
    min-height: 0;
}

.build-feed-card--expanded.build-feed-card--long-summary .build-feed-card__shell {
    height: var(--feed-card-h);
    max-height: var(--feed-card-h);
}

.build-feed-card__content {
    min-width: 0;
    min-height: 0;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    padding-left: 14px;
    border-left: 0;
    overflow: hidden;
}

.build-feed-card__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 205px;
    gap: 12px;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* 相似玩法激活时：多一列放相似度（独占），高度仍保持和头像一致（--feed-card-h），
 * 让卡片整体视觉与左侧头像方图齐平。相似度列内部自己撑满 150px 纵向空间。 */
.build-feed-card--with-similar .build-feed-card__main {
    grid-template-columns: minmax(0, 1fr) 205px 240px;
}

.build-feed-card--with-similar .build-feed-card__info {
    padding-bottom: 0;
}

.build-feed-card--with-similar .build-feed-card__actions--bottom {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    min-width: 0;
}

.build-feed-card--with-similar .build-feed-card__source-corner {
    max-width: 180px;
}

.build-feed-card--with-similar .build-feed-card__sim-col {
    height: 100%;
    padding-left: 0;
    border-left: 0;
}

/* 第 3 列：作者 + 计数 */
.build-feed-card__aside {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: stretch;
    justify-content: flex-start;
    overflow: visible;
}

.build-feed-card__aside-owner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
    min-height: 18px;
    /* 头像右下角的 VIP 徽章会在头像右侧 / 下方各突出 4px，
     * 这里留出 6px 缓冲，避免徽章被卡片/aside 容器的 overflow:hidden 裁掉。 */
    padding: 2px 4px 2px 0;
}

.build-feed-card__aside-rating,
.build-feed-card__aside-date {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
}

.build-feed-card__date-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    max-width: 100%;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.build-feed-card__side-meta {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
    margin-top: auto;
}

.build-feed-card__side-meta-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.build-feed-card__side-meta-chip,
.build-feed-card__side-meta .build-feed-card__source-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.build-feed-card__side-meta-chip--mode {
    color: var(--muted);
}

.build-feed-card__side-meta .build-feed-card__source-badge {
    color: var(--muted);
}

.build-feed-card__side-meta .build-feed-card__source-badge--cn {
    color: var(--muted);
}

/* Right column moderation placeholders. */
.build-feed-card__moderation-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    width: 145px;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    align-self: flex-end;
    margin-top: auto;
    margin-bottom: 6px;
    overflow: visible;
}

.build-feed-card__moderation-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    width: 0;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    pointer-events: none;
    transform: translateX(6px);
    transition: width 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.build-feed-card__moderation-actions.is-open .build-feed-card__moderation-panel {
    width: 104px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.build-feed-card__moderation-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card-bg-solid) 82%, transparent);
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.build-feed-card__moderation-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--accent-green) 34%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent-green) 8%, transparent);
    color: var(--accent-green);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.build-feed-card__moderation-toggle:hover,
.build-feed-card__moderation-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--accent-green) 68%, transparent);
    background: color-mix(in srgb, var(--accent-green) 14%, transparent);
    outline: none;
}

.build-feed-card__moderation-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    transform: translateX(-1px);
}

.build-feed-card__moderation-actions.is-open .build-feed-card__moderation-toggle-icon {
    transform: rotate(180deg) translateX(-1px);
}

.build-feed-card__moderation-btn--feature {
    border-color: color-mix(in srgb, #facc15 46%, transparent);
    background: color-mix(in srgb, #facc15 10%, transparent);
    color: #facc15;
}

.build-feed-card__moderation-btn--pin {
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    background: color-mix(in srgb, var(--brand) 8%, transparent);
    color: var(--brand);
}

.build-feed-card__moderation-btn:not([disabled]):hover {
    transform: translateY(-1px);
}

.build-feed-card__moderation-btn--feature:not([disabled]):hover {
    border-color: #facc15;
    background: color-mix(in srgb, #facc15 18%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, #facc15 18%, transparent);
}

.build-feed-card__moderation-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.48;
    filter: saturate(0.55);
    border-color: var(--line);
    background: color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
    color: var(--chip-muted);
    box-shadow: none;
    transform: none;
}

/* Similarity column occupies its own right-side track. */
.build-feed-card__sim-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.build-feed-card__sim-col .build-feed-card__similar {
    height: 100%;
    flex: 1 1 auto;
}

/* ----- Portrait ----- */

.build-feed-card__media {
    display: block;
    position: relative;
    z-index: 2;
    isolation: isolate;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: visible;
    background: transparent;
    align-self: stretch;
    min-height: 0;
    cursor: pointer;
    text-decoration: none;
}

.build-feed-card__media-tags {
    position: absolute;
    z-index: 2;
    top: 7px;
    left: 7px;
    right: 7px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    max-height: 58px;
    overflow: hidden;
    pointer-events: none;
}

.build-feed-card__media-tags .build-feed-post-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: 0;
    min-width: 0;
}

.build-feed-card__media-tags .poe2-post-meta-badge,
.build-feed-card__media-tags .build-feed-card__source-badge {
    height: 19px;
    padding: 0 6px;
    border-radius: 6px;
    border-color: color-mix(in srgb, var(--post-meta-accent, var(--brand)) 45%, rgba(0, 0, 0, 0.24));
    background: color-mix(in srgb, var(--post-meta-accent, var(--brand)) 30%, rgba(8, 10, 16, 0.72));
    color: color-mix(in srgb, var(--post-meta-accent, var(--brand)) 38%, #fff);
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(5px);
}

.build-feed-card__media-tags .build-feed-card__source-badge {
    --post-meta-accent: var(--accent-blue);
}

.build-feed-card__media-level {
    position: absolute;
    left: 50%;
    bottom: 7px;
    z-index: 2;
    transform: translateX(-50%);
    min-width: 38px;
    padding: 3px 7px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--accent-green) 48%, rgba(0, 0, 0, 0.24));
    background: color-mix(in srgb, var(--accent-green) 22%, rgba(8, 10, 16, 0.76));
    color: color-mix(in srgb, var(--accent-green) 38%, #fff);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    backdrop-filter: blur(5px);
}

.build-feed-card__media-level--novice {
    border-color: color-mix(in srgb, #ffffff 78%, rgba(0, 0, 0, 0.22));
    background: color-mix(in srgb, #f8fafc 84%, rgba(15, 23, 42, 0.16));
    color: #1f2937;
    text-shadow: none;
}

.build-feed-card__media-level--blue {
    border-color: color-mix(in srgb, #38bdf8 74%, rgba(0, 0, 0, 0.22));
    background: color-mix(in srgb, #0ea5e9 34%, rgba(8, 10, 16, 0.72));
    color: #e0f2fe;
    box-shadow: 0 0 12px color-mix(in srgb, #38bdf8 34%, transparent);
}

.build-feed-card__media-level--gold {
    border-color: color-mix(in srgb, #fde047 88%, rgba(0, 0, 0, 0.18));
    background: color-mix(in srgb, #facc15 68%, rgba(8, 10, 16, 0.36));
    color: #fffbe6;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38);
    box-shadow:
        0 0 0 1px color-mix(in srgb, #fff7ad 22%, transparent),
        0 0 16px color-mix(in srgb, #fde047 58%, transparent),
        0 0 28px color-mix(in srgb, #facc15 28%, transparent);
}

.build-feed-card__media-level--red {
    border-color: color-mix(in srgb, #fb7185 78%, rgba(0, 0, 0, 0.2));
    background: color-mix(in srgb, #ef4444 40%, rgba(8, 10, 16, 0.68));
    color: #ffe4e6;
    box-shadow: 0 0 14px color-mix(in srgb, #ef4444 42%, transparent);
}

.build-feed-card__media-level--max {
    border-color: #ff3b3b;
    background: color-mix(in srgb, #dc2626 56%, rgba(8, 10, 16, 0.58));
    color: #fff1f2;
    box-shadow:
        0 0 0 1px color-mix(in srgb, #ff7a7a 42%, transparent),
        0 0 18px color-mix(in srgb, #ef4444 72%, transparent),
        0 0 32px color-mix(in srgb, #ef4444 38%, transparent);
}

.build-feed-card__media:hover,
.build-feed-card__media:focus-visible {
    outline: none;
}

.build-feed-card__media:hover img,
.build-feed-card__media:focus-visible img {
    filter: brightness(1.08);
}

.build-feed-card--expanded.build-feed-card--long-summary .build-feed-card__media {
    height: var(--feed-card-h);
    align-self: start;
}

.build-feed-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 10px;
}

.build-feed-card__media-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-2);
    font-size: 24px;
    font-weight: 800;
}

/* ----- Info ----- */

.build-feed-card__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    padding: 0;
    min-height: 0;
    overflow: hidden;
    --feed-summary-line-h: 18.5px;
    --feed-summary-h: 74px;
}

.build-feed-card__title {
    display: inline-block;
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.45;
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease, transform 160ms ease, text-shadow 160ms ease;
}

.build-feed-card__title-zone {
    display: block;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.build-feed-card__title:hover,
.build-feed-card__title:focus-visible,
.build-feed-card__title-zone:hover .build-feed-card__title,
.build-feed-card__title-zone:focus-visible .build-feed-card__title {
    color: var(--accent-blue);
    transform: translateY(-2px);
    text-shadow: 0 6px 16px color-mix(in srgb, var(--accent-blue) 28%, transparent);
}

.build-feed-card__title-zone:focus-visible {
    outline: none;
}

/* headline 行：标题 · Lv · 上传日期，强制单行省略 */
.build-feed-card__title-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
    min-width: 0;
    min-height: 20px;
}

.build-feed-card__title-tags .build-feed-post-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-left: 0;
    min-width: 0;
}

.build-feed-card__title-tags .build-feed-card__date-chip {
    height: 20px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.build-feed-card__title-tags .poe2-post-meta-badge,
.build-feed-card__title-tags .build-feed-card__source-badge,
.build-feed-card__title-tag-text {
    height: 20px;
    padding: 0 7px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    line-height: 18px;
}

.build-feed-card__title-tags .build-feed-card__source-inline {
    display: inline-flex;
    align-items: center;
    height: 20px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    white-space: nowrap;
}

.build-feed-card__title-tag-text {
    display: inline-flex;
    align-items: center;
    max-width: 220px;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 30%, transparent);
    background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
    color: color-mix(in srgb, var(--accent-blue) 72%, var(--text));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-feed-card__headline {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: visible;
    flex: 0 0 auto;
    min-height: 24px;
    position: relative;
    z-index: 2;
}

.build-feed-card__headline .build-feed-card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 0 1 auto;
    white-space: nowrap;
    padding-top: 1px;
}

.build-feed-card__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
    color: var(--muted);
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
}

.build-feed-card__meta .build-feed-post-meta {
    margin-left: 0;
}

.build-feed-card__headline-sep {
    color: var(--muted);
    opacity: 0.5;
    flex: 0 0 auto;
}

.build-feed-card__headline-level,
.build-feed-card__headline-date {
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    flex: 0 0 auto;
}

.build-feed-card__headline-date--right {
    margin-left: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
}

.build-feed-card__source-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    color: var(--brand);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.build-feed-card__source-badge--cn {
    border-color: color-mix(in srgb, var(--accent-green) 32%, transparent);
    background: color-mix(in srgb, var(--accent-green) 10%, transparent);
    color: var(--accent-green);
}

/* 标题下方的只读评分计数条：关注 · 推荐 · 对比 */
.build-feed-card__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 12px;
    margin-top: 0;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.2;
}

.build-feed-card__rating-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.build-feed-card__rating-count {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.build-feed-card__rating-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--muted);
    opacity: 0.88;
}

.build-feed-card__rating-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.build-feed-card__summary {
    flex: 0 0 auto;
    height: var(--feed-summary-h);
    min-height: var(--feed-summary-h);
    max-height: var(--feed-summary-h);
    margin-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.build-feed-card__summary-text,
.build-feed-card__summary-placeholder {
    color: var(--text);
    opacity: 0.9;
    font-size: 13px;
    line-height: var(--feed-summary-line-h);
    word-break: break-word;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    /* 默认卡片高度 150px：headline (~20px) + gap (~6px) 后简介大约 110px，5 行可填满；
     * 相似玩法激活时卡片高到 200px，简介区也放宽到 7 行（见 --with-similar 覆盖规则）。 */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent-blue) 42%, transparent) transparent;
    /* 覆盖 .build-discussion-summary-text 从 poe2-deep-discussion.css 继承的属性，
     * 否则 white-space: pre-wrap 会让多行换行失效、浪费空间。 */
    white-space: normal;
    margin: 0;
    padding: 0 8px 0 0;
    flex: 0 0 auto;
    max-height: var(--feed-summary-h);
}

.build-feed-card .build-feed-card__summary-text,
.build-feed-card .build-feed-card__summary-placeholder {
    line-height: var(--feed-summary-line-h);
    white-space: normal;
    max-height: var(--feed-summary-h);
    min-height: 0;
}

/* 卡片高度现已统一为 --feed-card-h，相似玩法激活也不再加高，
 * 所以 summary 行数维持和普通卡片一致，无需额外覆盖。 */

.build-feed-card__summary-placeholder {
    color: var(--muted);
    opacity: 0.7;
    font-style: italic;
}

/* 富文本里的引用芯片（装备/技能/构筑等），样式与详情页 .discussion-inline-ref 对齐但更紧凑 */
.build-feed-card__summary-text::-webkit-scrollbar,
.build-feed-card__summary-placeholder::-webkit-scrollbar {
    width: 6px;
}

.build-feed-card__summary-text::-webkit-scrollbar-track,
.build-feed-card__summary-placeholder::-webkit-scrollbar-track {
    background: transparent;
}

.build-feed-card__summary-text::-webkit-scrollbar-thumb,
.build-feed-card__summary-placeholder::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-blue) 36%, transparent);
}

.build-feed-card__summary-text .discussion-inline-ref {
    --ref-accent: #c8c8c8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 2px 2px 0;
    padding: 1px 6px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--ref-accent) 38%, transparent);
    background: color-mix(in srgb, var(--ref-accent) 9%, transparent);
    color: var(--ref-accent);
    font-size: 1em;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    vertical-align: baseline;
}

.build-feed-card__summary-text .discussion-inline-ref.is-skill {
    --ref-accent: #7a97fe;
}

.build-feed-card__summary-text .discussion-inline-ref.is-build {
    --ref-accent: var(--accent-purple);
}

.build-feed-card__summary-text .discussion-inline-ref.is-jewel {
    --ref-accent: #c8c8c8;
}
.build-feed-card__summary-text .discussion-inline-ref.is-rarity-normal {
    --ref-accent: #c8c8c8;
}
.build-feed-card__summary-text .discussion-inline-ref.is-rarity-magic {
    --ref-accent: #8888ff;
}
.build-feed-card__summary-text .discussion-inline-ref.is-rarity-rare {
    --ref-accent: #ffff77;
}
.build-feed-card__summary-text .discussion-inline-ref.is-rarity-unique {
    --ref-accent: #af6025;
}

:root:not([data-theme="dark"]) .build-feed-card__summary-text .discussion-inline-ref.is-rarity-rare {
    --ref-accent: #8a6500;
}

.build-feed-card__summary-text .discussion-inline-ref-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.build-feed-card__summary-text .discussion-inline-ref-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.build-feed-card__summary-text .discussion-inline-ref-label {
    display: inline-block;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.build-feed-card__summary-text a {
    color: var(--teal);
    text-decoration: none;
}

/* 富文本引用 chip 里主图标 / 辅助宝石图标的样式
 * discussion.css 里的规则只在 .poe2-discussion-page / .banner-inline-discussion 作用域下生效，
 * 信息流卡片不在那两个作用域里，所以这里显式再补一份，保证辅助宝石能正常显示。 */
.build-feed-card__summary-text .discussion-inline-ref-icon,
.build-feed-card__summary-text .discussion-inline-ref-support {
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
}

.build-feed-card__summary-text .discussion-inline-ref-icon img,
.build-feed-card__summary-text .discussion-inline-ref-support img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.build-feed-card__summary-text .discussion-inline-ref-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-feed-card__summary-text .discussion-inline-ref-supports {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin-left: 2px;
}

.build-feed-card__summary-text .discussion-inline-ref.is-skill .discussion-inline-ref-supports::before,
.build-feed-card__summary-text .discussion-inline-ref.is-skill .discussion-inline-ref-supports::after {
    flex: 0 0 auto;
    color: currentColor;
    font-weight: inherit;
    line-height: 1;
}

.build-feed-card__summary-text .discussion-inline-ref.is-skill .discussion-inline-ref-supports::before {
    content: "(";
}

.build-feed-card__summary-text .discussion-inline-ref.is-skill .discussion-inline-ref-supports::after {
    content: ")";
}

.build-feed-card__summary-text .discussion-inline-ref-support-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

/* 右列顶部的作者 chip（UserInfoRenderer 渲染头像 + 名字，可点击） */
.build-feed-card__aside-owner .build-feed-card__owner {
    font-size: inherit;
    font-weight: 600;
    max-width: 100%;
    /* 这里不 overflow:hidden，否则头像右下角的 VIP 徽章/光晕会被裁掉；
     * 真正收拾过长用户名的 overflow 规则放在 .user-info__name 上。 */
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* 右列里的关注/对比/推荐计数条：右对齐，紧凑版 */
.build-feed-card__aside-rating .build-feed-card__rating {
    margin: 0;
    justify-content: flex-end;
}

/* 把 UserInfoRenderer 的外层盒子压成 inline-flex，和 meta 行对齐 */
.build-feed-card__owner .user-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.build-feed-card__owner .user-info__name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
}

.build-feed-card__owner-placeholder {
    color: inherit;
    opacity: 0.7;
}

/* ----- Actions ----- */

.build-feed-card__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    justify-content: center;
    width: 108px;
}

/* 新版：底部横向按钮栏，紧凑式三段布局
 *   ┌ 展开 · 对比 ┊ 推荐 · 关注 ┊ 讨论 · 相似度明细 ─────────────────────┐
 * 五个按钮从左到右紧挨着排，每两个一组，组间用竖向虚线做**细分隔**（不是撑开）。
 * 整排按钮靠左对齐，右侧留白。 */
.build-feed-card__actions--bottom {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    gap: 0;
    padding-top: 2px;
    border-top: 0;
    flex: 0 0 auto;
    margin-top: auto;
    position: relative;
    z-index: 4;
}

.build-feed-card__aside .build-feed-card__actions--bottom {
    padding-top: 1px;
    padding-right: 2px;
    margin-top: 0;
    overflow: visible;
}

.build-feed-card__actions-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.build-feed-card__actions-right {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    min-width: 0;
}

/* 组间的竖向虚线分隔符：纯装饰，aria-hidden；高度和按钮大致对齐 */
.build-feed-card__actions-sep {
    display: none;
    width: 0;
    height: 18px;
    border-left: 0;
    flex: 0 0 auto;
}

/* 图标版按钮：纯图标，不占用文字宽度；悬停放大 + 柔光晕 + tooltip（浏览器 title） */
.build-feed-card__action-btn--icon,
a.build-feed-card__action-btn--icon {
    min-width: 0 !important;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    border-radius: 7px;
    background: var(--card-bg-solid);
    border: 1px solid var(--line);
    color: var(--muted);
    transition: color 150ms ease, background-color 150ms ease,
                border-color 150ms ease, box-shadow 180ms ease, transform 120ms ease;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.build-feed-card__action-btn--icon:hover:not([disabled]) {
    background: var(--chip-bg-hover);
    border-color: var(--line-bright);
    color: var(--brand-2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-gold-tint-strong);
}

.build-feed-card__action-btn--icon:active:not([disabled]) {
    transform: translateY(0);
}

.build-feed-card__action-btn--icon[disabled],
.build-feed-card__action-btn--icon.build-feed-card__action-btn--muted[disabled] {
    /* 禁用态（例如自己的构筑 → 不能关注 / 推荐自己）：
       - 指针禁用、饱和降低
       - 强制清掉 hover 会改的 border/bg/color/transform/shadow，
         避免鼠标滑过时仍然抖动或变色（视觉上"以为能点"）
       - 注意：不能用 pointer-events:none —— 否则浏览器不会触发原生 title
         tooltip，用户就看不到「不可以关注/收藏自己的构筑」这类提示。
         disabled 属性本身已经阻止点击，所以保留 hover 事件即可。 */
    cursor: not-allowed;
    opacity: 0.4;
    background: var(--card-bg-solid);
    border-color: var(--line);
    color: var(--chip-muted);
}

.build-feed-card__action-btn--icon[disabled]:hover,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--muted[disabled]:hover {
    /* 禁用态 hover：保留默认样式，只让 title 原生 tooltip 出现，按钮本身不发生视觉变化 */
    background: var(--card-bg-solid);
    border-color: var(--line);
    color: var(--chip-muted);
    transform: none;
    box-shadow: none;
}

/* active 态：整个按钮着金色调 */
.build-feed-card__action-btn--icon.build-feed-card__action-btn--active {
    background: var(--chip-bg-active);
    border-color: var(--brand);
    color: var(--brand-2);
    box-shadow: 0 0 10px var(--accent-gold-tint-strong) inset;
}

/* muted（未登录 / 不可用）态：灰化但仍允许点击触发登录提示 */
.build-feed-card__action-btn--icon.build-feed-card__action-btn--muted {
    opacity: 0.7;
}

/* 变体专属高亮色（按用户分色方案）：
   - 展开(expand) / 对比(compare)        → 浅绿   (var(--accent-green))
   - 点赞(follow) / 收藏(recommend)       → 浅蓝   (var(--brand))
   - 讨论(discussion)                     → 浅紫   (var(--accent-purple))
   hover 和 is-active 都用同样的 tint 色系；默认态仍由下面各自的 `--variant` 规则控制。 */
.build-feed-card__action-btn--icon.build-feed-card__action-btn--follow.build-feed-card__action-btn--active,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--follow:hover:not([disabled]),
.build-feed-card__action-btn--icon.build-feed-card__action-btn--recommend.build-feed-card__action-btn--active,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--recommend:hover:not([disabled]) {
    color: var(--brand);
}
.build-feed-card__action-btn--icon.build-feed-card__action-btn--compare.build-feed-card__action-btn--active,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--compare:hover:not([disabled]) {
    color: var(--accent-green);
}
.build-feed-card__action-btn--icon.build-feed-card__action-btn--discussion.build-feed-card__action-btn--active,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--discussion:hover:not([disabled]) {
    color: var(--accent-purple);
}

.build-feed-card__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.build-feed-card__action-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-width: 2;
    fill: none;
}

.build-feed-card__action-badge {
    --bf-action-badge-accent: var(--accent-green);
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bf-action-badge-accent) 68%, transparent);
    background: color-mix(in srgb, var(--bf-action-badge-accent) 24%, var(--card-bg-solid));
    color: color-mix(in srgb, var(--bf-action-badge-accent) 78%, var(--text));
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--card-bg-solid), 0 0 8px color-mix(in srgb, var(--bf-action-badge-accent) 22%, transparent);
    pointer-events: none;
}

.build-feed-card__action-badge--recommend,
.build-feed-card__action-badge--follow {
    --bf-action-badge-accent: var(--brand);
}

.build-feed-card__action-badge--discussion {
    --bf-action-badge-accent: var(--accent-green);
}

/* 无障碍隐藏的文字（留给屏幕阅读器，视觉上不可见但 DOM 里存在） */
.build-feed-card__action-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.build-feed-card__actions--bottom .build-feed-card__action-btn:not(.build-feed-card__action-btn--icon),
.build-feed-card__actions--bottom .build-feed-card__action-link:not(.build-feed-card__action-btn--icon) {
    min-width: 80px;
}

/* ===== 卡片右列：相似度条形图区（5 条 bar：综合 + 装备 / 珠宝 / 天赋 / 主技能） =====
 * 外框 .build-feed-card__similar：撑满右列剩余高度，内部 bar 等分纵向空间。
 * 单条 bar：label 在左（栏宽固定便于对齐）→ track 中间撑满 → 数值靠右。
 * 交互视觉：
 *   · is-primary（综合）整条更亮、label 加粗，在视觉上和另外 4 条区分；
 *   · is-active（用户当前选中的维度）加高亮填色 + 左侧小圆点指示；
 *   · is-empty（该维度数据缺失）整条半透明。 */
/* legacy 兼容：旧结构 .build-feed-card__aside-sim 已废弃；新结构用 .build-feed-card__sim-col */

.build-feed-card__similar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--card-bg-solid);
    border: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.3;
}

.build-feed-card__similar--hint,
.build-feed-card__similar--status {
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--muted);
}

.build-feed-card__similar--error {
    color: var(--danger);
}

.build-feed-card__similar-placeholder {
    font-size: 11px;
    opacity: 0.85;
}

.build-feed-card__sim-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px;
    overflow: hidden;
    justify-content: space-between;
}

/* ── 相似度条形图（深紫 · 苹果风极简） ────────────────────────────────
 *
 * 设计语言（克制 · 精确 · 不喧宾夺主）：
 *   · 统一深紫色系（violet-600 → violet-800），无配色切换、无持续动画
 *   · "变化"全靠宽度的丝滑过渡 —— Apple 标志缓动 cubic-bezier(0.32,0.72,0,1)
 *   · fill 用极轻的竖向渐变（顶亮底暗 ~10%）模拟玻璃材质
 *   · 顶部 1px 白色内高光是 iOS/macOS 控件的共通"光泽签名"
 *   · 主次靠"字号 / 字重 / 尺寸 / 间距"区分，不用装饰
 *
 * 层级：
 *   · is-primary  (综合)   — track 12px，label/value 浅紫加粗
 *   · 其他 4 条           — track 10px，fill 更深、阴影更淡
 *   · is-active  (选中维度)— fill 整体提亮一档，外发光加强
 *   · is-empty            — fill 不显示，文字降透明度
 */
.build-feed-card__sim-bar {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    position: relative;
}

.build-feed-card__sim-bar-label {
    color: var(--text);
    opacity: 0.82;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

.build-feed-card__sim-bar-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    /* 槽底色：violet-900 极低透明，配轻微的内阴影做下沉感 */
    background: rgba(76, 29, 149, 0.22);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.build-feed-card__sim-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    /* 主体：violet-600 → 700 → 800 的极轻竖向渐变（~10% 明暗差）
     * 这个差值是故意做得很弱的 —— 苹果从不让材质感压过内容。 */
    background: linear-gradient(
        180deg,
        #7c3aed  0%,
        #6d28d9 55%,
        #5b21b6 100%
    );
    /* 三层阴影：
     *   1. inset top  1px 白 → 标志玻璃高光
     *   2. inset bot  1px 黑 → 底边沉一点，立体感
     *   3. 外发光 6px       → 极淡的紫色光晕，融入暗色卡片 */
    box-shadow:
        inset 0  1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 0 6px rgba(109, 40, 217, 0.35);
    /* Apple 弹性缓动 + 520ms —— 宽度变化丝滑、不弹、不夸张 */
    transition: width 520ms cubic-bezier(0.32, 0.72, 0, 1);
}

.build-feed-card__sim-bar-value {
    color: var(--text);
    font-size: 11.5px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ── 综合条（主指标）：更高、字更亮、底部一条淡紫虚线做分隔 ── */
.build-feed-card__sim-bar.is-primary {
    padding: 0 0 8px 0;
    margin-bottom: 4px;
    border-bottom: 1px dashed rgba(109, 40, 217, 0.32);
    /* 和其他 4 条（48px / 1fr / 44px）使用同一套列宽，保证 track 左右对齐、宽度一致 */
}
.build-feed-card__sim-bar.is-primary .build-feed-card__sim-bar-label {
    /* 亮色下走主文字黑色，暗色下再单独替换为 violet-300 */
    color: var(--text);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.03em;
}
[data-theme="dark"] .build-feed-card__sim-bar.is-primary .build-feed-card__sim-bar-label {
    color: #c4b5fd;            /* violet-300 */
}
.build-feed-card__sim-bar.is-primary .build-feed-card__sim-bar-track {
    height: 12px;
}
.build-feed-card__sim-bar.is-primary .build-feed-card__sim-bar-fill {
    box-shadow:
        inset 0  1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.20),
        0 0 10px rgba(109, 40, 217, 0.55);
}
.build-feed-card__sim-bar.is-primary .build-feed-card__sim-bar-value {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
}
[data-theme="dark"] .build-feed-card__sim-bar.is-primary .build-feed-card__sim-bar-value {
    color: #c4b5fd;
}

/* ── 其他 4 条：更深的紫、更弱的光晕，视觉上让给综合条 ── */
.build-feed-card__sim-bar:not(.is-primary) .build-feed-card__sim-bar-label {
    color: var(--muted);
    font-size: 10.5px;
}
.build-feed-card__sim-bar:not(.is-primary) .build-feed-card__sim-bar-fill {
    background: linear-gradient(
        180deg,
        #6d28d9  0%,
        #5b21b6 55%,
        #4c1d95 100%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 3px rgba(109, 40, 217, 0.20);
}
.build-feed-card__sim-bar:not(.is-primary) .build-feed-card__sim-bar-value {
    color: var(--text);
    opacity: 0.88;
    font-size: 11px;
    font-weight: 600;
}

/* ── 激活态（当前选中的相似度维度）：整体提亮一档，外发光更明显 ── */
.build-feed-card__sim-bar.is-active .build-feed-card__sim-bar-fill {
    background: linear-gradient(
        180deg,
        #a78bfa  0%,            /* violet-400 */
        #8b5cf6 55%,            /* violet-500 */
        #7c3aed 100%            /* violet-600 */
    );
    box-shadow:
        inset 0  1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 0 10px rgba(139, 92, 246, 0.55);
}
.build-feed-card__sim-bar.is-active .build-feed-card__sim-bar-label,
.build-feed-card__sim-bar.is-active .build-feed-card__sim-bar-value {
    color: var(--text);
    font-weight: 800;
}
[data-theme="dark"] .build-feed-card__sim-bar.is-active .build-feed-card__sim-bar-label,
[data-theme="dark"] .build-feed-card__sim-bar.is-active .build-feed-card__sim-bar-value {
    color: #c4b5fd;
}

/* ── 无数据：fill 不可见，标签 / 数值降透明 ── */
.build-feed-card__sim-bar.is-empty .build-feed-card__sim-bar-fill {
    width: 0 !important;
    box-shadow: none;
}
.build-feed-card__sim-bar.is-empty .build-feed-card__sim-bar-label,
.build-feed-card__sim-bar.is-empty .build-feed-card__sim-bar-value {
    opacity: 0.4;
}

/* 相似度块独占一列时的额外间距：让 5 条 bar 在纵向上等距散开，视觉更松 */
.build-feed-card__sim-col .build-feed-card__sim-bars {
    gap: 3px;
}

/* 整个相似度模块可点击（替代旧的"相似度明细"按钮），点击触发明细抽屉
 *   · 悬停时给容器加一点轮廓光晕提示可点击
 *   · is-open 时边框加亮，和下方打开的抽屉形成视觉连接 */
.build-feed-card__similar--clickable {
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.build-feed-card__similar--clickable:hover,
.build-feed-card__similar--clickable:focus-visible {
    border-color: var(--line-bright);
    background: var(--chip-bg);
    box-shadow: 0 0 0 1px var(--accent-gold-tint), var(--soft-shadow);
    outline: none;
}

.build-feed-card__similar--clickable.is-open {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--accent-gold-tint-strong) inset, 0 0 12px var(--accent-gold-tint-strong);
}

/* ===== 顶部筛选栏下的"相似度控件栏" ===== */
.build-feed-similar-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--card-bg-solid);
    border: 1px solid var(--line);
}

.build-feed-similar-controls__row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.build-feed-similar-controls__row-label {
    flex: 0 0 auto;
    min-width: 64px;
    font-size: 12px;
    color: var(--muted);
}

.build-feed-similar-controls__dims {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.build-feed-similar-controls__dim {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--line);
    /* 未选中：走中性灰 chip，不跟品牌色混在一起 */
    background: var(--chip-bg);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
}

.build-feed-similar-controls__dim:hover {
    background: var(--chip-bg-hover);
    border-color: var(--line-bright);
    color: var(--text);
}

.build-feed-similar-controls__dim.is-active {
    /* 选中：蓝色 tint 底 + 蓝色边 + 蓝色字，和排序 chip 统一 */
    background: var(--accent-gold-tint);
    border-color: var(--brand);
    color: var(--brand);
}

/* 列表底部哨兵节点 —— 无限滚动触发器 + 状态提示 */
.build-feed-similar-sentinel {
    margin-top: 14px;
    padding: 18px 16px;
    border-radius: 8px;
    border: 1px dashed var(--divider-soft);
    background: var(--chip-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

.build-feed-similar-sentinel--more {
    color: var(--brand);
    border-color: var(--line);
    background: var(--accent-gold-tint);
}

.build-feed-similar-sentinel--loading {
    color: var(--brand);
}
.build-feed-similar-sentinel--loading::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--brand);
    animation: build-feed-spin 0.85s linear infinite;
}

@keyframes build-feed-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.build-feed-similar-sentinel--cap {
    color: var(--brand);
    border-color: var(--line);
    background: var(--accent-gold-tint);
    font-weight: 600;
}

.build-feed-similar-sentinel--end {
    color: var(--muted);
    opacity: 0.75;
}

.build-feed-similar-sentinel--pending {
    color: var(--muted);
    font-style: italic;
}

.build-feed-similar-sentinel--error {
    color: var(--danger);
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.build-feed-similar-sentinel__retry {
    min-height: 26px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.build-feed-similar-sentinel__retry:hover {
    background: color-mix(in srgb, var(--danger) 20%, transparent);
}

.build-feed-card__action-btn,
.build-feed-card__action-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.build-feed-card__action-btn {
    border: 1px solid var(--line);
    background: var(--accent-gold-tint);
    color: var(--brand);
    cursor: pointer;
}

.build-feed-card__action-btn:hover:not(:disabled) {
    background: var(--accent-gold-tint-strong);
}

.build-feed-card__action-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.build-feed-card__action-btn--muted {
    color: var(--muted);
    border-color: var(--line);
    background: var(--chip-bg);
}

.build-feed-card__action-btn--danger {
    color: var(--danger);
    border-color: var(--danger-border);
    background: var(--danger-bg);
}

.build-feed-card__action-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 18%, transparent);
}

.build-feed-card__action-btn--active {
    border-color: var(--brand);
    background: var(--accent-gold-tint-strong);
    color: var(--brand);
}

/* 按变体区分主色（默认态 tint + 半透明同色边 + 同色字；hover / active 加深一档）：
   - expand / compare       → 绿色系 (--accent-green)
   - follow / recommend     → 蓝色系 (--brand)
   - discussion             → 紫色系 (--accent-purple)

   特意用 .build-feed-card__action-btn--icon 双类名提高特异性（0,2,0），
   因为上方 `a.build-feed-card__action-btn--icon` 基础规则是 0,1,1（tag+class），
   单类选择器写在后面也会被它盖掉（尤其讨论按钮是 <a>）。 */
.build-feed-card__action-btn--icon.build-feed-card__action-btn--expand,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--compare {
    border-color: color-mix(in srgb, var(--accent-green) 35%, transparent);
    background: color-mix(in srgb, var(--accent-green) 10%, transparent);
    color: var(--accent-green);
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--expand:hover:not([disabled]),
.build-feed-card__action-btn--icon.build-feed-card__action-btn--compare:hover:not([disabled]) {
    background: color-mix(in srgb, var(--accent-green) 18%, transparent);
    border-color: var(--accent-green);
    color: var(--accent-green);
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--expand.build-feed-card__action-btn--active,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--compare.build-feed-card__action-btn--active {
    border-color: var(--accent-green);
    background: color-mix(in srgb, var(--accent-green) 25%, transparent);
    color: var(--accent-green);
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--follow,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--recommend {
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
    background: var(--accent-gold-tint);
    color: var(--brand);
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--follow:hover:not([disabled]),
.build-feed-card__action-btn--icon.build-feed-card__action-btn--recommend:hover:not([disabled]) {
    background: var(--accent-gold-tint-strong);
    border-color: var(--brand);
    color: var(--brand);
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--follow.build-feed-card__action-btn--active,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--recommend.build-feed-card__action-btn--active {
    border-color: var(--brand);
    background: var(--accent-gold-tint-strong);
    color: var(--brand);
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--recommend.build-feed-card__action-btn--active,
.build-feed-card__action-btn--icon.build-feed-card__action-btn--recommend.build-feed-card__action-btn--active:hover:not([disabled]) {
    border-color: color-mix(in srgb, var(--brand) 35%, transparent);
    background: var(--accent-gold-tint);
    color: var(--brand);
    box-shadow: none;
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--discussion,
a.build-feed-card__action-btn--icon.build-feed-card__action-btn--discussion {
    border-color: color-mix(in srgb, var(--accent-purple) 35%, transparent);
    background: color-mix(in srgb, var(--accent-purple) 10%, transparent);
    color: var(--accent-purple);
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--discussion:hover:not([disabled]),
a.build-feed-card__action-btn--icon.build-feed-card__action-btn--discussion:hover:not([disabled]) {
    background: color-mix(in srgb, var(--accent-purple) 18%, transparent);
    border-color: var(--accent-purple);
    color: var(--accent-purple);
}

.build-feed-card__action-btn--icon.build-feed-card__action-btn--discussion.build-feed-card__action-btn--active {
    border-color: var(--accent-purple);
    background: color-mix(in srgb, var(--accent-purple) 25%, transparent);
    color: var(--accent-purple);
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--icon,
.build-feed-card__actions--bottom a.build-feed-card__action-btn--icon {
    border-color: color-mix(in srgb, var(--accent-green) 34%, transparent);
    background: color-mix(in srgb, var(--accent-green) 8%, transparent);
    color: var(--accent-green);
    flex: 0 0 30px;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px;
    height: 30px !important;
    min-height: 30px;
    max-height: 30px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border-radius: 8px;
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--icon:hover:not([disabled]),
.build-feed-card__actions--bottom a.build-feed-card__action-btn--icon:hover:not([disabled]) {
    border-color: var(--accent-green);
    background: color-mix(in srgb, var(--accent-green) 16%, transparent);
    color: var(--accent-green);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-green) 18%, transparent);
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--icon.build-feed-card__action-btn--active {
    border-color: var(--accent-green);
    background: color-mix(in srgb, var(--accent-green) 22%, transparent);
    color: var(--accent-green);
    box-shadow: none;
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--recommend,
.build-feed-card__actions--bottom .build-feed-card__action-btn--follow {
    border-color: color-mix(in srgb, var(--brand) 42%, transparent);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    color: var(--brand);
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--recommend:hover:not([disabled]),
.build-feed-card__actions--bottom .build-feed-card__action-btn--follow:hover:not([disabled]) {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 16%, transparent);
    color: var(--brand);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 18%, transparent);
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--recommend.build-feed-card__action-btn--active,
.build-feed-card__actions--bottom .build-feed-card__action-btn--follow.build-feed-card__action-btn--active {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 22%, transparent);
    color: var(--brand);
    box-shadow: none;
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--share {
    border-color: color-mix(in srgb, var(--accent-purple) 42%, transparent);
    background: color-mix(in srgb, var(--accent-purple) 9%, transparent);
    color: var(--accent-purple);
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--share:hover:not([disabled]) {
    border-color: var(--accent-purple);
    background: color-mix(in srgb, var(--accent-purple) 16%, transparent);
    color: var(--accent-purple);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-purple) 18%, transparent);
}

.build-feed-card__actions--bottom .build-feed-card__action-icon {
    width: 16px;
    height: 16px;
    overflow: visible;
}

.build-feed-card__actions--bottom .build-feed-card__action-icon svg {
    max-width: 16px;
    max-height: 16px;
    transform-origin: 50% 50%;
}

.build-feed-card__actions--bottom .build-feed-card__action-icon--expand svg,
.build-feed-card__actions--bottom .build-feed-card__action-icon--collapse svg,
.build-feed-card__actions--bottom .build-feed-card__action-icon--recommend svg,
.build-feed-card__actions--bottom .build-feed-card__action-icon--recommendFilled svg,
.build-feed-card__actions--bottom .build-feed-card__action-icon--follow svg,
.build-feed-card__actions--bottom .build-feed-card__action-icon--followFilled svg {
    transform: scale(2.45);
}

.build-feed-card__actions--bottom .build-feed-card__action-icon--recommendFilled svg,
.build-feed-card__actions--bottom .build-feed-card__action-icon--followFilled svg {
    fill: currentColor;
    stroke: currentColor;
}

.build-feed-card__actions--bottom .build-feed-card__action-icon--share svg {
    transform: scale(3.5);
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--discussion,
.build-feed-card__actions--bottom a.build-feed-card__action-btn--discussion {
    border-color: color-mix(in srgb, var(--accent-green) 34%, transparent);
    background: color-mix(in srgb, var(--accent-green) 8%, transparent);
    color: var(--accent-green);
    flex: 0 0 34px;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px;
    height: 34px !important;
    min-height: 34px;
    max-height: 34px;
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--discussion:hover:not([disabled]),
.build-feed-card__actions--bottom a.build-feed-card__action-btn--discussion:hover:not([disabled]) {
    border-color: var(--accent-green);
    background: color-mix(in srgb, var(--accent-green) 16%, transparent);
    color: var(--accent-green);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-green) 18%, transparent);
}

.build-feed-card__actions--bottom .build-feed-card__action-icon--discussion svg {
    transform: scale(1.3);
}

.build-feed-card__actions--bottom .build-feed-card__action-btn--icon[disabled],
.build-feed-card__actions--bottom .build-feed-card__action-btn--icon.build-feed-card__action-btn--muted[disabled] {
    border-color: var(--line);
    background: var(--card-bg-solid);
    color: var(--chip-muted);
}

.build-feed-comment-preview {
    max-height: var(--feed-comment-preview-h);
    margin: 2px 10px 8px calc(var(--feed-card-media-w) + 34px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border-top: 1px dashed color-mix(in srgb, var(--line) 72%, transparent);
    padding-top: 8px;
    color: var(--text);
}

.build-feed-comment-preview__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 6px 4px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scrollbar-width: thin;
}

.build-feed-comment-preview__pagination {
    flex: 0 0 auto;
    margin: 4px 0 0;
    padding-top: 7px;
    border-top: 1px dashed color-mix(in srgb, var(--line) 48%, transparent);
}

.build-feed-comment-preview__item {
    position: relative;
    padding: 9px 0 11px;
    border-bottom: 0;
}

.build-feed-comment-preview__item:last-child {
    border-bottom: 0;
}

.build-feed-comment-preview__item + .build-feed-comment-preview__item::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0,
        color-mix(in srgb, var(--line-bright) 78%, transparent) 14%,
        color-mix(in srgb, var(--line-bright) 78%, transparent) 86%,
        transparent 100%
    );
}

.build-feed-comment-preview__item-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    gap: 16px;
    align-items: start;
    min-width: 0;
}

.build-feed-comment-preview__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    min-width: 0;
}

.build-feed-comment-preview__main.has-build {
    grid-template-columns: 54px minmax(0, 1fr);
}

.build-feed-comment-preview__side {
    display: flex;
    min-width: 112px;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    text-align: right;
}

.build-feed-comment-preview__author-row {
    display: flex;
    justify-content: flex-end;
    max-width: 100%;
    min-width: 0;
}

.build-feed-comment-preview__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 3px;
}

.build-feed-comment-preview__author {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
}

.build-feed-comment-preview__author-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.build-feed-comment-preview__author-chip .user-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.build-feed-comment-preview__author-chip .user-info__name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
}

.build-feed-comment-preview__time,
.build-feed-comment-preview__reply-count {
    font-size: 11px;
    color: var(--muted);
}

.build-feed-comment-preview__build {
    display: contents;
    color: var(--text);
    text-decoration: none;
}

.build-feed-comment-preview__build-thumb {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 50px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 7px;
}

.build-feed-comment-preview__build-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.build-feed-comment-preview__build-info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.build-feed-comment-preview__build-headline {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    max-width: 100%;
    min-width: 0;
}

.build-feed-comment-preview__build-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--accent-blue);
    font-size: 12.5px;
    font-weight: 900;
}

.build-feed-comment-preview__build:hover .build-feed-comment-preview__build-title {
    color: var(--brand);
}

.build-feed-comment-preview__build-level {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
}

.build-feed-comment-preview__text {
    grid-column: 1;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text);
    overflow-wrap: anywhere;
}

.build-feed-comment-preview__main.has-build .build-feed-comment-preview__text {
    grid-column: 2;
}

.build-feed-comment-preview__text .discussion-inline-ref {
    --ref-accent: #c8c8c8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 2px 2px 0;
    padding: 1px 6px;
    border: 1px solid color-mix(in srgb, var(--ref-accent) 38%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--ref-accent) 9%, transparent);
    color: var(--ref-accent);
    font-size: 1em;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
    vertical-align: middle;
}

.build-feed-comment-preview__text .discussion-inline-ref.is-skill {
    --ref-accent: #7a97fe;
}

.build-feed-comment-preview__text .discussion-inline-ref.is-build {
    --ref-accent: var(--accent-purple);
}

.build-feed-comment-preview__text .discussion-inline-ref.is-jewel,
.build-feed-comment-preview__text .discussion-inline-ref.is-rarity-normal {
    --ref-accent: #c8c8c8;
}

.build-feed-comment-preview__text .discussion-inline-ref.is-rarity-magic {
    --ref-accent: #8888ff;
}

.build-feed-comment-preview__text .discussion-inline-ref.is-rarity-rare {
    --ref-accent: #ffff77;
}

.build-feed-comment-preview__text .discussion-inline-ref.is-rarity-unique {
    --ref-accent: #af6025;
}

:root:not([data-theme="dark"]) .build-feed-comment-preview__text .discussion-inline-ref.is-rarity-rare {
    --ref-accent: #8a6500;
}

.build-feed-comment-preview__text .discussion-inline-ref-icon,
.build-feed-comment-preview__text .discussion-inline-ref-support {
    width: 1.5em;
    height: 1.5em;
    flex: 0 0 1.5em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
}

.build-feed-comment-preview__text .discussion-inline-ref-icon img,
.build-feed-comment-preview__text .discussion-inline-ref-support img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.build-feed-comment-preview__text .discussion-inline-ref-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: inherit;
}

.build-feed-comment-preview__text .discussion-inline-ref-supports {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    margin-left: 2px;
}

.build-feed-comment-preview__text .discussion-inline-ref.is-skill .discussion-inline-ref-supports::before,
.build-feed-comment-preview__text .discussion-inline-ref.is-skill .discussion-inline-ref-supports::after {
    flex: 0 0 auto;
    color: currentColor;
    font-weight: inherit;
    line-height: 1;
}

.build-feed-comment-preview__text .discussion-inline-ref.is-skill .discussion-inline-ref-supports::before {
    content: "(";
}

.build-feed-comment-preview__text .discussion-inline-ref.is-skill .discussion-inline-ref-supports::after {
    content: ")";
}

.build-feed-comment-preview__replies {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    margin: 8px 0 0 66px;
}

.build-feed-comment-preview__reply {
    position: relative;
    min-width: 0;
    padding: 10px 0;
}

.build-feed-comment-preview__reply::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        90deg,
        color-mix(in srgb, var(--line-bright) 74%, transparent) 0 20px,
        transparent 20px 38px
    );
}

.build-feed-comment-preview__reply-controls {
    display: flex;
    justify-content: flex-start;
    padding-top: 2px;
}

.build-feed-comment-preview__reply-toggle {
    height: 24px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 42%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-blue) 9%, transparent);
    color: var(--accent-blue);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.build-feed-comment-preview__reply-toggle:hover {
    border-color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 16%, transparent);
}

.build-feed-comment-preview__empty-text,
.build-feed-comment-preview__state {
    color: var(--muted);
}

.build-feed-comment-preview__state {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 12px;
}

.build-feed-comment-preview__state--error {
    color: var(--danger);
}

.build-feed-comment-preview__footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-start;
    padding-top: 7px;
    border-top: 1px dashed color-mix(in srgb, var(--line) 48%, transparent);
}

.build-feed-comment-preview__join {
    height: 30px;
    min-width: 92px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent-green) 48%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent-green) 13%, transparent);
    color: var(--accent-green);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.build-feed-comment-preview__join:hover {
    border-color: var(--accent-green);
    background: color-mix(in srgb, var(--accent-green) 20%, transparent);
}

.build-feed-card__action-link {
    border: 1px solid var(--line);
    background: var(--chip-bg);
    color: var(--muted);
}

.build-feed-card__action-link:hover {
    background: var(--chip-bg-hover);
}

/* ===== Expand panel ===== */

.build-feed-expand-panel {
    display: grid;
    grid-template-columns: var(--feed-stats-w) var(--feed-equip-w) var(--feed-jewel-w) var(--feed-skill-w);
    grid-template-rows: auto auto;
    column-gap: 4px;
    row-gap: 16px;
    align-items: start;
    justify-content: center;
    min-height: var(--feed-expand-h);
    padding: var(--feed-expand-padding);
    background: transparent;
    border: 0;
    border-top: 1px solid var(--divider-soft);
    border-radius: 0;
    box-shadow: none;
}

.build-feed-expand-panel__slot {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.build-feed-card__source-corner {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-left: 0;
    min-width: 0;
}

.build-feed-card__source-corner .build-feed-post-meta {
    margin-left: 0;
}

.build-feed-card__source-corner .build-feed-card__source-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
}

.build-feed-entry--story-guide .build-feed-card__media-fallback {
    background: color-mix(in srgb, #22c55e 18%, var(--panel-strong));
    color: color-mix(in srgb, #16a34a 78%, var(--text));
    font-weight: 800;
}

.build-feed-card--story-guide .build-feed-card__summary-text {
    -webkit-line-clamp: 4;
}

.build-feed-card__source-badge--story {
    border-color: color-mix(in srgb, #22c55e 62%, var(--line));
    background: color-mix(in srgb, #22c55e 14%, var(--panel));
    color: color-mix(in srgb, #15803d 82%, var(--text));
}

.build-feed-story-preview,
.build-feed-story-comments {
    margin-top: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 84%, var(--panel-strong));
}

.build-feed-story-preview {
    display: block;
    padding: 0;
    overflow: hidden;
}

.build-feed-story-preview--catalog {
    position: relative;
    margin: 10px 0 14px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.build-feed-story-preview__hero-host {
    min-width: 0;
}

.build-feed-story-preview .hero-panel {
    margin: 0;
    padding: 16px;
}

.build-feed-story-preview--catalog .hero-panel {
    padding: 0;
}

.build-feed-story-preview__catalog-map {
    position: relative;
}

.build-feed-story-preview .story-guide-hero-write-row {
    display: none;
}

.build-feed-story-preview--catalog .hero-panel__info-title + .hero-panel__info-desc {
    margin-top: 0;
}

.build-feed-story-preview__catalog-actions {
    position: absolute;
    left: calc(75% + 16px);
    bottom: 12px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.build-feed-story-catalog-comments {
    height: 278px;
    max-height: 278px;
    margin: 12px 0 0;
}

.build-feed-story-catalog-comments__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 8px;
    color: var(--text);
}

.build-feed-story-catalog-comments__heading span {
    font-size: 13px;
    font-weight: 800;
}

.build-feed-story-catalog-comments__heading strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.build-feed-story-preview__map {
    min-width: 0;
}

.build-feed-story-preview__map-frame {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel-strong);
}

.build-feed-story-preview__map-frame img {
    display: block;
    width: 100%;
    height: auto;
    background: #05070a;
}

.build-feed-story-preview__points {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.build-feed-story-preview__point {
    position: absolute;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 2px solid color-mix(in srgb, #38bdf8 74%, #fff);
    background: color-mix(in srgb, #0f172a 72%, transparent);
    color: #e0f2fe;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 0 0 3px color-mix(in srgb, #38bdf8 18%, transparent), 0 8px 20px rgba(0, 0, 0, 0.26);
}

.build-feed-story-preview__point.is-active {
    border-color: color-mix(in srgb, #f59e0b 86%, #fff);
    background: color-mix(in srgb, #f59e0b 78%, #111827);
    color: #fff7ed;
    box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 22%, transparent), 0 10px 24px rgba(0, 0, 0, 0.3);
}

.build-feed-story-preview__map-state,
.build-feed-story-preview__empty {
    display: grid;
    min-height: 180px;
    place-items: center;
    padding: 16px;
    border-radius: 8px;
    border: 1px dashed var(--line);
    color: var(--muted);
    background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
}

.build-feed-story-preview__map-state--error {
    color: color-mix(in srgb, #ef4444 78%, var(--text));
}

.build-feed-story-preview__routes {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.build-feed-story-preview__heading,
.build-feed-story-comments__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.build-feed-story-preview__heading span,
.build-feed-story-comments__title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}

.build-feed-story-preview__heading strong,
.build-feed-story-comments__scope {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.build-feed-story-preview__route-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 3px;
}

.build-feed-story-preview__route-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.build-feed-story-preview__route-item.is-active {
    border-color: color-mix(in srgb, var(--accent-blue) 68%, var(--line));
    background: color-mix(in srgb, var(--accent-blue) 14%, var(--panel));
}

.build-feed-story-preview__route-index {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-blue) 16%, var(--panel));
    color: color-mix(in srgb, var(--accent-blue) 76%, var(--text));
    font-size: 12px;
    font-weight: 800;
}

.build-feed-story-preview__route-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.build-feed-story-preview__detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 120px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-strong) 76%, transparent);
}

.build-feed-story-preview__detail-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
}

.build-feed-story-preview__detail-text {
    color: var(--text);
    font-size: 13px;
    line-height: 1.6;
}

.build-feed-story-preview__muted {
    color: var(--muted);
}

.build-feed-story-preview__linked-build .build-discussion-comment-build {
    max-width: 100%;
}

.build-feed-story-comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}

.build-feed-story-comments__composer,
.build-feed-story-comments__reply-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel) 82%, var(--panel-strong));
}

.build-feed-story-comments__reply-editor {
    margin-top: 10px;
}

.build-feed-story-comments__textarea {
    width: 100%;
    min-height: 86px;
    resize: vertical;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel-strong);
    color: var(--text);
    padding: 10px 12px;
    font: inherit;
    line-height: 1.5;
}

.build-feed-story-comments__textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-blue) 74%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

.build-feed-story-comments__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.build-feed-story-comments__submit,
.build-feed-story-comments__cancel {
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.build-feed-story-comments__submit {
    border-color: color-mix(in srgb, var(--accent-blue) 82%, var(--line));
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--panel));
    color: color-mix(in srgb, var(--accent-blue) 72%, var(--text));
}

.build-feed-story-comments__cancel {
    background: transparent;
    color: var(--muted);
}

.build-feed-story-comments__list {
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.build-feed-story-comments__comment-actions {
    margin-top: 8px;
}

@media (max-width: 820px) {
    .build-feed-story-preview {
        grid-template-columns: 1fr;
    }

    .build-feed-story-preview__catalog-actions {
        left: 12px;
    }
}

.build-feed-expand-viewport {
    position: relative;
    width: 100%;
    height: var(--feed-viewport-h);
    border-radius: 10px;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    overflow: hidden;
}

.build-feed-expand-panel__slot--tree {
    grid-column: 1 / -1;
}

.build-feed-expand-panel__slot--tree .build-feed-expand-viewport {
    height: var(--feed-tree-h);
}

.build-feed-expand-viewport--stats {
    --feed-stats-bg: color-mix(in srgb, var(--card-bg-solid, #ffffff) 88%, var(--brand, #c9ab60) 5%);
    --feed-stats-border: color-mix(in srgb, var(--line, rgba(0, 0, 0, 0.14)) 72%, var(--brand, #c9ab60) 28%);
    --feed-stats-rule: color-mix(in srgb, var(--line, rgba(0, 0, 0, 0.14)) 70%, transparent);
    --feed-stats-label: var(--muted);
    --feed-stats-value: var(--text);
    overflow-y: auto;
    background: var(--feed-stats-bg);
    border-color: var(--feed-stats-border);
}

[data-theme="dark"] .build-feed-expand-viewport--stats {
    --feed-stats-bg: #050609;
    --feed-stats-border: color-mix(in srgb, #000 62%, var(--line, rgba(255, 255, 255, 0.12)));
    --feed-stats-rule: color-mix(in srgb, var(--line, rgba(255, 255, 255, 0.12)) 72%, transparent);
    --feed-stats-label: color-mix(in srgb, var(--muted) 88%, var(--brand-2, #e8d48b) 12%);
    --feed-stats-value: color-mix(in srgb, var(--text) 92%, var(--brand-2, #e8d48b) 8%);
}

.build-feed-preview-stats {
    height: 100%;
    padding: 14px;
    box-sizing: border-box;
}

.build-feed-preview-stats__columns {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.build-feed-preview-stats__column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 7px;
}

.build-feed-preview-stats__column + .build-feed-preview-stats__column {
    padding-left: 14px;
    border-left: 1px solid var(--feed-stats-rule);
}

.build-feed-preview-stats__item {
    min-width: 0;
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.build-feed-preview-stats__item:nth-child(5) {
    margin-top: 7px;
    padding-top: 14px;
}

.build-feed-preview-stats__item:nth-child(5)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--feed-stats-rule);
}

.build-feed-preview-stats__label {
    color: var(--feed-stats-label);
    font-size: 11px;
    line-height: 1.25;
    white-space: nowrap;
}

.build-feed-preview-stats__value {
    color: var(--feed-stats-value);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    text-align: right;
    word-break: break-word;
}

.build-feed-expand-panel__slot--jewels {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--feed-jewel-w);
    height: var(--feed-viewport-h);
    background: transparent;
    border: 0;
    overflow: hidden;
}

.build-feed-preview-jewel-host {
    position: relative;
    width: 100%;
    height: 100%;
}

.build-feed-preview-jewels {
    height: 100%;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-feed-preview-jewels .gem-box-wrap {
    height: min(100%, 496px);
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 4px;
}

.build-feed-preview-jewels .gem-box {
    width: 48px;
    height: 48px;
    padding: 4px;
}

.build-feed-preview-jewels-empty {
    width: 100%;
    height: 100%;
}

.build-feed-expand-panel__slot--jewels .build-feed-card__preview-placeholder {
    padding: 0;
    color: transparent;
    background: transparent;
    border: 0;
}

/* 装备模块：保留原始 774×600 渲染，整体缩放后裁剪到 viewport。
 * 缩放不影响布局尺寸，所以必须用 overflow:hidden 裁掉溢出部分。 */

.build-feed-expand-viewport--equip .build-feed-preview-equip-shell {
    width: 774px;
    height: 600px;
    display: block;
    padding: 0;
    background: none;
    flex: none;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    overflow: visible;
    transform: scale(var(--feed-scale));
    transform-origin: top left;
}

.build-feed-expand-viewport--equip .build-feed-preview-equip {
    width: 774px;
    height: 600px;
    overflow: visible;
    position: relative;
}

.build-feed-expand-viewport--equip .equip-empty-hint {
    width: 774px;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    text-align: center;
    font-size: 36px;
}

/* 技能模块：同上 */

.build-feed-expand-viewport--skills .build-feed-preview-skills-shell {
    width: 770px;
    height: 600px;
    display: block;
    padding: 0;
    background: none;
    flex: none;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    overflow: visible;
    transform: scale(var(--feed-scale));
    transform-origin: top left;
}

.build-feed-expand-viewport--skills .build-feed-preview-skills-box {
    position: relative;
    box-sizing: border-box;
}

.build-feed-expand-viewport--skills .build-feed-preview-skills {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.build-feed-expand-viewport--skills .build-feed-preview-skills::-webkit-scrollbar {
    width: 4px;
}

.build-feed-expand-viewport--skills .build-feed-preview-skills::-webkit-scrollbar-thumb {
    background: rgba(185, 173, 133, 0.3);
    border-radius: 2px;
}

.build-feed-expand-viewport--skills .build-feed-preview-skills .buff-item {
    cursor: default;
}

/* 天赋树：我们会在运行时把全局 .wegame-tree-wrapper 搬进来。
 * 它在这里需要填满 viewport。 */

.build-feed-expand-viewport--tree {
    background: rgba(6, 8, 12, 0.7);
}

.wegame-tree-wrapper--feed-embed {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: 0 !important;
}

.wegame-tree-wrapper--feed-embed iframe,
.wegame-tree-wrapper--feed-embed .caimogu-tree-frame,
.wegame-tree-wrapper--feed-embed canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

.build-feed-expand-panel__tree-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.build-feed-card__preview-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    z-index: 2;
}

/* ===== Responsive ===== */

@media (max-width: 1280px) {
    .build-feed-panel {
        --feed-viewport-h: 378px;
        --feed-tree-h: 484px;
        --feed-scale: 0.63;
        --feed-stats-w: 230px;
        --feed-equip-w: 488px;
        --feed-jewel-w: 48px;
        --feed-skill-w: 485px;
    }
}

@media (max-width: 1100px) {
    .build-feed-list {
        grid-template-columns: 1fr;
    }

    .build-feed-entry--expanded {
        grid-column: auto;
    }

    .build-feed-expand-panel {
        grid-template-columns: minmax(210px, 0.55fr) minmax(0, 1fr);
        grid-auto-rows: auto;
        height: auto;
    }

    .build-feed-expand-panel__slot--skills {
        grid-column: 1 / -1;
    }

    .build-feed-expand-panel__slot--tree {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .build-feed-panel {
        --feed-card-h: 138px;
        --feed-card-media-w: 102px;
        --feed-comment-preview-h: 230px;
        --feed-viewport-h: 300px;
        --feed-tree-h: 374px;
        --feed-scale: 0.5;
        --feed-stats-w: 100%;
        --feed-equip-w: 387px;
        --feed-jewel-w: 100%;
        --feed-skill-w: 385px;
        padding: 18px 16px;
    }

    .build-feed-filter-row {
        flex-direction: column;
    }

    .build-feed-picker {
        flex: 1 1 auto;
        max-width: none;
    }

    .build-feed-picker-dropdown {
        width: 100%;
    }

    .build-feed-filters {
        grid-template-columns: 1fr;
    }

    .build-feed-field--sm {
        grid-column: 1;
        max-width: none;
    }

    /* 小屏：main 行从三列塌成"头像 + 主信息"两列，右列（作者/计数/相似度）换行到整卡宽度 */
    .build-feed-card__shell {
        grid-template-columns: var(--feed-card-media-w) minmax(0, 1fr);
        gap: 12px;
        height: auto;
        min-height: 135px;
    }

    .build-feed-card__content {
        padding-left: 12px;
        gap: 8px;
    }

    .build-feed-card__media {
        min-height: 135px;
    }

    .build-feed-card__main,
    .build-feed-card--with-similar .build-feed-card__main {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .build-feed-card__aside {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 12px;
    }

    .build-feed-card__aside-owner,
    .build-feed-card__aside-rating,
    .build-feed-card__aside-date {
        justify-content: flex-start;
        flex: 0 0 auto;
    }

    .build-feed-card__sim-col {
        grid-column: 1 / -1;
        height: auto;
        padding-left: 0;
        border-left: 0;
    }

    .build-feed-card__actions {
        width: 100%;
    }

    .build-feed-card__actions--bottom {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        flex-wrap: wrap;
    }

    .build-feed-comment-preview {
        margin-left: 10px;
    }

    .build-feed-comment-preview__item-body {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .build-feed-comment-preview__side {
        order: -1;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }

    .build-feed-comment-preview__replies {
        margin-left: 42px;
    }

    .build-feed-comment-preview__author-row {
        justify-content: flex-start;
    }

    .build-feed-card--with-similar .build-feed-card__info {
        padding-bottom: 0;
    }

    /* 小屏上按钮行堆叠时，把虚线分隔符隐藏以免视觉碎裂 */
    .build-feed-card__actions-sep {
        display: none;
    }

    .build-feed-expand-panel {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(0, 1fr);
    }

    .build-feed-expand-panel__slot--skills {
        grid-column: 1;
    }

    .build-feed-preview-stats__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .build-feed-expand-panel__slot--tree {
        grid-column: 1;
    }
}

/* ===== Similar Debug Panel (临时调试) ===== */

.build-feed-similar-debug {
    margin-top: 10px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(14, 16, 24, 0.9);
    border: 1px dashed rgba(201, 171, 96, 0.25);
    font-size: 12px;
    color: rgba(220, 220, 220, 0.86);
    overflow-x: auto;
}

.build-feed-similar-debug--status {
    text-align: center;
    padding: 14px;
    color: rgba(200, 200, 200, 0.65);
}

.build-feed-similar-debug--error {
    color: rgba(255, 160, 150, 0.88);
}

.build-feed-similar-debug__identity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed rgba(201, 171, 96, 0.18);
    font-size: 12px;
}

.build-feed-similar-debug__identity strong {
    color: rgba(235, 215, 170, 0.96);
}

.build-feed-similar-debug__summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 8px;
    font-size: 11.5px;
    color: rgba(200, 200, 200, 0.75);
}

.build-feed-similar-debug__summary-row strong {
    color: rgba(235, 215, 170, 0.95);
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.build-feed-similar-debug__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    table-layout: fixed;
}

.build-feed-similar-debug__table th,
.build-feed-similar-debug__table td {
    border: 1px solid rgba(201, 171, 96, 0.12);
    padding: 4px 6px;
    text-align: left;
    vertical-align: top;
    word-break: break-all;
}

.build-feed-similar-debug__table th {
    background: rgba(40, 44, 56, 0.55);
    color: rgba(230, 210, 160, 0.92);
    font-weight: 600;
    font-size: 11px;
}

.build-feed-similar-debug__table tr.is-empty td {
    color: rgba(160, 160, 160, 0.5);
}

.build-feed-similar-debug__dim {
    white-space: nowrap;
    color: rgba(230, 215, 170, 0.88);
    font-weight: 600;
}

.build-feed-similar-debug__sizes-aux {
    color: rgba(170, 170, 170, 0.6);
    font-size: 10.5px;
}

.build-feed-similar-debug__list code {
    display: inline-block;
    margin: 1px 2px 1px 0;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(40, 44, 56, 0.6);
    border: 1px solid rgba(201, 171, 96, 0.08);
    font-family: "SFMono-Regular", Consolas, Menlo, monospace;
    font-size: 10.5px;
    color: rgba(220, 215, 190, 0.92);
}

.build-feed-similar-debug__list code.build-feed-similar-debug__token--named {
    font-family: inherit;
    background: rgba(201, 171, 96, 0.1);
    border-color: rgba(201, 171, 96, 0.28);
    color: rgba(236, 224, 188, 0.96);
    cursor: help;
}

.build-feed-similar-debug__empty {
    color: rgba(160, 160, 160, 0.45);
}

.build-feed-similar-debug__more {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 10.5px;
    color: rgba(220, 210, 178, 0.88);
    background: rgba(201, 171, 96, 0.14);
    border: 1px solid rgba(201, 171, 96, 0.32);
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.4;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.build-feed-similar-debug__more:hover {
    background: rgba(201, 171, 96, 0.28);
    border-color: rgba(201, 171, 96, 0.55);
    color: rgba(245, 235, 200, 1);
}

button.build-feed-similar-debug__more {
    /* 覆盖 <button> 的默认样式（padding/border/box-shadow 已在上面指定）*/
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}

.build-feed-similar-debug__more--collapse {
    background: rgba(110, 132, 160, 0.14);
    border-color: rgba(110, 132, 160, 0.32);
    color: rgba(200, 215, 235, 0.88);
}

.build-feed-similar-debug__more--collapse:hover {
    background: rgba(110, 132, 160, 0.28);
    border-color: rgba(110, 132, 160, 0.55);
    color: rgba(230, 238, 252, 1);
}

.build-feed-similar-debug__more--static,
.build-feed-similar-debug__more--static:hover {
    /* 纯文本 fallback（没有 bucketId 时用），显示成柔和的标签而不是按钮外观 */
    background: transparent;
    border: none;
    padding: 0;
    color: rgba(180, 180, 180, 0.6);
    cursor: default;
}

.build-feed-similar-debug__details {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(20, 24, 34, 0.7);
    border: 1px dashed rgba(201, 171, 96, 0.15);
}

.build-feed-similar-debug__details summary {
    cursor: pointer;
    font-size: 11.5px;
    color: rgba(230, 215, 170, 0.85);
    padding: 2px 0;
}

.build-feed-similar-debug__table--sub {
    margin-top: 6px;
}

/* =====================================================================
   筛选器基础块：职业/升华卡片的容器与标签（v4 布局下仍使用）
   ===================================================================== */

.build-feed-filter-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.build-feed-filter-block__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.build-feed-ascend-hint {
    font-size: 12px;
    color: var(--chip-muted);
    padding: 6px 0;
    font-style: italic;
}

.build-feed-filter-block--ascend.is-empty .build-feed-ascend-hint {
    padding-left: 4px;
}

/* 职业卡片行（单选） */
.build-feed-class-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.build-feed-class-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 86px;
    padding: 8px 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}

.build-feed-class-card:hover {
    border-color: var(--line-bright);
    background: var(--panel-strong);
}

.build-feed-class-card:active {
    transform: translateY(1px);
}

.build-feed-class-card.is-active {
    border-color: var(--teal);
    background: color-mix(in srgb, var(--teal) 14%, var(--panel));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 22%, transparent);
}

.build-feed-class-card__img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--panel);
}

.build-feed-class-card__label {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    color: var(--brand-2);
}

.build-feed-class-card.is-active .build-feed-class-card__label {
    color: var(--teal);
}

/* 升华卡片与职业卡片共用 `.build-feed-class-card` 基类，样式统一；
 * 升华修饰子类 `.build-feed-class-card--ascend` 预留 hook，不写空规则。 */

/* =====================================================================
   构筑库两栏布局：左=筛选与信息流；右=固定操作区
   ===================================================================== */

.build-feed-page-layout {
    --bf-source-compose-h: 42px;
    --bf-source-picker-h: 164px;
    --bf-source-search-h: 42px;
    --bf-source-stack-gap: 10px;
    --bf-filter-explorer-h: calc(var(--bf-source-compose-h) + var(--bf-source-stack-gap) + var(--bf-source-picker-h));
    --bf-side-toolbar-w: clamp(168px, 14.4vw, 224px);
    --bf-side-action-h: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--bf-side-toolbar-w);
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.build-feed-page-main {
    min-width: 0;
}

.build-feed-page-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding-top: 24px;
}

.build-feed-page-sidebar > .build-feed-side-toolbar {
    width: 100%;
    align-self: stretch;
}

/* =====================================================================
   筛选器布局：职业/升华主浏览区
   ===================================================================== */

.build-feed-filter-row--v4 {
    --bf-source-compose-h: 42px;
    --bf-source-picker-h: 164px;
    --bf-source-search-h: 42px;
    --bf-source-stack-gap: 10px;
    --bf-filter-explorer-h: calc(var(--bf-source-compose-h) + var(--bf-source-stack-gap) + var(--bf-source-picker-h));
    --bf-class-card-min-w: 74px;
    --bf-class-card-max-w: 142px;
    --bf-class-card-gap: 8px;
    align-items: stretch;
    gap: 0;
    margin-bottom: 0;
}

/* [v10] 上下布局：
 *   第一行 = explorer（职业/升华/相似），整行宽度可用，12 张卡能一行排下；
 *   第二行 = controls（源 + 搜索 + 筛选 + LV），跨满整行。
 *   两行之间用虚线分隔。 */
.build-feed-filter-row--v4 > .build-feed-filters--v4 {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
}

.build-feed-primary-layout {
    --bf-side-toolbar-w: clamp(168px, 14.4vw, 224px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--bf-side-toolbar-w);
    gap: 14px;
    align-items: stretch;
    min-width: 0;
}

.build-feed-side-toolbar {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: stretch;
    align-self: center;
    height: calc(var(--bf-filter-explorer-h) - 48px);
    min-width: 0;
}

.build-feed-filter-row--v4 > .build-feed-filters--v4 > .build-feed-filters__col--controls {
    border-top: 0;
    padding-top: 0;
}

.build-feed-filters__col--explorer {
    min-width: 0;
}

/* [v5] controls 改成"垂直两行"结构：
 *   · __line--primary  ：上传时间按钮组 + 搜索框 + 更多按钮（常驻一行）
 *   · __line--more     ：国际服/国服 + 赛季 + 模式 + 等级（折叠态隐藏）
 *   每行自身是 flex-row，行之间垂直堆叠。 */
.build-feed-filters__col--controls {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
}

.build-feed-filters__col--controls .build-feed-filters__line {
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 第一行（v8）：上传时间 + 赛季 + 模式 + 更多。
 *  · 三个筛选贴在一起作为一个整体居中；"更多"按钮绝对贴右，不影响中心轴
 *  · 屏幕窄时允许换行（flex-wrap: wrap）避免挤压
 *  做法：让 primary 容器 justify-content: center，三个筛选作为连续 flex item 居中；
 *  "更多"按钮 margin-left: auto 把自己推到右端。为了不让 auto margin 破坏居中，
 *  在左端再放一个 ::before 占位的 margin-right: auto 伪元素，形成"左 auto + 右 auto"夹挤居中。
 */
.build-feed-filters__col--controls .build-feed-filters__line--primary {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.build-feed-filters__col--controls .build-feed-filters__line--primary::before {
    /* 左侧隐形占位：与"更多"按钮的 margin-left:auto 对称，把中间三个筛选夹在正中 */
    content: "";
    margin-right: auto;
    flex: 0 0 0;
}
.build-feed-filters__col--controls .build-feed-filters__line--primary .build-feed-upload-toggle {
    flex: 0 0 auto;
}
.build-feed-filters__col--controls .build-feed-filters__line--primary::before {
    content: none;
    margin-right: 0;
    flex: 0 0 auto;
}
.build-feed-filters__col--controls .build-feed-filters__line--primary .build-feed-field--sm {
    flex: 0 0 auto;
}
.build-feed-filters__col--controls .build-feed-filters__line--primary .build-feed-advanced-toggle {
    flex: 0 0 auto;
    margin-left: auto; /* 更多按钮独占右端；和 ::before 的 margin-right:auto 一起完成居中 */
}

/* 第二行（更多筛选）：展开时才 render，自带一条柔和上分隔线。
 * 动画只在"首次从折叠切换到展开"那一刻播一次（由 JS 加 .is-opening 类），
 * 之后用户每次调整筛选项都会触发 renderBuildFeedPanel() 全量重绘节点，
 * 如果把 animation 无条件挂在这里，每次重绘动画都会从头再播，表现为"高频闪烁"。 */
.build-feed-filters__col--controls .build-feed-filters__line--more {
    padding-top: 10px;
    border-top: 1px dashed var(--divider-soft);
}

.build-feed-filters__col--controls .build-feed-filters__line--more.is-opening {
    animation: bf-more-slide-down 0.22s ease-out;
}

@keyframes bf-more-slide-down {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* [v4.1] 统一控件视觉 token：
 *   - 高度  40px（芯片 hug 内容，但外观"视觉权重"与 40px 一致）
 *   - 圆角  10px（芯片仍然 pill）
 *   - 边框  rgba(201, 171, 96, 0.28)（单一 token）
 *   - focus  teal 光晕
 * 任何筛选控件的尺寸 / 颜色改动请改这里，不要散落到各自选择器。 */
.build-feed-filters__col--controls {
    /* 控件 token：交由 poe2-deep-shell.css 顶部的 :root / [data-theme="dark"] 统一提供，
       这里只保留尺寸相关参数，颜色参数继承自主题变量。 */
    --bf-ctl-radius: 8px;
    --bf-ctl-height: 36px;
}

.build-feed-top-panel {
    /* [v11] 放大卡片高度 30%（180 → 234px），宽度保持不变：
     *   卡片宽度 = height × aspect-ratio，所以同步把 aspect-ratio 从 3/4 (=0.75)
     *   调到 4/7 (≈0.571)，视觉宽度 ≈ 218 × 0.571 ≈ 124px，与原 123px 基本一致。 */
    --bf-explorer-h: var(--bf-filter-explorer-h);
    display: block;
    min-height: var(--bf-explorer-h);
}

.build-feed-source-picker-slot {
    min-width: 0;
    display: flex;
    align-items: stretch;
    min-height: 42px;
}

.build-feed-source-picker-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-height: 42px;
}

.build-feed-source-combo {
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 42px;
    height: 42px;
    overflow: visible;
    border: 1px dashed var(--line-bright);
    border-radius: 8px;
    background: var(--card-bg-solid);
}

.build-feed-source-picker-slot .build-feed-picker {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.build-feed-source-picker-slot .build-feed-picker-card {
    width: 100%;
    min-height: 0;
    height: 100%;
    border: 0;
    border-radius: 8px 0 0 8px;
    background: transparent;
    box-shadow: none;
    padding: 0 10px;
}

.build-feed-source-picker-slot .build-feed-picker-card--empty,
.build-feed-source-picker-slot .build-feed-picker-card--selected {
    min-height: 40px;
}

.build-feed-picker-card.is-pending {
    border-color: color-mix(in srgb, var(--accent-blue) 55%, var(--line-bright));
}

.build-feed-picker-card__pending {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-blue) 14%, transparent);
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 700;
}

.build-feed-source-search-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 40px;
    border: 0;
    border-left: 1px solid color-mix(in srgb, var(--line-bright) 62%, transparent);
    border-radius: 0 8px 8px 0;
    background: color-mix(in srgb, var(--panel-strong) 92%, var(--bg-primary));
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.build-feed-source-search-btn__icon,
.build-feed-source-search-btn__icon svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
}

.build-feed-source-search-btn__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.build-feed-source-search-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--panel-strong));
    color: var(--accent-blue);
}

.build-feed-source-search-btn.is-ready {
    background: color-mix(in srgb, var(--teal) 14%, var(--panel-strong));
    color: var(--teal);
    border-left-color: color-mix(in srgb, var(--teal) 42%, var(--line-bright));
}

.build-feed-source-search-btn.is-ready:hover:not(:disabled) {
    background: color-mix(in srgb, var(--teal) 20%, var(--panel-strong));
    color: var(--teal);
}

.build-feed-source-search-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.build-feed-source-search-btn.is-active {
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--panel-strong));
    color: var(--accent-blue);
}

.build-feed-source-search-btn__x {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger, #ef4444) 18%, transparent);
    color: var(--danger, #ef4444);
    font-size: 15px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.build-feed-source-search-btn:disabled {
    background: color-mix(in srgb, var(--panel-strong) 82%, var(--bg-primary));
    color: var(--muted);
    opacity: 0.72;
    cursor: not-allowed;
}

.build-feed-side-toolbar .build-feed-compose-post-btn,
.build-feed-side-toolbar .build-feed-source-picker-slot,
.build-feed-side-toolbar .build-feed-field--sm {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.build-feed-side-toolbar .build-feed-compose-post-btn--taxonomy,
.build-feed-side-toolbar .build-feed-source-picker-slot,
.build-feed-side-toolbar .build-feed-source-picker-stack,
.build-feed-side-toolbar .build-feed-source-combo {
    height: 100%;
    min-height: 0;
}

.build-feed-side-toolbar .build-feed-compose-post-btn--taxonomy {
    padding: 0 16px;
    border-radius: 10px;
    font-size: 20px;
}

.build-feed-side-toolbar .build-feed-source-combo {
    border-radius: 10px;
}

.build-feed-side-toolbar .build-feed-source-search-btn {
    width: 58px;
    height: 100%;
    border-radius: 0 10px 10px 0;
}

.build-feed-side-toolbar .build-feed-source-search-btn__icon,
.build-feed-side-toolbar .build-feed-source-search-btn__icon svg {
    width: 22px;
    height: 22px;
}

.build-feed-side-toolbar .build-feed-picker-card {
    align-items: center;
    border-radius: 10px 0 0 10px;
    padding: 10px 12px;
}

.build-feed-side-toolbar .build-feed-picker-card--empty,
.build-feed-side-toolbar .build-feed-picker-card--selected {
    min-height: 0;
}

.build-feed-side-toolbar .build-feed-field--sm {
    height: 42px;
}

.build-feed-side-toolbar .build-feed-field--sm select {
    width: 100%;
    height: 42px;
    padding: 0 28px 0 10px;
    border-radius: 8px;
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    outline: none;
}

.build-feed-side-toolbar .build-feed-field--sm select:hover {
    border-color: color-mix(in srgb, var(--accent-blue) 44%, var(--bf-ctl-border));
}

.build-feed-side-toolbar .build-feed-field--sm select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 16%, transparent);
}

.build-feed-side-toolbar .build-feed-picker-card__icon {
    display: none;
}

.build-feed-side-toolbar .build-feed-picker-card__placeholder,
.build-feed-side-toolbar .build-feed-picker-card__title,
.build-feed-side-toolbar .build-feed-picker-card__meta {
    text-align: left;
}

.build-feed-side-toolbar .build-feed-picker-card__placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-feed-side-toolbar .build-feed-picker-dropdown {
    left: auto;
    right: 0;
}

/* [v5] 第一列：上下滑块式 segmented toggle（纵向）
 *   结构：.__modes > .__thumb + 2×.topmode-btn
 *   交互：.__thumb 是一个绝对定位的"滑块"，通过 data-active-mode 控制在上/下半区滑动；
 *   激活态的按钮文字变亮（brand-2），非激活态柔化；
 *   视觉：整体装进一个圆角"滑道"里，替代旧的金色竖条 + translateX(1px) 风格。 */
/* [v12] 扁平化：滑道只有 1px 边框 + 纯色背景，thumb 只用半透明亮色块做"选中区域"
 *   指示，不加任何阴影 / 内发光。动画保留（线性平滑，无回弹）。 */
.build-feed-top-panel__modes {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--panel-strong);
    margin-right: 0;
    box-shadow: none;
}

.build-feed-top-panel__thumb {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 6px;
    height: calc(50% - 9px);
    border-radius: 8px;
    background: var(--accent-gold-tint-strong);
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    z-index: 0;
    pointer-events: none;
    box-shadow: none;
    filter: none;
}

.build-feed-top-panel__modes[data-active-mode="similar"] .build-feed-top-panel__thumb {
    transform: translateY(calc(100% + 6px));
}

.build-feed-topmode-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--chip-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: color 0.2s ease;
    box-shadow: none;
    filter: none;
}

.build-feed-topmode-btn:hover {
    color: var(--text);
    box-shadow: none;
    filter: none;
    text-shadow: none;
}

.build-feed-topmode-btn:active {
    box-shadow: none;
    filter: none;
    transform: none;
}

.build-feed-topmode-btn.is-active {
    color: var(--brand-2);
}

.build-feed-topmode-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--teal) 55%, transparent);
    outline-offset: 2px;
}

.build-feed-top-panel__main {
    min-width: 0;
    /* [v10] 固定高度 = --bf-explorer-h，切换职业/升华/相似时整块不变 */
    height: var(--bf-explorer-h);
    /* 原来是 overflow: hidden 防止卡片行溢出；但 similar 视图里 picker 的
     * dropdown 用的是 position: absolute 且要画在 picker 下方，hidden 会把它
     * 直接裁掉——表现为"点击选择构筑完全没反应"。改成 visible 放行。
     * 卡片行自身带 aspect-ratio + 固定 height，不靠父级裁剪，放开后没有副作用。 */
    overflow: visible;
}

.build-feed-top-panel__section {
    height: 100%;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
}

.build-feed-top-panel__section--class .build-feed-filter-block,
.build-feed-top-panel__section--ascend .build-feed-filter-block {
    width: 100%;
    height: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0;
    justify-content: center;
}

.build-feed-top-panel__section--class .build-feed-class-cards,
.build-feed-top-panel__section--ascend .build-feed-class-cards {
    justify-content: stretch;
}

/* [v10] 职业 / 升华两个 section 统一：撑满滑道高度，内容垂直居中；
 *   不加入场动画（切换时立即出现，避免"晃一下"）。
 *   相似视图仍然保持 grid（两栏：picker + 说明），高度与前两者一致。 */
.build-feed-top-panel__section--class,
.build-feed-top-panel__section--ascend {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: var(--bf-explorer-h);
    min-height: var(--bf-explorer-h);
}

.build-feed-top-panel__section--similar {
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    padding: 0;
    min-height: var(--bf-explorer-h);
    height: var(--bf-explorer-h);
    /* 同 __main：picker dropdown 需要从这里"溢出"画到 section 下方 */
    overflow: visible;
}

.build-feed-top-panel__picker-wrap {
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.build-feed-top-panel__picker-wrap .build-feed-picker {
    max-width: 100%;
    width: 100%;
    display: flex;
    height: 100%;
}

.build-feed-top-panel__picker-wrap .build-feed-picker-card {
    min-height: 100%;
    height: 100%;
}

.build-feed-similar-intro {
    min-width: 0;
    padding: 8px 0;
}

.build-feed-similar-intro__title {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.build-feed-similar-intro__body {
    /* 亮色：黑字 / 暗色：白字。不再用旧的米黄色 rgba */
    color: var(--text);
    line-height: 1.7;
    font-size: 13px;
    max-width: 48ch;
}

.build-feed-filters__line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    /* v4.2：行内居中（第 1 行筛选/第 2 行搜索一致） */
    justify-content: center;
}

.build-feed-filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.build-feed-filter-row-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.build-feed-filter-mainline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-width: 0;
    width: 100%;
}

.build-feed-filter-left-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    padding-top: 0;
    width: 100%;
}

.build-feed-filter-right-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 0;
    flex: 0 0 auto;
}

.build-feed-filter-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.build-feed-filter-topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    width: auto;
    min-width: 0;
    margin-left: auto;
}

.build-feed-filter-topbar--compose {
    margin-bottom: -2px;
}

.build-feed-filter-row-grid__line--advanced-selects .build-feed-field--season {
    width: 156px;
}

.build-feed-filter-row-grid__line--advanced-selects .build-feed-field--mode {
    width: 118px;
}

.build-feed-compose-post-btn,
.build-feed-filter-gear {
    flex: 0 0 auto;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.build-feed-compose-post-btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: color-mix(in srgb, #38bdf8 82%, var(--line));
    background: color-mix(in srgb, #0ea5e9 14%, transparent);
    color: color-mix(in srgb, #7dd3fc 88%, var(--text));
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow:
        0 0 18px color-mix(in srgb, #38bdf8 34%, transparent),
        inset 0 0 12px color-mix(in srgb, #0ea5e9 14%, transparent);
}

:root:not([data-theme="dark"]) .build-feed-compose-post-btn {
    border-color: color-mix(in srgb, #0284c7 70%, var(--line));
    background: color-mix(in srgb, #0ea5e9 9%, transparent);
    color: #0369a1;
    box-shadow:
        0 4px 14px color-mix(in srgb, #0284c7 20%, transparent),
        inset 0 0 10px color-mix(in srgb, #0ea5e9 9%, transparent);
}

.build-feed-compose-post-btn--taxonomy {
    width: 100%;
    height: 42px;
    padding: 0;
}

.build-feed-compose-post-btn__plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 32px;
    font-weight: 900;
    line-height: 0.8;
    transform: translateY(-1px);
}

.build-feed-compose-post-btn__text {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.build-feed-compose-post-btn--source {
    flex: 0 0 auto;
    width: 100%;
    height: var(--bf-source-compose-h);
    padding: 0 18px;
}

.build-feed-filter-gear {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.build-feed-filter-gear__icon,
.build-feed-filter-gear__icon svg {
    width: 15px;
    height: 15px;
    display: block;
}

.build-feed-compose-post-btn:hover {
    border-color: #7dd3fc;
    background: color-mix(in srgb, #0ea5e9 20%, transparent);
    color: #bae6fd;
    transform: translateY(-1px);
    box-shadow:
        0 0 24px color-mix(in srgb, #38bdf8 46%, transparent),
        inset 0 0 14px color-mix(in srgb, #0ea5e9 20%, transparent);
}

:root:not([data-theme="dark"]) .build-feed-compose-post-btn:hover {
    border-color: #0284c7;
    background: color-mix(in srgb, #0ea5e9 14%, transparent);
    color: #075985;
    box-shadow:
        0 5px 16px color-mix(in srgb, #0284c7 26%, transparent),
        inset 0 0 12px color-mix(in srgb, #0ea5e9 13%, transparent);
}

.build-feed-personal-center-btn {
    width: 100%;
    height: var(--bf-side-action-h, 76px);
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, #22c55e 76%, var(--line));
    border-radius: 10px;
    background: color-mix(in srgb, #22c55e 14%, transparent);
    color: color-mix(in srgb, #86efac 88%, var(--text));
    text-decoration: none;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    box-shadow:
        0 0 18px color-mix(in srgb, #22c55e 30%, transparent),
        inset 0 0 12px color-mix(in srgb, #22c55e 14%, transparent);
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

:root:not([data-theme="dark"]) .build-feed-personal-center-btn {
    border-color: color-mix(in srgb, #16a34a 72%, var(--line));
    background: color-mix(in srgb, #22c55e 9%, transparent);
    color: #166534;
    box-shadow:
        0 4px 14px color-mix(in srgb, #16a34a 18%, transparent),
        inset 0 0 10px color-mix(in srgb, #22c55e 9%, transparent);
}

.build-feed-personal-center-btn:hover,
.build-feed-personal-center-btn:focus-visible {
    border-color: #86efac;
    background: color-mix(in srgb, #22c55e 20%, transparent);
    color: #bbf7d0;
    outline: none;
    transform: translateY(-1px);
    box-shadow:
        0 0 24px color-mix(in srgb, #22c55e 42%, transparent),
        inset 0 0 14px color-mix(in srgb, #22c55e 20%, transparent);
}

:root:not([data-theme="dark"]) .build-feed-personal-center-btn:hover,
:root:not([data-theme="dark"]) .build-feed-personal-center-btn:focus-visible {
    border-color: #16a34a;
    background: color-mix(in srgb, #22c55e 14%, transparent);
    color: #14532d;
    box-shadow:
        0 5px 16px color-mix(in srgb, #16a34a 24%, transparent),
        inset 0 0 12px color-mix(in srgb, #22c55e 12%, transparent);
}

.build-feed-personal-center-btn:active {
    transform: translateY(0);
}

.build-feed-personal-center-btn__text {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.build-feed-sidebar-divider {
    width: 100%;
    height: 3px;
    margin: 3px 0;
    background: linear-gradient(
        90deg,
        transparent 0,
        rgba(22, 163, 74, 0.26) 18%,
        rgba(0, 113, 227, 0.48) 50%,
        rgba(22, 163, 74, 0.26) 82%,
        transparent 100%
    );
    border-radius: 999px;
}

.build-feed-filter-gear:hover,
.build-feed-filter-gear.is-open {
    border-color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 12%, var(--panel-strong));
    color: var(--accent-blue);
}

.build-feed-class-explorer-inline {
    --bf-explorer-h: var(--bf-filter-explorer-h);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 4px;
    min-width: 0;
    width: 100%;
    overflow: visible;
    padding: 0;
}

.build-feed-feed-controls-row {
    min-width: 0;
    margin: -2px 0 8px;
    padding: 0;
}

.build-feed-class-context-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.build-feed-class-context-selects {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
    flex: 0 0 auto;
}

.build-feed-class-context-row .build-feed-field--sm {
    width: 132px;
    max-width: 176px;
}

.build-feed-class-context-row .build-feed-field--season {
    width: 156px;
    max-width: 210px;
}

html[lang="en"] .build-feed-class-context-row .build-feed-field--season {
    width: 202px;
    max-width: 240px;
}

.build-feed-class-context-row .build-feed-field--sm select {
    width: 100%;
    height: 36px;
    padding: 0 28px 0 10px;
    border-radius: 8px;
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    outline: none;
}

.build-feed-class-context-row .build-feed-field--sm select:hover {
    border-color: color-mix(in srgb, var(--accent-blue) 44%, var(--bf-ctl-border));
}

.build-feed-class-context-row .build-feed-field--sm select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 16%, transparent);
}

.build-feed-class-context-counts {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.build-feed-class-explorer-inline .build-feed-top-panel__section--class,
.build-feed-class-explorer-inline .build-feed-top-panel__section--ascend {
    min-height: var(--bf-explorer-h);
}

.build-feed-post-type-row,
.build-feed-post-tag-row {
    flex: 1 1 100%;
    min-width: 0;
}

.build-feed-post-taxonomy-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 2px 0 8px;
    padding: 0 2px;
    border-top: 0;
}

.build-feed-post-taxonomy-main {
    display: grid;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(260px, max-content);
    column-gap: 16px;
    align-items: start;
    min-width: 0;
}

.build-feed-post-taxonomy-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    min-width: 0;
    width: 100%;
}

.build-feed-post-taxonomy-center {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.build-feed-post-taxonomy-sort-under {
    display: flex;
    justify-content: center;
    width: 100%;
}

.build-feed-sort-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 72%, var(--panel-strong));
    color: var(--text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 34%, transparent);
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.build-feed-post-more-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 72%, var(--panel-strong));
    color: var(--text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 34%, transparent);
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.build-feed-post-more-toggle:hover,
.build-feed-post-more-toggle:focus-visible,
.build-feed-post-more-toggle.is-open {
    border-color: color-mix(in srgb, var(--text) 34%, var(--line));
    background: color-mix(in srgb, var(--text) 7%, var(--panel));
    color: var(--accent-blue);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

.build-feed-post-more-toggle__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 1px;
    transform: translateY(-3px);
}

.build-feed-post-type-row > .build-feed-sort-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    box-sizing: border-box;
}

.build-feed-sort-toggle:hover,
.build-feed-sort-toggle:focus-visible {
    border-color: color-mix(in srgb, var(--text) 34%, var(--line));
    background: color-mix(in srgb, var(--text) 7%, var(--panel));
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-blue) 18%, transparent);
}

.build-feed-sort-toggle:disabled,
.build-feed-sort-toggle.is-locked {
    cursor: not-allowed;
    opacity: 0.52;
}

.build-feed-sort-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    line-height: 0;
    pointer-events: none;
}

.sort-toggle-combo {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
}

.sort-toggle-core {
    display: block;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    min-height: 20px;
}

.sort-toggle-arrow {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: block;
    width: 13px !important;
    height: 13px !important;
    min-width: 13px;
    min-height: 13px;
    padding: 1px;
    border-radius: 999px;
    background: var(--panel-strong);
    color: var(--accent-blue);
}

.build-feed-sort-toggle .fa-solid,
.build-feed-sort-toggle__icon > svg {
    display: block;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    min-height: 22px;
    font-size: 22px;
    line-height: 1;
}

.build-feed-post-taxonomy-selects {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.build-feed-post-taxonomy-spacer {
    min-width: 0;
}

.build-feed-post-taxonomy-row .build-feed-post-type-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 1 auto;
    width: fit-content;
    max-width: 100%;
    justify-content: center;
}

.build-feed-post-taxonomy-row .build-feed-field--sm {
    flex: 0 0 auto;
    width: 118px;
    max-width: 150px;
}

.build-feed-post-taxonomy-row .build-feed-field--season {
    width: 142px;
    max-width: 176px;
}

html[lang="en"] .build-feed-post-taxonomy-row .build-feed-field--season {
    width: 202px;
    max-width: 240px;
}

html[lang="en"] .build-feed-filter-row-grid__line--advanced-selects .build-feed-field--season,
html[lang="en"] .build-feed-filter-advanced-panel .build-feed-field--season,
html[lang="en"] .build-feed-filters__line .build-feed-field--season {
    width: 202px;
    max-width: 240px;
}

.build-feed-post-taxonomy-row .build-feed-field--sm select {
    width: 100%;
    height: 36px;
    padding: 0 26px 0 10px;
    border-radius: 8px;
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--text);
    font: inherit;
    outline: none;
}

.build-feed-post-taxonomy-tags {
    min-width: 0;
    display: flex;
    justify-content: center;
}

.build-feed-post-taxonomy-tags .build-feed-post-tag-row {
    justify-content: center;
}

.build-feed-filter-row-grid__line--post-tags {
    grid-column: 1 / -1;
    justify-content: center;
}

.build-feed-filter-row-grid__line--post-tags .build-feed-post-tag-stack {
    width: min(100%, 780px);
}

.build-feed-filter-row-grid__line--post-tags .build-feed-post-tag-row {
    justify-content: center;
}

.build-feed-post-segmented {
    --bf-post-segment-count: 3;
    --bf-post-segment-w: 88px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--bf-post-segment-count), var(--bf-post-segment-w));
    align-items: center;
    height: 42px;
    padding: 4px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 72%, var(--panel-strong));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 34%, transparent);
}

html[lang^="en"] .build-feed-post-segmented {
    --bf-post-segment-w: 112px;
}

.build-feed-post-segmented__thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: var(--bf-post-segment-w);
    height: calc(100% - 8px);
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--accent-blue) 86%, var(--line));
    box-shadow: none;
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: none;
}

.build-feed-post-segmented[data-active-index="0"] .build-feed-post-segmented__thumb {
    opacity: 1;
    transform: translateX(0);
}

.build-feed-post-segmented[data-active-index="1"] .build-feed-post-segmented__thumb {
    opacity: 1;
    transform: translateX(var(--bf-post-segment-w));
}

.build-feed-post-segmented[data-active-index="2"] .build-feed-post-segmented__thumb {
    opacity: 1;
    transform: translateX(calc(var(--bf-post-segment-w) * 2));
}

.build-feed-post-segmented[data-active-index="3"] .build-feed-post-segmented__thumb {
    opacity: 1;
    transform: translateX(calc(var(--bf-post-segment-w) * 3));
}

.build-feed-post-segmented[data-active-index="4"] .build-feed-post-segmented__thumb {
    opacity: 1;
    transform: translateX(calc(var(--bf-post-segment-w) * 4));
}

.build-feed-sort-segmented {
    --bf-post-segment-count: 2;
    --bf-post-segment-w: 66px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--bf-post-segment-count), var(--bf-post-segment-w));
    align-items: center;
    height: 36px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--panel) 72%, var(--panel-strong));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--bg-primary) 34%, transparent);
}

.build-feed-sort-segmented.is-locked {
    opacity: 0.52;
    filter: grayscale(0.25);
}

.build-feed-sort-segmented__thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: var(--bf-post-segment-w);
    height: calc(100% - 8px);
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent-blue) 18%, var(--panel));
    border: 1px solid color-mix(in srgb, var(--accent-blue) 86%, var(--line));
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: none;
}

.build-feed-sort-segmented[data-active-index="0"] .build-feed-sort-segmented__thumb {
    opacity: 1;
    transform: translateX(0);
}

.build-feed-sort-segmented[data-active-index="1"] .build-feed-sort-segmented__thumb {
    opacity: 1;
    transform: translateX(var(--bf-post-segment-w));
}

.build-feed-post-segment,
.build-feed-sort-segment {
    position: relative;
    z-index: 1;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
    cursor: pointer;
    padding: 0;
    box-shadow: none;
    transition: color 0.16s ease;
}

.build-feed-post-segment {
    overflow: visible;
}

.build-feed-post-segment__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
    font-size: 13px;
    line-height: 1.2;
}

.build-feed-post-segment__label {
    display: inline-block;
    min-width: 0;
    padding: 2px 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.22;
}

.build-feed-post-segment:hover,
.build-feed-sort-segment:hover:not(:disabled) {
    background: transparent;
    color: var(--accent-blue);
    box-shadow: none;
}

.build-feed-post-segment.is-active,
.build-feed-sort-segment.is-active {
    color: var(--accent-blue);
    background: transparent;
    box-shadow: none;
}

.build-feed-sort-segment:disabled,
.build-feed-sort-segment.is-locked {
    cursor: not-allowed;
}

.build-feed-post-tag-toggle {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.build-feed-post-tag-toggle:hover,
.build-feed-post-tag-toggle.is-open {
    border-color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 12%, var(--panel));
    color: var(--accent-blue);
}

.build-feed-post-tag-toggle__caret {
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.16s ease;
}

.build-feed-post-tag-toggle.is-open .build-feed-post-tag-toggle__caret {
    transform: rotate(90deg);
}

.build-feed-post-tag-stack {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.build-feed-post-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.build-feed-post-tag-row__label {
    flex: 0 0 38px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.build-feed-class-explorer-row {
    --bf-explorer-h: 132px;
    margin: 0 0 14px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 4px;
}

.build-feed-class-explorer-row .build-feed-top-panel__section--class,
.build-feed-class-explorer-row .build-feed-top-panel__section--ascend {
    min-height: var(--bf-explorer-h);
}

.build-feed-filter-row-grid__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.build-feed-filter-row-grid__line--level {
    gap: 8px;
}

.build-feed-filter-row-grid__line--level {
    width: 100%;
}

.build-feed-filter-advanced-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px 0 0;
    border-top: 1px dashed var(--line);
}

.build-feed-filter-advanced-panel .build-feed-field--sm {
    width: 118px;
    max-width: 150px;
}

.build-feed-filter-advanced-panel .build-feed-field--season {
    width: 142px;
    max-width: 176px;
}

.build-feed-filter-advanced-panel .build-feed-field--sm select,
.build-feed-filter-advanced-panel .build-feed-field--lv input {
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
}

.build-feed-filter-advanced-panel .build-feed-field__static {
    height: 36px;
}

.build-feed-filter-advanced-panel .build-feed-field--lv {
    width: 70px;
}

.build-feed-filter-row-grid__line--advanced-selects,
.build-feed-filter-row-grid__line--level,
.build-feed-filter-row-grid__line--upload,
.build-feed-filter-row-grid__line--source-types {
    justify-content: center;
}

.build-feed-filter-group--class,
.build-feed-filter-group--ascend {
    width: 100%;
    align-content: center;
}

.build-feed-tag {
    flex: 0 0 auto;
    height: 32px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-strong);
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color 0.16s ease,
                background 0.16s ease,
                color 0.16s ease,
                transform 0.16s ease;
}

.build-feed-tag:hover:not(.is-locked) {
    border-color: color-mix(in srgb, var(--accent-blue) 46%, var(--line));
    background: color-mix(in srgb, var(--accent-blue) 8%, var(--panel-strong));
}

.build-feed-tag:active:not(.is-locked) {
    transform: translateY(1px);
}

.build-feed-tag.is-active {
    border-color: var(--accent-blue);
    background: color-mix(in srgb, var(--accent-blue) 22%, var(--panel-strong));
    color: var(--accent-blue);
}

.build-feed-tag--back {
    color: var(--muted);
}

.build-feed-tag.is-locked,
.build-feed-filter-group.is-locked .build-feed-tag {
    opacity: 0.58;
    cursor: not-allowed;
}

.build-feed-filters__line .build-feed-field {
    flex: 0 0 auto;
    min-width: 0;
}

/* 赛季 / 模式 / 上传日期：下拉统一宽 128px，高 40px，
 * 覆盖 v1 默认 .build-feed-field select 的样式，让它们和芯片/搜索按钮同高。 */
.build-feed-filters__line .build-feed-field--sm {
    width: 118px;
    max-width: 150px;
}

.build-feed-filters__line .build-feed-field--season {
    width: 142px;
    max-width: 176px;
}

html[lang="en"] .build-feed-filters__line .build-feed-field--season {
    width: 176px;
    max-width: 220px;
}

.build-feed-filters__line .build-feed-field--sm select {
    width: 100%;
    height: var(--bf-ctl-height);
    padding: 0 26px 0 10px;
    border-radius: var(--bf-ctl-radius);
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--text);
    font: inherit;
    outline: none;
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

.build-feed-filters__line .build-feed-field--sm select:hover {
    border-color: var(--bf-ctl-border-hover);
    background: var(--bf-ctl-bg-hover);
}

.build-feed-filters__line .build-feed-field--sm select:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 20%, transparent);
}

/* LV: xx ~ xx 合并输入（v4.2 修：子元素全部垂直居中、input 行高一致，
 *  外层高度用 line-height 承载，避免 input 撑出容器）。
 *   · prefix/sep/input 都是 inline-flex 里的 block 元素，用 align-items:center + align-self:center 双保险；
 *   · input 的 height 留给外框 40 - 8（padding） = 32 足够居中；
 *   · input 在 webkit 下隐藏可能残留的 spinner（即使 type 改成 text 也保险） */
/* =====================================================================
 * v4.3 · LV 等级筛选 重做
 *   结构：[LV 文字]  [min input]  [max input]
 *   三者都是 .build-feed-filters__line 的 sibling，父 flex 的 gap 控制间距，
 *   高度/圆角/边框全部对齐其他筛选控件（--bf-ctl-*）。
 *   number input 保留 spinner；如果不喜欢箭头可以在此类下隐藏。 */
.build-feed-field__static {
    display: inline-flex;
    align-items: center;
    height: var(--bf-ctl-height);
    padding: 0 4px 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--muted);
    user-select: none;
    flex: 0 0 auto;
}

.build-feed-filters__line .build-feed-field--lv {
    flex: 0 0 auto;
    width: 70px;
}

.build-feed-filters__line .build-feed-field--lv input {
    width: 100%;
    height: var(--bf-ctl-height);
    padding: 0 8px;
    margin: 0;
    box-sizing: border-box;
    border-radius: var(--bf-ctl-radius);
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--text);
    font: inherit;
    text-align: center;
    outline: none;
    transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}

.build-feed-filters__line .build-feed-field--lv input:hover {
    border-color: var(--bf-ctl-border-hover);
    background: var(--bf-ctl-bg-hover);
}

.build-feed-filters__line .build-feed-field--lv input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 20%, transparent);
    background: var(--input-bg);
}

/* =====================================================================
 * v4.4 · 「高级」切换按钮
 *   和下拉控件同高、同圆角、同边框颜色；is-open 时边框换成暖金色
 *   让它在"当前处于展开态"时有明显视觉提示。 */
.build-feed-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--bf-ctl-height);
    padding: 0 12px;
    margin: 0;
    border-radius: var(--bf-ctl-radius);
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--brand-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s, background 0.16s, color 0.16s;
    flex: 0 0 auto;
}

.build-feed-advanced-toggle:hover {
    border-color: var(--bf-ctl-border-hover);
    background: var(--bf-ctl-bg-hover);
}

.build-feed-advanced-toggle.is-open {
    border-color: var(--brand);
    background: var(--accent-gold-tint-strong);
    color: var(--brand);
}

.build-feed-advanced-toggle__chevron {
    display: inline-flex;
    align-items: center;
    color: inherit;
    opacity: 0.85;
}

/* 高级区里的每一行（LV 等级行 / 来源芯片行）居中排列，
 * 和基础两行（搜索、赛季+模式+上传+高级按钮）对齐观感一致。 */
.build-feed-filters__line--advanced {
    justify-content: center;
}

/* v6：顶部搜索栏（.build-feed-search-field / --search / --source 行）已移除，
 * 对应 CSS 全部删除，避免遗留未使用的规则。 */

/* 来源芯片（构筑来源多选，inline 版）：v4.1 尺寸/圆角继续 hug 内容，
 * 但高度贴齐 36px（比 40px 下拉略低一点，视觉差异 = "次要筛选"） */
.build-feed-source-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.build-feed-source-chip {
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--bf-ctl-border);
    background: var(--bf-ctl-bg);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.1s ease;
}

.build-feed-source-chip:hover {
    border-color: var(--bf-ctl-border-hover);
    background: var(--bf-ctl-bg-hover);
}

.build-feed-source-chip:active {
    transform: translateY(1px);
}

.build-feed-source-chip.is-active {
    border-color: var(--teal);
    background: color-mix(in srgb, var(--teal) 16%, var(--panel));
    color: var(--teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--teal) 20%, transparent);
}

.build-feed-source-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    align-self: flex-end;
    background: var(--chip-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 3px;
}

.build-feed-source-toggle__btn {
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--chip-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.build-feed-source-toggle__btn:hover {
    color: var(--muted);
}

.build-feed-source-toggle__btn.is-active {
    background: var(--chip-bg-active);
    color: var(--brand);
}

/* v5：上传时间按钮组。外观和 .build-feed-source-toggle 同家族，视觉一致；
 *  差别在于：这是"四选一"单选组——点哪个亮哪个，不会出现空选。 */
.build-feed-upload-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--chip-bg);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 3px;
    height: var(--bf-ctl-height, 40px);
}

.build-feed-upload-toggle__btn {
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 600;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--chip-muted);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.build-feed-upload-toggle__btn:hover {
    color: var(--muted);
}

.build-feed-upload-toggle__btn.is-active {
    background: var(--chip-bg-active);
    color: var(--brand);
}

/* [v10] 职业 / 升华卡片 —— 紧凑排列 + 竖向分割线：
 *   - 容器 nowrap（单行），整条撑满第二列宽度；
 *   - 卡片贴在一起，margin: 0，相邻卡片之间用 ::after 画一条 1px 淡金色竖线；
 *   - 卡片高度 = --bf-card-h，吃满滑道高度（留上下 8px 透气空间）；
 *   - 宽度由 aspect-ratio 3/4 推导，职业 12 张一行也够排下（现在第二列跨满整块宽度）；
 *   - 无入场动画，切换视图后直接呈现，顶部块尺寸固定不变。 */
.build-feed-top-panel__section--class .build-feed-class-cards,
.build-feed-top-panel__section--ascend .build-feed-class-cards {
    display: grid;
    column-gap: var(--bf-class-card-gap);
    row-gap: var(--bf-class-card-gap);
    width: 100%;
    height: 100%;
    align-items: center;
    align-content: center;
    min-width: 0;
}

.build-feed-top-panel__section--class .build-feed-class-cards {
    grid-template-columns: repeat(8, minmax(var(--bf-class-card-min-w), var(--bf-class-card-max-w)));
    justify-content: center;
}

.build-feed-top-panel__section--ascend .build-feed-class-cards {
    grid-template-columns: 56px repeat(auto-fit, minmax(88px, var(--bf-class-card-max-w)));
    justify-content: center;
}

.build-feed-top-panel__section--ascend .build-feed-class-cards.is-source-locked {
    grid-template-columns: repeat(auto-fit, minmax(88px, var(--bf-class-card-max-w)));
}

.build-feed-top-panel__section--class .build-feed-class-card,
.build-feed-top-panel__section--ascend .build-feed-class-card {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    justify-self: center;
    align-self: center;
    aspect-ratio: 5 / 7;
    margin: 0;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    transition: transform 0.18s ease,
                box-shadow 0.18s ease;
}

/* 操作卡（返回 / 上一页 / 下一页）—— 统一样式：窄一半、无图、虚线框提示，和普通卡同高。
 *   用 --back / --prev / --next 三个 modifier，样式完全一致（只有图标/文字不同）。
 *   选择器必须带 `__section--class/ascend` 前缀，优先级才压得过第 2657 行的
 *   `.build-feed-top-panel__section--class .build-feed-class-card`（aspect-ratio: 6/7）。 */
.build-feed-top-panel__section--class .build-feed-class-card--back,
.build-feed-top-panel__section--class .build-feed-class-card--prev,
.build-feed-top-panel__section--class .build-feed-class-card--next,
.build-feed-top-panel__section--ascend .build-feed-class-card--back,
.build-feed-top-panel__section--ascend .build-feed-class-card--prev,
.build-feed-top-panel__section--ascend .build-feed-class-card--next {
    width: 56px;
    height: min(150px, calc(var(--bf-explorer-h) - 16px));
    max-width: 56px;
    aspect-ratio: auto;
    justify-self: center;
    align-self: center;
    background: var(--panel-strong);
    color: var(--muted);
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed var(--line-bright) !important;
    border-radius: 8px;
    transition: none !important;
}

/* 返回 / 上一页 / 下一页 —— 完全禁用 hover / active 视觉反馈。
 *   用 `!important` 压过第 2723 / 2730 行普通卡的 hover / is-active 规则。 */
.build-feed-top-panel__section--class .build-feed-class-card--back,
.build-feed-top-panel__section--class .build-feed-class-card--back:hover,
.build-feed-top-panel__section--class .build-feed-class-card--back:active,
.build-feed-top-panel__section--class .build-feed-class-card--prev,
.build-feed-top-panel__section--class .build-feed-class-card--prev:hover,
.build-feed-top-panel__section--class .build-feed-class-card--prev:active,
.build-feed-top-panel__section--class .build-feed-class-card--next,
.build-feed-top-panel__section--class .build-feed-class-card--next:hover,
.build-feed-top-panel__section--class .build-feed-class-card--next:active,
.build-feed-top-panel__section--ascend .build-feed-class-card--back,
.build-feed-top-panel__section--ascend .build-feed-class-card--back:hover,
.build-feed-top-panel__section--ascend .build-feed-class-card--back:active,
.build-feed-top-panel__section--ascend .build-feed-class-card--prev,
.build-feed-top-panel__section--ascend .build-feed-class-card--prev:hover,
.build-feed-top-panel__section--ascend .build-feed-class-card--prev:active,
.build-feed-top-panel__section--ascend .build-feed-class-card--next,
.build-feed-top-panel__section--ascend .build-feed-class-card--next:hover,
.build-feed-top-panel__section--ascend .build-feed-class-card--next:active {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

.build-feed-class-card--back .build-feed-class-card__back-icon,
.build-feed-class-card--prev .build-feed-class-card__back-icon,
.build-feed-class-card--next .build-feed-class-card__back-icon {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}

.build-feed-top-panel__section--class .build-feed-class-card:hover,
.build-feed-top-panel__section--ascend .build-feed-class-card:hover {
    transform: scale(1.02);
    filter: none;
    box-shadow: var(--shadow-md);
}

.build-feed-top-panel__section--class .build-feed-class-card.is-active,
.build-feed-top-panel__section--ascend .build-feed-class-card.is-active {
    transform: none;
    filter: none;
    background: transparent;
    box-shadow:
        0 0 0 2px var(--teal),
        var(--shadow-md);
}

.build-feed-top-panel__section--class .build-feed-class-card.is-active:hover,
.build-feed-top-panel__section--ascend .build-feed-class-card.is-active:hover {
    transform: scale(1.02);
    filter: none;
    background: transparent;
    box-shadow:
        0 0 0 2px var(--teal),
        var(--shadow-md);
}


.build-feed-top-panel__section--class .build-feed-class-card__img,
.build-feed-top-panel__section--ascend .build-feed-class-card__img {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 6px;
    bottom: 31px;
    width: calc(100% - 12px);
    height: calc(100% - 37px);
    border-radius: 6px;
    /* [v11] contain 保证角色立绘完整显示、不被裁切也不被拉伸 */
    object-fit: contain;
    object-position: center center;
    /* 亮色：白底；暗色：跟随 card/panel 的深色 elevated 背景；
       这样立绘周围不再出现灰灰的"暗盒子"效果。 */
    background: transparent;
    /* 去掉 hover/选中时的 scale 动效：多选重绘时 DOM 被替换，
     *   鼠标仍在原位会重新触发 :hover transition，造成"缩-放"抖动。
     *   直接让图片静止，避免任何 transform 相关视觉跳动。 */
    transition: none;
    transform: none;
}

.build-feed-top-panel__section--class .build-feed-class-card__label,
.build-feed-top-panel__section--ascend .build-feed-class-card__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 7px 5px 8px;
    width: 100%;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.02em;
    /* 亮色：卡片底已经是白色，文字走主文字色 + 白色描边保证在浅色立绘上仍可读，不再加黑色遮罩条 */
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: transparent;
    text-shadow:
        0 0 2px var(--bg-primary),
        0 1px 2px color-mix(in srgb, var(--bg-primary) 80%, transparent);
    pointer-events: none;
}

[data-theme="dark"] .build-feed-top-panel__section--class .build-feed-class-card__label,
[data-theme="dark"] .build-feed-top-panel__section--ascend .build-feed-class-card__label {
    /* 暗色模式：卡底是深色/立绘上半部也偏亮，保留深色渐变条 + 白字方案 */
    color: #ffffff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.build-feed-top-panel__section--class .build-feed-class-card.is-active .build-feed-class-card__label,
.build-feed-top-panel__section--ascend .build-feed-class-card.is-active .build-feed-class-card__label {
    color: var(--brand);
}

[data-theme="dark"] .build-feed-top-panel__section--class .build-feed-class-card.is-active .build-feed-class-card__label,
[data-theme="dark"] .build-feed-top-panel__section--ascend .build-feed-class-card.is-active .build-feed-class-card__label {
    color: var(--brand-2);
}

/* 锁定态通用样式：降低交互视觉、禁用 hover、光标提示 */
.build-feed-filter-block.is-locked,
.build-feed-source-chips.is-locked,
.build-feed-source-chip.is-locked,
.build-feed-class-card.is-locked,
.build-feed-field.is-locked {
    opacity: 0.75;
    cursor: not-allowed;
}

.build-feed-source-chip.is-locked,
.build-feed-class-card.is-locked {
    pointer-events: none;
}

.build-feed-field.is-locked select,
.build-feed-field.is-locked input {
    cursor: not-allowed;
    opacity: 0.85;
}

/* 中屏：顶部模式滑道 + explorer 主区 ，整体高度缩一档 */
@media (max-width: 1200px) {
    .build-feed-top-panel {
        --bf-explorer-h: var(--bf-filter-explorer-h);
    }
}

/* 小屏：完全塌成单列 —— 职业 → picker → 筛选
 *   第一列 segmented toggle 改为横向 2 列，滑块做左右滑动。 */
@media (max-width: 900px) {
    .build-feed-top-panel {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .build-feed-top-panel__modes {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
        margin-right: 0;
    }
    .build-feed-top-panel__thumb {
        left: 6px;
        top: 6px;
        bottom: 6px;
        height: auto;
        width: calc(50% - 9px);
        transform: translateX(0);
    }
    .build-feed-top-panel__modes[data-active-mode="similar"] .build-feed-top-panel__thumb {
        transform: translateX(calc(100% + 6px));
    }
    .build-feed-topmode-btn {
        padding: 12px 10px;
    }
    .build-feed-top-panel__section--similar {
        grid-template-columns: 1fr;
    }
    /* 小屏：卡片仍然 4/7 海报，整体再缩一档 */
    .build-feed-top-panel {
        --bf-explorer-h: var(--bf-filter-explorer-h);
    }
    .build-feed-source-picker-slot {
        min-height: 42px;
    }
    .build-feed-primary-layout,
    .build-feed-page-layout {
        grid-template-columns: 1fr;
    }
    .build-feed-page-sidebar {
        order: -1;
        padding-top: 0;
    }
    .build-feed-side-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 96px;
        height: 96px;
    }
    .build-feed-personal-center-btn {
        height: 54px;
        font-size: 18px;
    }
    .build-feed-class-context-row {
        align-items: stretch;
        flex-direction: column;
    }
    .build-feed-class-context-selects {
        width: 100%;
        flex-wrap: wrap;
    }
    .build-feed-class-context-row .build-feed-field--sm,
    .build-feed-class-context-row .build-feed-field--season {
        width: calc(50% - 4px);
        max-width: none;
    }
    .build-feed-class-context-counts {
        text-align: left;
        white-space: normal;
    }
    .build-feed-filter-row--v4 > .build-feed-filters--v4 {
        display: block;
    }
    .build-feed-filter-topbar {
        justify-content: flex-start;
        margin-left: 0;
    }
    .build-feed-filter-mainline {
        flex-direction: column;
        gap: 12px;
    }
    .build-feed-filter-right-stack {
        align-items: flex-start;
        width: 100%;
    }
    .build-feed-post-taxonomy-main {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .build-feed-post-taxonomy-actions {
        justify-self: start;
        width: min(220px, 100%);
    }
    .build-feed-post-taxonomy-selects {
        justify-content: center;
        flex-wrap: wrap;
    }
    .build-feed-post-taxonomy-spacer {
        display: none;
    }
    .build-feed-compose-post-btn {
        min-width: 0;
    }
    .build-feed-filter-row-grid__line--advanced-selects .build-feed-field--season,
    .build-feed-filter-row-grid__line--advanced-selects .build-feed-field--mode {
        width: calc(50% - 5px);
    }
    .build-feed-source-picker-slot .build-feed-picker-card--empty,
    .build-feed-source-picker-slot .build-feed-picker-card--selected {
        min-height: 40px;
    }
    .build-feed-filters__line {
        justify-content: flex-start;
    }
    .build-feed-filters__line .build-feed-field--sm {
        width: calc(50% - 5px);
        max-width: none;
    }
    .build-feed-filters__line .build-feed-field--season {
        width: calc(50% - 5px);
        max-width: none;
    }
    .build-feed-filters__line--source {
        justify-content: flex-start;
    }
    /* v4.3：顶部搜索栏本身就 100% 宽，不需要再干预。LV 三件套跟着父 flex wrap 即可。 */
}

/* [v4.1] 错误横条：图标 + 文案 + 重试按钮，单行 48px 高。
 * 和顶部筛选栏之间有 12px 上边距，不再贴在筛选框正下方。 */
.build-feed-errorbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(232, 118, 118, 0.38);
    background: rgba(48, 18, 22, 0.55);
    color: #f6d7d2;
    font-size: 13px;
    line-height: 1.4;
}

.build-feed-errorbar__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 118, 118, 0.25);
    color: #f7c2bd;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
}

.build-feed-errorbar__msg {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.build-feed-errorbar__retry {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--danger-border);
    background: var(--bg-elevated);
    color: var(--danger-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s, background 0.16s, color 0.16s;
}

.build-feed-errorbar__retry:hover {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}

/* 卡片相似侧栏底部的"详情"按钮 */
.build-feed-card__sim-detail-btn {
    align-self: flex-end;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(201, 171, 96, 0.35);
    background: rgba(14, 17, 25, 0.7);
    color: var(--brand-2);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.build-feed-card__sim-detail-btn:hover {
    border-color: rgba(201, 171, 96, 0.6);
    background: rgba(26, 30, 40, 0.92);
}

.build-feed-card__sim-detail-btn.is-active {
    border-color: rgba(125, 201, 190, 0.55);
    background: rgba(125, 201, 190, 0.15);
    color: var(--teal);
}

/* 卡片下方的独立详情抽屉：落在卡片和展开面板之间；不继承展开面板的 grid */
.build-feed-card__sim-detail {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(201, 171, 96, 0.22);
    background: rgba(14, 17, 25, 0.9);
}

.build-feed-card__sim-detail .build-feed-similar-debug {
    padding: 0;
    background: none;
    border: none;
}

/* ===== 信息流通用 toast（例如"登录后使用"） ===== */
.build-feed-toast {
    position: fixed;
    left: 50%;
    bottom: 56px;
    transform: translate(-50%, 16px);
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--brand-2);
    background: rgba(14, 17, 25, 0.95);
    border: 1px solid rgba(201, 171, 96, 0.4);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    z-index: 9999;
    max-width: min(80vw, 420px);
    text-align: center;
}

.build-feed-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.build-feed-toast--error {
    border-color: rgba(230, 110, 100, 0.6);
    color: #ffc7c0;
}

.build-feed-toast--success {
    border-color: rgba(120, 200, 110, 0.55);
    color: #c6edc2;
}

/* v5：服务端分页条。
 * 目标：视觉轻、在深色面板上存在感低、按钮热区够用、边界状态（disabled）一眼能看懂。
 * 放在 build-feed-list 下方，与卡片之间靠 margin-top 拉开。 */
.build-feed-public-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.build-feed-public-sentinel--more {
    cursor: pointer;
}

.build-feed-public-sentinel--more:hover {
    color: var(--accent-green);
}

.build-feed-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    padding: 6px 0 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 13px;
}

.build-feed-pagination__btn {
    flex: 0 0 auto;
    min-width: 72px;
    height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s, background 0.16s, color 0.16s;
}

.build-feed-pagination__btn:hover:not(:disabled) {
    border-color: var(--brand);
    background: var(--accent-gold-tint);
    color: var(--brand);
}

.build-feed-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.build-feed-pagination__meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--muted);
    white-space: nowrap;
}

.build-feed-pagination__input {
    width: 56px;
    height: 26px;
    padding: 0 6px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--input-bg);
    color: var(--text);
    font-size: 12.5px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.build-feed-pagination__input::-webkit-outer-spin-button,
.build-feed-pagination__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.build-feed-pagination__input:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--input-bg);
    box-shadow: 0 0 0 2px var(--accent-gold-tint-strong);
}

@media (max-width: 720px) {
    .build-feed-card__actions--bottom {
        gap: 8px;
    }

    .build-feed-card__actions-group {
        gap: 6px;
    }
}

@media (max-width: 520px) {
    .build-feed-card__headline {
        flex-wrap: wrap;
        row-gap: 2px;
        white-space: normal;
    }

    .build-feed-card__headline .build-feed-card__title {
        flex-basis: 100%;
    }

    .build-feed-card__headline-sep {
        display: none;
    }

    .build-feed-card__action-btn--icon,
    a.build-feed-card__action-btn--icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
    }
}