/**
 * 文章徽标样式
 * ---------------------------------------------------------------
 * 1. 详情页：胶囊徽标内联于标题文字之后
 * 2. 列表卡片：左上角子分类 / 右上角状态
 * 3. 前台写文章页面：徽标编辑器 + 本篇不显示画廊开关
 * 主色调：#d10f45 玫红系（固定，不跟随主题色）
 *
 * @package xd_badges_gallery
 */

/* =========================================================
   胶囊徽标基础样式
   ========================================================= */
.xd-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 11px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
    vertical-align: middle;
}

.xd-pill-badge .xd-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

/* 文字独立成项，与白点一起被 flex 垂直居中；0.5px 修正中文字形视觉偏上 */
.xd-pill-label {
    display: inline-block;
    line-height: 1;
    position: relative;
    top: 0.5px;
}

/* 自动状态色：最新=玫红 #d10f45，已更新=深蓝 #2563eb */
/* 已更新：深蓝 */
.xd-pill-badge--updated {
    background: #2563eb;
    box-shadow: 0 2px 8px -2px rgba(37, 99, 235, 0.55);
}

/* 最新/新发布：玫红 */
.xd-pill-badge--latest {
    background: #d10f45;
    box-shadow: 0 2px 8px -2px rgba(209, 15, 69, 0.55);
}

/* 手动徽标预设色（theme 为偏深橙色系；其余保留为可选项） */
.xd-pill-badge--theme {
    background: #e98220;
    box-shadow: 0 2px 8px -2px rgba(233, 130, 32, 0.55);
}
.xd-pill-badge--red {
    background: #f5535e;
    box-shadow: 0 2px 8px -2px rgba(245, 83, 94, 0.6);
}
.xd-pill-badge--green {
    background: #22c55e;
    box-shadow: 0 2px 8px -2px rgba(34, 197, 94, 0.6);
}
.xd-pill-badge--blue {
    background: #3b82f6;
    box-shadow: 0 2px 8px -2px rgba(59, 130, 246, 0.6);
}
.xd-pill-badge--orange {
    background: #f59e0b;
    box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.6);
}
.xd-pill-badge--purple {
    background: #a855f7;
    box-shadow: 0 2px 8px -2px rgba(168, 85, 247, 0.6);
}

/* =========================================================
   详情页：标题文字后内联
   ========================================================= */
.article-title .xd-pill-badge {
    margin-left: 10px;
    position: relative;
    top: -2px;
}

/* =========================================================
   列表卡片角标
   ========================================================= */
.xd-card-cat-badge,
.xd-card-status-badge {
    position: absolute;
    top: 10px;
    z-index: 3;
}

/* 左上角：子分类（黑色半透明） */
.xd-card-cat-badge {
    left: 10px;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    font-size: 11.5px;
    font-weight: 600;
    /* 行高等于高度：单行文字垂直绝对居中，不依赖匿名 flex 文本对齐 */
    line-height: 22px;
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    background: rgba(17, 19, 24, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s ease;
}

.xd-card-cat-badge:hover {
    background: rgba(17, 19, 24, 0.82);
}

/* 右上角：状态徽标（比标题徽标小一号，精确居中） */
.xd-card-status-badge {
    right: 10px;
    height: 22px;
    padding: 0 9px;
    font-size: 11.5px;
    gap: 4px;
}

.xd-card-status-badge .xd-pill-dot {
    width: 6px;
    height: 6px;
}

/* 卡片上取消标题徽标的 0.5px 视觉偏移，纯数学居中 */
.xd-card-status-badge .xd-pill-label {
    top: 0;
    line-height: 22px;
}

/* =========================================================
   列表卡片右下角堆叠标签
   自上而下：Steam 评分（按分值自动变色）→ 容量 → 版本
   容量、版本底色由设置页配置、JS 内联
   ========================================================= */
.xd-card-stack {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    max-width: 62%;
}

/* 三个标签的共同基础 */
.xd-card-stack .xd-card-size-badge,
.xd-card-stack .xd-card-version-badge,
.xd-card-stack .xd-card-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 22px;
    color: #fff;
    border-radius: 999px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 2px 7px -2px rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
}

/* 图标不被压缩，文本节点负责截断 */
.xd-card-stack .xd-card-size-icon,
.xd-card-stack .xd-card-version-icon {
    flex-shrink: 0;
}

