/* ================================================================
 * DS v4.5 资源版本 + 更新日志 + 短链接 样式
 * ================================================================ */

/* ========== 版本管理 ========== */
.ds-version-section { margin: 24px 0; padding: 20px; background: var(--ds-color-white, #fff); border: 1px solid var(--ds-color-border, #ebeef5); border-radius: var(--ds-radius-md, 8px); }
.ds-version-title { font-size: 15px; font-weight: 700; margin: 0 0 16px; color: var(--ds-color-text-1, #222); }
.ds-version-tabs { display: flex; gap: 6px; border-bottom: 2px solid var(--ds-color-border, #ebeef5); margin-bottom: 16px; overflow-x: auto; flex-wrap: wrap; }
.ds-version-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; font-size: 13px; color: var(--ds-color-text-2, #606266); cursor: pointer; transition: all 0.2s; margin-bottom: -2px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ds-version-tab:hover { color: var(--ds-color-primary, #FF7D00); }
.ds-version-tab.is-active { color: var(--ds-color-primary, #FF7D00); border-bottom-color: var(--ds-color-primary, #FF7D00); font-weight: 600; }
.ds-version-tab-num { font-weight: 600; }
.ds-version-tab-badge { display: inline-block; padding: 1px 6px; font-size: 10px; background: #FF7D00; color: #fff; border-radius: 3px; }
.ds-version-tab-badge.ds-version-tab-beta { background: #f59e0b; }
.ds-version-tab-size { font-size: 11px; color: var(--ds-color-text-3, #909399); }

.ds-version-panes { position: relative; }
.ds-version-pane { display: none; padding: 8px 0; }
.ds-version-pane.is-active { display: block; }
.ds-version-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ds-color-text-3, #909399); margin-bottom: 12px; }
.ds-version-changelog { background: var(--ds-color-bg, #fafafa); padding: 12px; border-radius: 6px; font-size: 13px; color: var(--ds-color-text-1, #222); line-height: 1.6; }
.ds-version-changelog strong { display: block; margin-bottom: 4px; }
.ds-version-current-tip { margin-top: 12px; padding: 8px 12px; background: rgba(255,125,0,.1); color: #FF7D00; border-radius: 4px; font-size: 12px; }
.ds-version-current-tip a { color: #FF7D00; font-weight: 600; text-decoration: underline; }

/* ========== 更新日志(时间轴) ========== */
.ds-changelog-section { margin: 24px 0; padding: 20px; background: var(--ds-color-white, #fff); border: 1px solid var(--ds-color-border, #ebeef5); border-radius: var(--ds-radius-md, 8px); }
.ds-changelog-title { font-size: 15px; font-weight: 700; margin: 0 0 20px; color: var(--ds-color-text-1, #222); }
.ds-changelog-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.ds-changelog-timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--ds-color-border, #ebeef5); }
.ds-changelog-item { position: relative; padding-left: 28px; margin-bottom: 16px; }
.ds-changelog-item:last-child { margin-bottom: 0; }
.ds-changelog-dot { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--ds-color-primary, #FF7D00); box-shadow: 0 0 0 4px rgba(255,125,0,.15); }
.ds-changelog-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.ds-changelog-head strong { color: var(--ds-color-text-1, #222); font-size: 14px; }
.ds-changelog-ver { padding: 1px 8px; background: var(--ds-color-primary, #FF7D00); color: #fff; border-radius: 3px; font-size: 11px; font-weight: 600; }
.ds-changelog-time { font-size: 12px; color: var(--ds-color-text-3, #909399); }
.ds-changelog-text { font-size: 13px; color: var(--ds-color-text-2, #606266); line-height: 1.6; }

/* ========== 短链接按钮 ========== */
.ds-short-url-btn { display: flex; align-items: center; gap: 12px; margin: 24px 0; padding: 12px 16px; background: var(--ds-color-white, #fff); border: 1px solid var(--ds-color-border, #ebeef5); border-radius: var(--ds-radius-md, 8px); }
.ds-short-url-copy { display: inline-flex; align-items: center; gap: 6px; background: var(--ds-color-primary, #FF7D00); color: #fff; border: 0; padding: 8px 16px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; flex-shrink: 0; }
.ds-short-url-copy:hover { background: #ff6a00; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,125,0,.3); }
.ds-short-url-copy.is-copied { background: #10b981; }
.ds-short-url-icon { font-size: 16px; }
.ds-short-url-display { flex: 1; font-size: 13px; color: var(--ds-color-text-2, #606266); background: var(--ds-color-bg, #fafafa); padding: 6px 10px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ========== 后台版本管理 ========== */
.ds-version-admin { padding: 12px 0; }
.ds-version-add { background: #f9f9f9; padding: 16px; border-radius: 6px; }
.ds-version-admin .form-table th { width: 120px; padding: 10px 10px 10px 0; }
.ds-version-admin .form-table td { padding: 8px 0; }

/* 暗黑模式 */
[data-ds-theme="dark"] .ds-version-section, [data-ds-theme="dark"] .ds-changelog-section, [data-ds-theme="dark"] .ds-short-url-btn { background: #1e1e1e; border-color: #333; }
[data-ds-theme="dark"] .ds-version-tabs { border-color: #333; }
[data-ds-theme="dark"] .ds-version-tab { color: #aaa; }
[data-ds-theme="dark"] .ds-version-changelog, [data-ds-theme="dark"] .ds-short-url-display { background: #2a2a2a; color: #e0e0e0; }
[data-ds-theme="dark"] .ds-changelog-head strong { color: #e5e5e5; }
[data-ds-theme="dark"] .ds-changelog-text { color: #aaa; }
[data-ds-theme="dark"] .ds-version-admin .ds-version-add { background: #2a2a2a; }
[data-ds-theme="dark"] .ds-changelog-timeline::before { background: #333; }

/* 移动端 */
@media (max-width: 768px) {
    .ds-version-section, .ds-changelog-section { padding: 14px; }
    .ds-version-tabs { gap: 4px; }
    .ds-version-tab { padding: 8px 12px; font-size: 12px; }
    .ds-version-meta { flex-direction: column; gap: 4px; }
    .ds-short-url-btn { flex-direction: column; align-items: stretch; }
}