/**
 * 下载中心页面样式
 *
 * @package Theme_License_Server
 * @since   1.0.0
 */

/* ========================================
   下载中心页面
   ======================================== */
.tls-download-center {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 页面头部 */
.tls-download-center-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-container);
    border-radius: var(--xun-radius-lg, 12px);
    box-shadow: var(--shadow-card);
}

.tls-download-center-header-left {
    flex: 1;
    min-width: 0;
}

.tls-download-center-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
}

.tls-download-center-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

.tls-download-center-header-right {
    flex-shrink: 0;
}

/* VIP 徽章 */
.tls-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--vip-color, var(--xun-primary));
    background: color-mix(in srgb, var(--vip-color, var(--xun-primary)) 10%, transparent);
    border-radius: 9999px;
}

.tls-vip-badge svg {
    flex-shrink: 0;
}

.tls-vip-badge--normal {
    --vip-color: var(--color-text-tertiary);
}

/* 统计卡片 */
.tls-download-center-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.tls-download-center-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-bg-container);
    border-radius: var(--xun-radius-lg, 12px);
    box-shadow: var(--shadow-card);
}

.tls-download-center-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--xun-radius, 8px);
}

.tls-download-center-stat-icon.is-themes {
    background: color-mix(in srgb, #722ed1 12%, transparent);
    color: #722ed1;
}

.tls-download-center-stat-icon.is-licenses {
    background: color-mix(in srgb, #1890ff 12%, transparent);
    color: #1890ff;
}

.tls-download-center-stat-icon.is-downloads {
    background: color-mix(in srgb, #52c41a 12%, transparent);
    color: #52c41a;
}

.tls-download-center-stat-info {
    flex: 1;
    min-width: 0;
}

.tls-download-center-stat-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    margin-bottom: 0.25rem;
}

.tls-download-center-stat-value {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.tls-download-center-stat-limit {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-text-tertiary);
}

/* 主题列表区域 */
.tls-download-center-themes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tls-download-center-themes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--color-bg-container);
    border-radius: var(--xun-radius-lg, 12px);
    box-shadow: var(--shadow-card);
}

.tls-download-center-themes-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.tls-download-center-themes-count {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

/* 主题列表 */
.tls-download-center-themes-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-bg-container);
    border-radius: var(--xun-radius-lg, 12px);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* 主题列表项 */
.tls-theme-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-bg-container);
    border-bottom: 1px solid var(--color-border-secondary);
}

.tls-theme-card:last-child {
    border-bottom: none;
}

/* 封面图 */
.tls-theme-card-cover {
    position: relative;
    flex-shrink: 0;
    width: 120px;
    height: 90px;
    border-radius: var(--xun-radius, 8px);
    overflow: hidden;
    background: var(--color-fill-quaternary);
}

.tls-theme-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 已授权标签 */
.tls-theme-card-licensed {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.25rem;
    font-size: 0.625rem;
    font-weight: 500;
    color: #fff;
    background: var(--color-success);
    border-radius: 0 var(--xun-radius, 8px) 0 var(--xun-radius-sm, 4px);
}

.tls-theme-card-licensed svg {
    width: 10px;
    height: 10px;
}

/* 内容区 */
.tls-theme-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tls-theme-card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 元信息 */
.tls-theme-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.tls-theme-card-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.tls-theme-card-version {
    color: var(--xun-primary);
}

/* 描述 */
.tls-theme-card-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 版本要求 */
.tls-theme-card-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tls-theme-card-req {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    color: var(--color-text-tertiary);
    background: var(--color-fill-quaternary);
    border-radius: var(--xun-radius-sm, 4px);
}

/* 操作按钮 */
.tls-theme-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.tls-theme-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: var(--xun-radius, 8px);
    cursor: pointer;
    white-space: nowrap;
}

.tls-theme-card-btn svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.tls-theme-card-btn--detail {
    color: var(--color-text-secondary);
    background: var(--color-fill-quaternary);
}

.tls-theme-card-btn--download {
    color: #fff;
    background: var(--xun-primary);
}

.tls-theme-card-btn--license {
    color: var(--color-text-secondary);
    background: var(--color-fill-quaternary);
}

/* 空状态 */
.tls-download-center-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: var(--color-bg-container);
    border-radius: var(--xun-radius-lg, 12px);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.tls-download-center-empty-icon {
    margin-bottom: 1.5rem;
    color: var(--color-text-quaternary);
}

.tls-download-center-empty-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
}

.tls-download-center-empty-desc {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

/* ========================================
   模态框动画
   ======================================== */
/* 模态框基础样式 - 隐藏状态 */
#tls-theme-detail-modal,
#tls-download-progress-modal,
#tls-download-success-modal {
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease-out;
    pointer-events: none;
    will-change: opacity;
    /* 修复字体模糊问题 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 模态框显示状态 */
#tls-theme-detail-modal.is-active,
#tls-download-progress-modal.is-active,
#tls-download-success-modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* 遮罩层动画 */
#tls-modal-overlay {
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
    will-change: opacity;
}

#tls-modal-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* 模态框内容字体清晰度优化 */
.tls-theme-detail-modal,
.tls-download-progress-modal,
.tls-download-success-modal {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tls-theme-detail-modal *,
.tls-download-progress-modal *,
.tls-download-success-modal * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   主题详情模态框
   ======================================== */
.tls-theme-detail-modal .modal-body {
    padding: 0;
}

.tls-theme-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--color-text-tertiary);
}

.tls-theme-detail-content {
    padding: 1.5rem;
}

.tls-theme-detail-header {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border-secondary);
    margin-bottom: 1.5rem;
}

.tls-theme-detail-cover {
    flex-shrink: 0;
    width: 200px;
    border-radius: var(--xun-radius, 8px);
    overflow: hidden;
}