/* 容量、版本兜底底色（实际颜色以设置页为准，由 JS 内联覆盖） */
.xd-card-stack .xd-card-size-badge   { background: #1f2937; }
.xd-card-stack .xd-card-version-badge { background: #0284c7; }

/* 评分：初始透明（等待异步数据），就绪淡入；不显示占位符 */
.xd-card-stack .xd-card-score-badge {
    background: #1f2937; /* 就绪前不可见，仅为兜底 */
    opacity: 0;
}

.xd-card-stack .xd-card-score-badge.is-ready {
    opacity: 1;
}

/* 评分按十分制分值自动变色：≥8 绿 / ≥6 蓝 / ≥4 琥珀 / <4 红 */
.xd-card-stack .xd-card-score-badge.tone-green  { background: #16a34a; }
.xd-card-stack .xd-card-score-badge.tone-blue   { background: #2563eb; }
.xd-card-stack .xd-card-score-badge.tone-amber  { background: #d97706; }
.xd-card-stack .xd-card-score-badge.tone-red    { background: #dc2626; }

/* 星标白色，与彩色底协调 */
.xd-card-stack .xd-card-star {
    color: #fff;
    font-size: 12.5px;
    line-height: 1;
}

.xd-card-stack .xd-card-score-num,
.xd-card-stack .xd-card-size-num,
.xd-card-stack .xd-card-version-text {
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   前台写文章页面：徽标编辑器
   ========================================================= */
.xd-badge-editor {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.08));
    border-radius: 10px;
    background: var(--main-bg-color, #fff);
}

.xd-badge-editor__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--key-color, inherit);
}

.xd-badge-editor__hint {
    font-size: 12px;
    color: var(--muted-color, #8b93a7);
    margin: 0 0 14px;
}

.xd-badge-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.xd-badge-text-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.08));
    border-radius: 6px;
    background: var(--body-bg-color, #f5f6f7);
    color: var(--key-color, #333);
    font-size: 14px;
}

.xd-badge-text-input:focus {
    outline: none;
    border-color: #d10f45;
}

.xd-color-picker {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.xd-color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    padding: 0;
    transition: transform 0.15s ease;
}

.xd-color-dot.active {
    border-color: var(--key-color, #333);
    transform: scale(1.15);
}

.xd-badge-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(245, 83, 94, 0.12);
    color: #f5535e;
    font-size: 15px;
    cursor: pointer;
}

.xd-badge-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 6px;
    border: 1px dashed #d10f45;
    background: transparent;
    color: #d10f45;
    font-size: 13px;
    cursor: pointer;
}

/* 本篇不显示画廊开关行 */
.xd-gallery-disable-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.08));
    font-size: 13.5px;
    color: var(--key-color, inherit);
    cursor: pointer;
}

.xd-gallery-disable-row input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.xd-live-preview {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--main-border-color, rgba(50, 50, 50, 0.08));
    min-height: 24px;
}

.xd-live-preview .xd-lp-label {
    font-size: 12px;
    color: var(--muted-color, #8b93a7);
    margin-bottom: 8px;
}

.xd-live-preview .xd-pill-badge {
    margin: 0 6px 6px 0;
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 768px) {
    .article-title .xd-pill-badge {
        height: 21px;
        padding: 0 9px;
        font-size: 11.5px;
        margin-left: 7px;
    }

    .xd-card-cat-badge {
        height: 20px;
        padding: 0 8px;
        font-size: 11px;
        line-height: 20px;
    }

    .xd-card-status-badge {
        height: 20px;
        padding: 0 8px;
        font-size: 11px;
    }

    .xd-card-status-badge .xd-pill-label {
        line-height: 20px;
    }

    /* 右下角堆叠同步缩小，贴边收至 8px */
    .xd-card-stack {
        right: 8px;
        bottom: 8px;
        gap: 3px;
    }

    .xd-card-stack .xd-card-size-badge,
    .xd-card-stack .xd-card-version-badge,
    .xd-card-stack .xd-card-score-badge {
        height: 20px;
        padding: 0 8px;
        font-size: 10.5px;
        line-height: 20px;
        gap: 4px;
    }

    .xd-card-stack .xd-card-score-badge .xd-card-star {
        font-size: 11.5px;
    }

    .xd-card-stack .xd-card-size-badge .xd-card-size-icon {
        width: 12px;
        height: 12px;
    }

    .xd-card-stack .xd-card-version-badge .xd-card-version-icon {
        width: 11px;
        height: 11px;
    }

    .xd-badge-row {
        flex-wrap: wrap;
    }

    .xd-color-picker {
        width: 100%;
        overflow-x: auto;
    }
}