/* ============================================================
 * 下载系统前台样式 - 金属质感设计
 * 内容区域1600px，全宽顶部导航，全宽底部
 * ============================================================ */

/* ========== 重置与基础 ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 14px; }
body {
    font-family: "Microsoft YaHei", "Segoe UI", Tahoma, Arial, sans-serif;
    background: #2a2d33;
    color: #ddd;
    line-height: 1.6;
}
a { color: #7ab8e8; text-decoration: none; transition: color .2s; }
a:hover { color: #a0d0f0; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ========== 顶部全宽导航条 ========== */
.top-nav {
    width: 100%;
    background: linear-gradient(180deg, #3a3f47 0%, #2a2d33 50%, #222529 100%);
    border-bottom: 2px solid #5a6470;
    box-shadow: 0 4px 20px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(255,255,255,.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 60px;
}
.nav-logo { flex-shrink: 0; margin-right: 30px; }
.nav-logo a {
    color: #e8e8e8;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 10px rgba(122,184,232,.3);
    background: linear-gradient(180deg, #d0d0d0, #a0a0a0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nav-menu {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 4px;
}
.nav-link {
    padding: 8px 14px;
    color: #c0c4cc;
    font-size: 14px;
    border-radius: 4px;
    transition: all .2s;
    white-space: nowrap;
}
.nav-link:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    text-shadow: 0 0 8px rgba(122,184,232,.5);
}
.nav-search {
    flex-shrink: 0;
    display: flex;
    margin-left: auto;
    margin-right: 15px;
}
.nav-search form {
    display: flex;
    background: rgba(0,0,0,.3);
    border: 1px solid #4a5058;
    border-radius: 4px;
    overflow: hidden;
}
.search-input {
    background: transparent;
    border: none;
    color: #ddd;
    padding: 6px 12px;
    width: 160px;
    outline: none;
    font-size: 13px;
}
.search-input::placeholder { color: #666; }
.search-btn {
    background: linear-gradient(180deg, #5a6470, #3a3f47);
    border: none;
    color: #ddd;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 13px;
    transition: all .2s;
}
.search-btn:hover {
    background: linear-gradient(180deg, #6a7480, #4a5058);
    color: #fff;
}
.nav-user {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}
.nav-user-link {
    color: #c0c4cc;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 4px;
    transition: all .2s;
}
.nav-user-link:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
}

/* ========== 主体容器 1600px ========== */
.main-container {
    max-width: 1600px;
    margin: 20px auto;
    padding: 0 20px;
}

/* ========== 版块金属质感卡片 ========== */
.section-block {
    background: linear-gradient(180deg, #33363c 0%, #2a2d33 100%);
    border: 1px solid #4a5058;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.3),
                inset 0 1px 0 rgba(255,255,255,.05);
}
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(180deg, #3e434c 0%, #353a41 100%);
    border-bottom: 1px solid #5a6470;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.section-title {
    font-size: 16px;
    color: #e8e8e8;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: linear-gradient(180deg, #7ab8e8, #4a8ac8);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(122,184,232,.4);
}
.title-count {
    font-size: 12px;
    color: #888;
    font-weight: normal;
}
.more-link {
    color: #7ab8e8;
    font-size: 13px;
}
.more-link:hover { color: #a0d0f0; text-decoration: underline; }

/* ========== 软件网格 ========== */
.software-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    padding: 20px;
}
.software-grid.mini-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.software-card {
    display: flex;
    background: linear-gradient(180deg, #383d44 0%, #2e3238 100%);
    border: 1px solid #4a5058;
    border-radius: 6px;
    overflow: hidden;
    transition: all .25s;
    text-decoration: none;
    color: inherit;
}
.software-card:hover {
    border-color: #5a8ac8;
    box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(122,184,232,.2);
    transform: translateY(-2px);
}
.card-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3a3f47, #2a2d33);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #4a5058;
}
.card-icon img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}
.software-card.mini-card .card-icon {
    width: 56px;
    height: 56px;
}
.software-card.mini-card .card-icon img {
    width: 42px;
    height: 42px;
}
.card-body {
    flex: 1;
    padding: 10px 14px;
    overflow: hidden;
}
.card-title {
    font-size: 14px;
    color: #e0e0e0;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-meta {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
.meta-version {
    color: #7ab8e8;
}
.meta-size::before { content: '📁 '; }
.meta-lang { color: #aaa; }
.card-desc {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.card-stats {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #666;
}
.stat-item:first-child::before { content: '⬇ '; }

/* ========== 软件列表表格 ========== */
.software-list-table {
    padding: 10px 20px;
}
.software-list-table table {
    width: 100%;
    border-collapse: collapse;
}
.software-list-table th {
    text-align: left;
    padding: 10px;
    color: #aaa;
    font-size: 13px;
    border-bottom: 1px solid #4a5058;
    background: rgba(0,0,0,.15);
}
.software-list-table td {
    padding: 10px;
    border-bottom: 1px solid #353a41;
    font-size: 13px;
    color: #ccc;
}
.software-list-table tr:hover td {
    background: rgba(122,184,232,.05);
}
.col-name { min-width: 300px; }
.col-cat, .col-size, .col-date { width: 120px; }
.col-dl { width: 80px; text-align: center; }
.soft-link { color: #e0e0e0; }
.soft-link:hover { color: #7ab8e8; }
.soft-version {
    font-size: 12px;
    color: #7ab8e8;
    margin-left: 6px;
}
.badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 11px;
    margin-right: 4px;
    vertical-align: middle;
}
.badge-top {
    background: linear-gradient(180deg, #e07050, #c05030);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.badge-rec {
    background: linear-gradient(180deg, #50c070, #30a050);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.btn-dl-small {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(180deg, #5a8ac8, #3a6aa8);
    color: #fff !important;
    border-radius: 3px;
    font-size: 12px;
    transition: all .2s;
}
.btn-dl-small:hover {
    background: linear-gradient(180deg, #6a9ad8, #4a7ab8);
    box-shadow: 0 2px 8px rgba(90,138,200,.3);
}

/* ========== 置顶横幅 ========== */
.top-banner {
    display: flex;
    gap: 16px;
    padding: 20px;
}
.banner-card {
    flex: 1;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #3a3f47, #2a2d33);
    border: 1px solid #4a5058;
    border-radius: 6px;
    overflow: hidden;
    padding: 16px;
    transition: all .25s;
}
.banner-card:hover {
    border-color: #5a8ac8;
    box-shadow: 0 0 20px rgba(122,184,232,.15);
}
.banner-icon { flex-shrink: 0; margin-right: 16px; }
.banner-icon img { width: 64px; height: 64px; border-radius: 10px; }
.banner-info h3 { color: #e8e8e8; font-size: 16px; margin-bottom: 4px; }
.banner-info p { color: #888; font-size: 13px; }

/* ========== 首页双栏布局 ========== */
.home-layout {
    display: flex;
    gap: 20px;
}
.home-main { flex: 1; min-width: 0; }
.home-sidebar { width: 300px; flex-shrink: 0; }

/* ========== 侧边栏 ========== */
.sidebar-box {
    background: linear-gradient(180deg, #33363c 0%, #2a2d33 100%);
    border: 1px solid #4a5058;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.sidebar-header {
    padding: 10px 16px;
    background: linear-gradient(180deg, #3e434c, #353a41);
    border-bottom: 1px solid #5a6470;
}
.sidebar-header h3 {
    font-size: 15px;
    color: #e8e8e8;
}
.rank-list {
    padding: 8px 16px;
}
.rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #353a41;
}
.rank-item:last-child { border-bottom: none; }
.rank-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}
.rank-top {
    background: linear-gradient(180deg, #e07050, #c05030);
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.rank-normal {
    background: #3a3f47;
    color: #888;
}
.rank-title {
    flex: 1;
    font-size: 13px;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rank-title:hover { color: #7ab8e8; }
.rank-count {
    font-size: 12px;
    color: #666;
}
.cat-list {
    padding: 8px 16px;
}
.cat-list li { padding: 6px 0; }
.cat-list a {
    display: flex;
    justify-content: space-between;
    color: #ccc;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all .2s;
}
.cat-list a:hover, .cat-list a.active {
    background: rgba(122,184,232,.1);
    color: #7ab8e8;
}
.cat-count { color: #666; font-size: 12px; }

/* ========== 文章卡片 ========== */
.article-list-horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 20px;
}
.article-card-h {
    display: block;
    padding: 14px;
    background: linear-gradient(180deg, #383d44, #2e3238);
    border: 1px solid #4a5058;
    border-radius: 6px;
    transition: all .25s;
    color: inherit;
}
.article-card-h:hover {
    border-color: #5a8ac8;
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
    transform: translateY(-2px);
}
.article-card-h h3 {
    font-size: 14px;
    color: #e0e0e0;
    margin-bottom: 6px;
}
.article-card-h p {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}
.article-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #666;
}

/* ========== 列表页布局 ========== */
.list-layout, .detail-layout {
    display: flex;
    gap: 20px;
}
.list-main, .detail-main { flex: 1; min-width: 0; }
.list-sidebar, .detail-sidebar { width: 300px; flex-shrink: 0; }

/* ========== 文章列表 ========== */
.article-list {
    padding: 10px 20px;
}
.article-item {
    border-bottom: 1px solid #353a41;
    padding: 14px 0;
}
.article-item:last-child { border-bottom: none; }
.article-item-link {
    display: flex;
    gap: 16px;
    color: inherit;
}
.article-item-cover {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    overflow: hidden;
    border-radius: 4px;
}
.article-item-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.article-item-body { flex: 1; }
.article-item-title {
    font-size: 15px;
    color: #e0e0e0;
    margin-bottom: 6px;
}
.article-item-summary {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.article-item-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #666;
}

/* ========== 软件详情页 ========== */
.detail-card {
    background: linear-gradient(180deg, #33363c, #2a2d33);
    border: 1px solid #4a5058;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.detail-header {
    display: flex;
    gap: 20px;
    padding: 24px;
    border-bottom: 1px solid #4a5058;
    background: linear-gradient(180deg, #3e434c, #353a41);
}
.detail-icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #3a3f47, #2a2d33);
    border-radius: 12px;
    border: 1px solid #5a6470;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.detail-icon img { width: 80px; height: 80px; border-radius: 8px; }
.detail-info { flex: 1; }
.detail-title {
    font-size: 22px;
    color: #e8e8e8;
    margin-bottom: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.meta-row {
    font-size: 13px;
    color: #999;
}
.meta-label {
    display: inline-block;
    color: #666;
    width: 60px;
}
.download-area {
    padding: 24px;
    border-bottom: 1px solid #4a5058;
}
.dl-title {
    font-size: 16px;
    color: #e8e8e8;
    margin-bottom: 14px;
}
.dl-points-tip {
    padding: 10px 16px;
    background: rgba(224,112,80,.15);
    border: 1px solid rgba(224,112,80,.3);
    border-radius: 4px;
    color: #e0a080;
    font-size: 13px;
    margin-bottom: 14px;
}
.dl-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.dl-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 28px;
    background: linear-gradient(180deg, #5a8ac8, #3a6aa8);
    color: #fff !important;
    border-radius: 6px;
    font-size: 14px;
    transition: all .25s;
    box-shadow: 0 2px 8px rgba(90,138,200,.3);
}
.dl-btn:hover {
    background: linear-gradient(180deg, #6a9ad8, #4a7ab8);
    box-shadow: 0 4px 16px rgba(90,138,200,.5);
    transform: translateY(-2px);
}
.dl-btn-name { font-size: 13px; margin-bottom: 2px; }
.dl-btn-text { font-size: 15px; font-weight: bold; }
.detail-content {
    padding: 24px;
}
.content-title {
    font-size: 16px;
    color: #e8e8e8;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #4a5058;
}
.content-body {
    font-size: 14px;
    color: #ccc;
    line-height: 1.8;
}
.content-body p { margin-bottom: 12px; }
.content-body h2, .content-body h3 {
    color: #e8e8e8;
    margin: 16px 0 8px;
}
.content-body ul, .content-body ol {
    padding-left: 20px;
    margin-bottom: 12px;
    list-style: disc;
}
.content-body li { margin-bottom: 4px; }

/* ========== 文章详情 ========== */
.article-detail {
    background: linear-gradient(180deg, #33363c, #2a2d33);
    border: 1px solid #4a5058;
    border-radius: 6px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.article-detail-title {
    font-size: 24px;
    color: #e8e8e8;
    margin-bottom: 14px;
    text-align: center;
}
.article-detail-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 13px;
    color: #888;
    padding-bottom: 16px;
    border-bottom: 1px solid #4a5058;
    margin-bottom: 20px;
}
.article-detail-cover {
    text-align: center;
    margin-bottom: 20px;
}
.article-detail-cover img {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 6px;
}
.article-detail-content {
    font-size: 15px;
    color: #ccc;
    line-height: 1.9;
}
.article-detail-content p { margin-bottom: 14px; }
.article-detail-content h2, .article-detail-content h3 {
    color: #e8e8e8;
    margin: 20px 0 10px;
}
.article-detail-content ul, .article-detail-content ol {
    padding-left: 24px;
    margin-bottom: 14px;
    list-style: disc;
}
.article-nav {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #4a5058;
}
.article-nav-prev, .article-nav-next {
    font-size: 13px;
    color: #888;
}
.nav-label { color: #666; }

/* ========== 分页 ========== */
.pagination-wrap {
    padding: 16px 20px;
    text-align: center;
}
.pagination ul {
    display: inline-flex;
    gap: 4px;
    list-style: none;
}
.pagination li a, .pagination li span {
    display: inline-block;
    padding: 6px 12px;
    background: linear-gradient(180deg, #3e434c, #353a41);
    border: 1px solid #4a5058;
    border-radius: 4px;
    color: #ccc;
    font-size: 13px;
    transition: all .2s;
}
.pagination li a:hover {
    background: linear-gradient(180deg, #4e545c, #454a51);
    color: #fff;
}
.pagination li.active span {
    background: linear-gradient(180deg, #5a8ac8, #3a6aa8);
    color: #fff;
    border-color: #5a8ac8;
}
.pagination li.disabled span {
    opacity: .5;
    cursor: default;
}

/* ========== 面包屑 ========== */
.breadcrumb {
    padding: 10px 0;
    font-size: 13px;
    color: #888;
}
.breadcrumb a { color: #7ab8e8; }
.breadcrumb a:hover { text-decoration: underline; }

/* ========== 空状态 ========== */
.empty-tip {
    padding: 40px 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* ========== 单页面 ========== */
.page-container {
    max-width: 900px;
    margin: 0 auto;
}
.page-content-card {
    background: linear-gradient(180deg, #33363c, #2a2d33);
    border: 1px solid #4a5058;
    border-radius: 6px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.page-title {
    font-size: 22px;
    color: #e8e8e8;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #4a5058;
}
.page-body {
    font-size: 15px;
    color: #ccc;
    line-height: 1.9;
}
.page-body p { margin-bottom: 14px; }

/* ========== 底部 ========== */
.footer {
    width: 100%;
    background: linear-gradient(180deg, #2a2d33 0%, #1a1d23 100%);
    border-top: 2px solid #4a5058;
    margin-top: 40px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.footer-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 30px 20px 20px;
}
.footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #353a41;
}
.footer-col {
    flex: 1;
    min-width: 160px;
}
.footer-title {
    font-size: 14px;
    color: #c0c4cc;
    margin-bottom: 12px;
    font-weight: bold;
}
.footer-links li {
    padding: 4px 0;
}
.footer-links a {
    color: #888;
    font-size: 13px;
}
.footer-links a:hover { color: #7ab8e8; }
.footer-bottom {
    padding-top: 16px;
    text-align: center;
    font-size: 12px;
    color: #666;
}
.footer-copyright {
    margin-bottom: 6px;
}
.footer-icp a { color: #666; }
.footer-sep { margin: 0 6px; }

/* ========== 响应式 ========== */
@media (max-width: 1200px) {
    .nav-menu { flex-wrap: wrap; height: auto; padding: 4px 0; }
    .nav-inner { height: auto; min-height: 60px; }
    .home-layout, .list-layout, .detail-layout {
        flex-direction: column;
    }
    .home-sidebar, .list-sidebar, .detail-sidebar {
        width: 100%;
    }
    .nav-search { margin-left: 0; }
    .search-input { width: 120px; }
}
@media (max-width: 768px) {
    .main-container { padding: 0 10px; }
    .software-grid { grid-template-columns: 1fr; }
    .top-banner { flex-direction: column; }
    .nav-menu { display: none; }
    .footer-cols { flex-direction: column; gap: 20px; }
    .detail-header { flex-direction: column; }
    .detail-icon { width: 80px; height: 80px; }
    .detail-icon img { width: 60px; height: 60px; }
    .software-list-table { overflow-x: auto; }
    .software-list-table table { min-width: 600px; }
}