.tls-theme-detail-cover img {
    width: 100%;
    height: auto;
    display: block;
}

.tls-theme-detail-info {
    flex: 1;
    min-width: 0;
}

.tls-theme-detail-title {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.tls-theme-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.tls-theme-detail-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.tls-theme-detail-version {
    color: var(--xun-primary);
}

.tls-theme-detail-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tls-theme-detail-req {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    background: var(--color-fill-quaternary);
    border-radius: var(--xun-radius-sm, 4px);
}

.tls-theme-detail-body {
    /* 详情内容区 */
}

.tls-theme-detail-section-title {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.tls-theme-detail-section-title:not(:first-child) {
    margin-top: 1.5rem;
}

.tls-theme-detail-description {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.tls-theme-detail-changelog {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    white-space: pre-wrap;
}

.tls-theme-detail-demo-link,
.tls-theme-detail-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--xun-primary);
    text-decoration: none;
}

.tls-theme-detail-demo-link:hover,
.tls-theme-detail-doc-link:hover {
    text-decoration: underline;
}

/* ========================================
   下载进度模态框
   ======================================== */
.tls-download-progress-modal .modal-body,
.tls-download-success-modal .modal-body {
    padding: 3rem 2rem;
}

.tls-download-progress,
.tls-download-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tls-download-progress-icon {
    margin-bottom: 1.5rem;
    color: var(--xun-primary);
}

.tls-download-success-icon {
    margin-bottom: 1.5rem;
    color: var(--color-success);
}

.tls-download-progress-text,
.tls-download-success-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tls-download-progress-title,
.tls-download-success-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.tls-download-progress-desc,
.tls-download-success-desc {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

/* 旋转动画 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ========================================
   响应式适配
   ======================================== */
@media (max-width: 768px) {
    .tls-download-center-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .tls-download-center-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .tls-download-center-stat-card {
        padding: 1rem;
        gap: 0.875rem;
    }

    .tls-download-center-stat-icon {
        width: 44px;
        height: 44px;
    }

    .tls-download-center-stat-value {
        font-size: 1.25rem;
    }

    .tls-download-center-themes-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 1rem;
    }

    .tls-theme-card {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem;
    }

    .tls-theme-card-cover {
        width: 80px;
        height: 60px;
    }

    .tls-theme-card-content {
        flex: 1;
        min-width: calc(100% - 96px);
    }

    .tls-theme-card-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .tls-theme-detail-header {
        flex-direction: column;
        gap: 1rem;
    }

    .tls-theme-detail-cover {
        width: 100%;
    }

    .tls-download-center-empty {
        padding: 3rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .tls-download-center-stat-icon {
        width: 40px;
        height: 40px;
    }

    .tls-download-center-stat-icon svg {
        width: 20px;
        height: 20px;
    }

    .tls-download-center-stat-label {
        font-size: 0.75rem;
    }

    .tls-download-center-stat-value {
        font-size: 1.125rem;
    }

    .tls-theme-card-btn span {
        display: none;
    }

    .tls-theme-card-btn {
        padding: 0.5rem;
    }
}

/* ========================================
   深色模式适配
   ======================================== */

/* 自动跟随系统深色模式 */
@media (prefers-color-scheme: dark) {
    :root:not(.light) .tls-download-center-header,
    :root:not(.light) .tls-download-center-stat-card,
    :root:not(.light) .tls-download-center-themes-header,
    :root:not(.light) .tls-download-center-themes-grid,
    :root:not(.light) .tls-theme-card,
    :root:not(.light) .tls-download-center-empty {
        background: var(--color-bg-container);
    }

    :root:not(.light) .tls-theme-card {
        border-bottom-color: var(--color-border);
    }

    :root:not(.light) .tls-download-center-stat-icon.is-themes {
        background: color-mix(in srgb, #722ed1 20%, transparent);
    }

    :root:not(.light) .tls-download-center-stat-icon.is-licenses {
        background: color-mix(in srgb, #1890ff 20%, transparent);
    }

    :root:not(.light) .tls-download-center-stat-icon.is-downloads {
        background: color-mix(in srgb, #52c41a 20%, transparent);
    }

    :root:not(.light) .tls-theme-card-req,
    :root:not(.light) .tls-theme-detail-req,
    :root:not(.light) .tls-theme-card-btn--detail,
    :root:not(.light) .tls-theme-card-btn--license {
        background: var(--color-fill-secondary);
    }

    :root:not(.light) .tls-vip-badge {
        background: color-mix(in srgb, var(--vip-color, var(--xun-primary)) 15%, transparent);
    }
}

/* 手动深色模式 (.dark 类) */
.dark .tls-download-center-header,
.dark .tls-download-center-stat-card,
.dark .tls-download-center-themes-header,
.dark .tls-download-center-themes-grid,
.dark .tls-theme-card,
.dark .tls-download-center-empty {
    background: var(--color-bg-container);
}

.dark .tls-theme-card {
    border-bottom-color: var(--color-border);
}

.dark .tls-download-center-stat-icon.is-themes {
    background: color-mix(in srgb, #722ed1 20%, transparent);
}

.dark .tls-download-center-stat-icon.is-licenses {
    background: color-mix(in srgb, #1890ff 20%, transparent);
}

.dark .tls-download-center-stat-icon.is-downloads {
    background: color-mix(in srgb, #52c41a 20%, transparent);
}

.dark .tls-theme-card-req,
.dark .tls-theme-detail-req,
.dark .tls-theme-card-btn--detail,
.dark .tls-theme-card-btn--license {
    background: var(--color-fill-secondary);
}

.dark .tls-vip-badge {
    background: color-mix(in srgb, var(--vip-color, var(--xun-primary)) 15%, transparent);
}