/* ============================================================
   后台「打包下载」面板样式
   依赖 admin.css 里已定义的 --admin-* 变量（含深色模式覆盖），
   所以这里只写结构，颜色一律走变量，深浅模式自动适配。
   ============================================================ */

.dl-page {
    padding: 24px 44px 60px;
    max-width: 980px;
}

.dl-header { margin-bottom: 22px; }

.dl-title {
    margin: 0 0 6px;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-heading);
    color: var(--admin-text);
}

.dl-sub {
    margin: 0;
    color: var(--admin-text-sub);
    font-size: var(--fs-sm);
}

.dl-card {
    border-radius: var(--admin-radius-lg);
    border: 1px solid var(--admin-card-border);
    background: var(--admin-bg-surface-primary);
    padding: 22px 24px;
    margin-bottom: 18px;
    box-shadow: var(--shadow-card);
}


/* ---------- 已选标签 ---------- */
.dl-selected {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: var(--admin-radius);
    background: var(--admin-accent-sub);
    border: 1px solid transparent;
}

.dl-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.dl-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: var(--admin-radius-pill);
    background: var(--admin-accent-gradient);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.dl-estimate {
    font-size: var(--fs-xs);
    color: var(--admin-text-sub);
    line-height: var(--lh-ui);
    /* 预留两行高度：刚选中时只有一行占位文字，结果返回后会多出一行磁盘说明，
       不预留的话整块会往下跳一次（回车之后 200ms 内跳两下，观感像闪）。 */
    min-height: calc(var(--lh-ui) * 2em);
}
.dl-estimate strong { color: var(--admin-text); font-weight: var(--fw-semibold); }

/* 闸门提示（体积超限 / 磁盘不足）：用警告色，明显但不刺眼 */
.dl-gate {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-warning-bg);
    border-left: 3px solid var(--admin-warning);
    color: var(--admin-text);
    font-size: var(--fs-xs);
    line-height: var(--lh-body);
}
.dl-gate.is-error {
    background: var(--admin-danger-bg);
    border-left-color: var(--admin-danger);
}

.dl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    align-items: center;
    /* 下拉菜单要盖住同一行的按钮，这里显式抬高层叠 */
    position: relative;
    z-index: 5;
}

/* 下载行：下拉框在左、按钮在右，按钮占满剩余宽度。
   注意：不要让两个子元素都是 width:100%，否则按钮会被挤到下一行、
   与展开的下拉菜单重叠（曾出现过该问题）。 */
.dl-actions .dl-select { flex: 0 0 auto; }
.dl-actions .btn-submit { flex: 1 1 180px; width: auto; min-width: 140px; }

/* 按钮在禁用时也要清楚"为什么不能点"，所以保留可见性只降透明度 */
.dl-actions .btn-submit[disabled],
.dl-actions .btn-action[disabled],
.dl-actions .btn-reset[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}

/* ---------- 进度 ---------- */
.dl-bar-wrap {
    height: 10px;
    margin: 16px 0 10px;
    border-radius: var(--admin-radius-pill);
    background: var(--admin-card-border);
    overflow: hidden;
}

.dl-bar {
    height: 100%;
    width: 0;
    border-radius: var(--admin-radius-pill);
    background: var(--admin-accent-gradient);
    transition: width 0.25s ease;
}

.dl-progress-line {
    font-size: var(--fs-sm);
    color: var(--admin-text);
    font-weight: var(--fw-medium);
}

.dl-progress-file {
    margin-top: 4px;
    font-size: var(--fs-2xs);
    color: var(--admin-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 自绘下拉框（与前台设置面板同一套交互与观感） ---------- */
/* 不用原生 <select>：它的弹出层由操作系统绘制，无法跟随站点的毛玻璃与主题风格。 */
.dl-select {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    /* 展开时把整个下拉抬起，保证菜单盖住同行的按钮 */
    z-index: 20;
    align-items: center;
    padding: 10px 40px 10px 16px;
    /* 与上传面板的 .modern-input 对齐：2px 透明边框，聚焦只变色 => 尺寸零跳动 */
    border-radius: var(--admin-radius);
    border: 2px solid transparent;
    background: var(--admin-bg-input);
    color: var(--admin-text);
    font-size: var(--fs-sm);
    line-height: var(--lh-ui);
    font-weight: var(--fw-medium);
    cursor: pointer;
    min-width: 160px;
    user-select: none;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
}
.dl-select:hover { border-color: var(--admin-accent); }
.dl-select:focus-visible,
.dl-select.is-open {
    outline: none;
    border-color: var(--admin-accent);
    background: var(--admin-bg-input-focus);
}
.dl-select-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-select-arrow {
    position: absolute;
    right: 14px;
    pointer-events: none;
    color: var(--admin-text-sub);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.dl-select.is-open .dl-select-arrow { transform: rotate(180deg); }

.dl-select-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 100%;
    z-index: 40;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: var(--admin-radius);
    /* 材质与上传面板的 .custom-select-dropdown 保持一致：**完全不透明**。
       之前用 --admin-bg-surface-primary（rgba .85）会透出下层文字，
       在下面那张"全部元数据 JSON"卡片上尤其明显，看着很脏。 */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.18s;
}
body.dark-mode .dl-select-menu {
    background: #1e1e1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50);
}
.dl-select.is-open .dl-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.dl-select.is-dropup .dl-select-menu {
    top: auto;
    bottom: calc(100% + 8px);
    transform-origin: bottom center;
    transform: translateY(6px) scale(0.98);
}
.dl-select.is-dropup.is-open .dl-select-menu { transform: translateY(0) scale(1); }

.dl-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* 与上传面板 .custom-select-item 统一：10px 16px */
    padding: 10px 16px;
    border-radius: var(--admin-radius-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-ui);
    color: var(--admin-text);
    cursor: pointer;
    transition: background 0.1s;
    /* 菜单宽度等于触发框时，右侧对勾会挤压文字导致换行（"图片 + JSON" 被折成两行）。
       这里强制单行，并允许在极窄情况下用省略号而不是折行。 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dl-select-option:hover,
.dl-select-option.is-highlight { background: rgba(37, 99, 235, 0.08); }
body.dark-mode .dl-select-option:hover,
body.dark-mode .dl-select-option.is-highlight { background: rgba(96, 165, 250, 0.12); }
.dl-select-option[aria-selected="true"] {
    color: var(--admin-accent);
    background: rgba(37, 99, 235, 0.06);
    font-weight: var(--fw-semibold);
}
body.dark-mode .dl-select-option[aria-selected="true"] {
    background: rgba(96, 165, 250, 0.10);
}
.dl-select-option[aria-selected="true"]::after {
    content: '';
    width: 5px;
    height: 10px;
    border: solid var(--admin-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-2px, -1px);
    flex-shrink: 0;
}

/* 联想下拉的"加载中"提示（admin.css 只定义了 empty，没有 loading） */
.tag-search-loading {
    padding: 12px;
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--admin-text-muted);
}

@media (max-width: 700px) {
    .dl-page { padding: 18px 16px 50px; }
    /* 窄屏改为上下堆叠；此时按钮独占一行，不会与下拉菜单重叠 */
    .dl-actions { flex-direction: column; align-items: stretch; }
    .dl-actions .dl-select,
    .dl-actions .btn-submit { width: 100%; flex: 1 1 auto; }
    .dl-select { justify-content: space-between; }
}

/* ===== 同一卡片内的两个子块（收藏 / 头像）===== */
.dl-subblock + .dl-subblock {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--admin-card-border);
}
.dl-subtitle {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--admin-text);
    margin-bottom: 8px;
}
.dl-subblock .upload-hint { margin-top: 8px; }