/* 完全按照文档第32行的压缩CSS实现 */

.app-article-top .item-thumbnail img{width:100px !important;height:100px !important}.app-article-top{padding:30px 0}.app-article-right{display:flex;flex-direction:row;padding-top:35px;color:#b1b1b1 !important}.dark-theme .app-article-right{color:#636469 !important}.app-article-right .the-app-style{padding:0 35px;text-align:center;line-height:1.5;display:flex;flex-direction:column;justify-content:center;position:relative}.app-article-right .the-app-style:after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:35px;background:#ddd}.app-article-right .the-app-style:last-child:after{display:none}.app-article-right .the-app-style:last-child{border:0;padding-right:0}.app-article-right .the-app-style span{display:block}.app-article-left{display:flex;height:100px}.app-article-left .mr10{width:100px}.article-header .article-title{font-size:24px}.sub-article-title{font-size:16px;margin:0}.app-article-left .the-title{display:flex;flex-direction:column}.app-article-left .the-title h3{margin:0}.app-article-left .item-thumbnail img{position:inherit}.site-apps-block img{width:36px;height:36px}.align-items-center{align-items:center !important}.d-flex{display:flex !important}.text-md{font-size:16px;font-weight:bold;margin:0}.ms-2{margin-left:10px !important}.card-body{padding:10px 0 0 0}.site-apps-block .zib-widget{padding-bottom:0}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.site-apps-block .col-md-6:first-child .card-header h2:before{content:"\f144";font-family:"Font Awesome 6 Free";font-weight:400;animation:rotate 2s linear infinite;display:inline-block}.site-apps-block .col-md-6:nth-child(2) .card-header h2:before{content:"\f14e";font-family:"Font Awesome 6 Free";font-weight:400;animation:rotate 2s linear infinite;display:inline-block}.col-2{flex:0 0 auto;width:16.66666667%;padding:0}.mx_row{display:flex;flex-wrap:wrap}.site-apps-block .card{border:2px solid #fff;border-radius:12px;background-image:linear-gradient(0deg,#fff,#f4f4f5);padding:25px 25px 0 25px;margin-bottom:25px}.site-apps-block .col-md-6:first-child{padding-left:0}.site-apps-block .col-md-6:nth-child(2){padding-right:0}@media screen and (max-width:860px){.posts-item .item-tags a:nth-child(2){display:none}.site-apps-block .container{width:100%}.site-apps-block .col-md-6:first-child{padding-right:0}.site-apps-block .col-md-6:nth-child(2){padding-left:0}}@media screen and (max-width:480px){.app-article-right .the-app-style{padding:0 10px}.app-article-left .mr10{width:100%}.app-article-left{display:block;height:auto;text-align:center;width:100%}.app-article-right{justify-content:center;align-items:center;width:100%}.site-apps-block img{width:32px;height:32px}.site-apps-block .card{padding:15px 15px 0 15px}.site-apps-block .card h5{font-size:12px;line-height:1.4}.site-apps-block .col-md-6:first-child{padding:0 10px}.site-apps-block .col-md-6:nth-child(2){padding:0 10px}body.nav-fixed .slide-header{height:280px!important}.posts-item .item-tags a:nth-child(2){display:inline-block}.article-header .article-title{margin-top:10px}}.site-apps-block .card{width:100% !important}.no-meta  .relative{margin-top:20px}.no-more{clear:both}.home-app-grid  .pagenav{clear:both}@media (max-width:767px){.home-app-grid .posts-item.card{width:calc(100% - 10px);margin:5px}.app-article-left .mr10 .item-thumbnail{width:100px !important;display:inline-block}.app-article-left .mr10{text-align:center}}@media (min-width:768px){.app-article-top  .article-title{margin-top:0 !important}.app-article-top .app-article-left .the-title{margin-top:0 !important;align-items:flex-start}.home-app-grid .posts-item.card{width:calc(50% - 10px);margin:5px}.app-article-left .mr10 .item-thumbnail{width:100px !important}.apps-list .list-item{flex-shrink:0;width:100%  !important;max-width:100% !important;padding-right:calc(var(--bs-gutter-x)* .5);padding-left:calc(var(--bs-gutter-x)* .5);margin-top:var(--bs-gutter-y)}.category .home-app-grid .posts-item.card{width:calc(50% - 18px);margin:5px}}@media (min-width:1280px){.home-app-grid .posts-item.card{width:calc(25% - 16px) !important;margin:5px}body.nav-fixed .slide-header{height:450px!important}.app-article-left .mr10 .item-thumbnail{width:100px !important}.apps-list .list-item{flex:0 0 auto;width:50% !important;padding-right:5px;padding-left:5px;margin-top:var(--bs-gutter-y)}}@media (min-width:1200px){.container{width:100% !important}.main-app-container{min-width:615px;padding-bottom:20px}}

/* ===== 软件信息卡片多布局样式 ===== */

/* 基础变量 */
.software-info-card {
    --card-gap: 16px;
    --card-radius: 12px;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.08);
    --card-bg: #ffffff;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. 垂直紧凑布局 */
.software-info-card.layout-vertical-compact {
    background: var(--card-bg);
    border-radius: var(--card-radius);
    padding: var(--card-gap);
    text-align: center;
    box-shadow: var(--card-shadow);
    margin: 16px 0;
    transition: var(--transition);
}

.software-info-card.layout-vertical-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
}

.software-info-card.layout-vertical-compact .software-info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.software-info-card.layout-vertical-compact .app-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.software-info-card.layout-vertical-compact .app-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.software-info-card.layout-vertical-compact:hover .app-thumbnail {
    transform: scale(1.05);
}

.software-info-card.layout-vertical-compact .app-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.software-info-card.layout-vertical-compact .info-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
}

.software-info-card.layout-vertical-compact .download-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.software-info-card.layout-vertical-compact .download-btn {
    width: 100%;
    max-width: 200px;
}

/* 2. 水平增强布局 */
.software-info-card.layout-horizontal-enhanced {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 20px;
    margin: 20px 0;
    transition: var(--transition);
}

.software-info-card.layout-horizontal-enhanced:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.software-info-card.layout-horizontal-enhanced .software-info-content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.software-info-card.layout-horizontal-enhanced .app-thumbnail {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.software-info-card.layout-horizontal-enhanced .app-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.software-info-card.layout-horizontal-enhanced:hover .app-thumbnail {
    transform: scale(1.05);
}

.software-info-card.layout-horizontal-enhanced .app-details {
    flex: 1;
    min-width: 0;
}

.software-info-card.layout-horizontal-enhanced .app-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
}

.software-info-card.layout-horizontal-enhanced .info-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.software-info-card.layout-horizontal-enhanced .download-row {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 140px;
}

/* 3. 卡片悬浮布局 */
.software-info-card.layout-card-float {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    padding: 24px;
    margin: 24px 0;
    transition: var(--transition);
    border: 1px solid rgba(255,255,255,0.2);
    position: relative;
    overflow: hidden;
}

.software-info-card.layout-card-float::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}

.software-info-card.layout-card-float:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(0,0,0,0.15);
}

.software-info-card.layout-card-float .software-info-content {
    display: flex;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.software-info-card.layout-card-float .app-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.software-info-card.layout-card-float .app-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
}

.software-info-card.layout-card-float:hover .app-thumbnail::after {
    transform: translateX(100%);
}

.software-info-card.layout-card-float .app-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.software-info-card.layout-card-float:hover .app-thumbnail img {
    transform: scale(1.05);
}

.software-info-card.layout-card-float .app-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #333;
}

.software-info-card.layout-card-float .info-badges {
    margin: 16px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.software-info-card.layout-card-float .info-badges .but {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.software-info-card.layout-card-float .info-badges .but:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 4. 网格信息布局 */
.software-info-card.layout-info-grid {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin: 20px 0;
}

.software-info-card.layout-info-grid .software-info-content {
    display: grid;
    grid-template-areas:
        "thumb title download"
        "thumb meta download"
        "thumb badges download";
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    align-items: start;
}

.software-info-card.layout-info-grid .app-thumbnail {
    grid-area: thumb;
    width: 100px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.software-info-card.layout-info-grid .app-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.software-info-card.layout-info-grid:hover .app-thumbnail {
    transform: scale(1.05);
}

.software-info-card.layout-info-grid .app-title {
    grid-area: title;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    color: #333;
}

.software-info-card.layout-info-grid .app-meta {
    grid-area: meta;
    margin: 4px 0;
}

.software-info-card.layout-info-grid .info-badges {
    grid-area: badges;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.software-info-card.layout-info-grid .download-row {
    grid-area: download;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    min-width: 120px;
}

/* 5. 列表式布局 */
.software-info-card.layout-list-style {
    background: transparent;
    border: none;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
    padding: 20px 0;
    margin: 0;
    box-shadow: none;
    transition: var(--transition);
}

.software-info-card.layout-list-style:hover {
    background: #f8f9fa;
    border-left: 4px solid #667eea;
    padding-left: 16px;
}

.software-info-card.layout-list-style .software-info-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.software-info-card.layout-list-style .app-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    flex-shrink: 0;
    transition: var(--transition);
}

.software-info-card.layout-list-style .app-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.software-info-card.layout-list-style:hover .app-thumbnail {
    transform: scale(1.05);
}

.software-info-card.layout-list-style .app-details {
    flex: 1;
    min-width: 0;
}

.software-info-card.layout-list-style .app-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #333;
}

.software-info-card.layout-list-style .info-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.software-info-card.layout-list-style .info-badges .but {
    font-size: 11px;
    padding: 3px 8px;
}

.software-info-card.layout-list-style .download-btn {
    padding: 8px 16px;
    font-size: 13px;
    flex-shrink: 0;
}

/* 6. 仪表盘布局 */
.software-info-card.layout-dashboard {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 28px;
    color: white;
    box-shadow: 0 15px 50px rgba(102,126,234,0.3);
    margin: 24px 0;
    position: relative;
    overflow: hidden;
}

.software-info-card.layout-dashboard::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: rotate 30s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.software-info-card.layout-dashboard .software-info-content {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 20px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.software-info-card.layout-dashboard .app-thumbnail {
    width: 90px;
    height: 90px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border: 3px solid rgba(255,255,255,0.3);
    transition: var(--transition);
}

.software-info-card.layout-dashboard .app-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.software-info-card.layout-dashboard:hover .app-thumbnail {
    transform: scale(1.05);
    border-color: rgba(255,255,255,0.5);
}

.software-info-card.layout-dashboard .app-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.software-info-card.layout-dashboard .app-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.software-info-card.layout-dashboard .info-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.software-info-card.layout-dashboard .info-badges .but {
    background: rgba(255,255,255,0.25);
    color: white;
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.software-info-card.layout-dashboard .info-badges .but:hover {
    background: rgba(255,255,255,0.35);
    transform: translateY(-1px);
}

.software-info-card.layout-dashboard .download-row {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    justify-content: center;
}

.software-info-card.layout-dashboard .update-time {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

.software-info-card.layout-dashboard .download-btn {
    background: rgba(255,255,255,0.95);
    color: #667eea;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: var(--transition);
}

.software-info-card.layout-dashboard .download-btn:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .software-info-card.layout-vertical-compact .software-info-content,
    .software-info-card.layout-horizontal-enhanced .software-info-content,
    .software-info-card.layout-card-float .software-info-content,
    .software-info-card.layout-dashboard .software-info-content {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .software-info-card.layout-info-grid .software-info-content {
        grid-template-areas:
            "thumb"
            "title"
            "meta"
            "badges"
            "download";
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: center;
    }

    .software-info-card.layout-list-style .software-info-content {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .software-info-card.layout-dashboard .download-row {
        align-items: center;
        text-align: center;
    }

    .software-info-card.layout-horizontal-enhanced .download-row,
    .software-info-card.layout-info-grid .download-row {
        align-items: center;
        min-width: auto;
    }

    .software-info-card.layout-card-float .app-thumbnail,
    .software-info-card.layout-horizontal-enhanced .app-thumbnail {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    .software-info-card.layout-dashboard .app-thumbnail {
        width: 70px;
        height: 70px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .software-info-card {
        --card-gap: 12px;
    }

    .software-info-card.layout-vertical-compact,
    .software-info-card.layout-horizontal-enhanced,
    .software-info-card.layout-card-float,
    .software-info-card.layout-info-grid,
    .software-info-card.layout-dashboard {
        padding: 16px;
        margin: 12px 0;
    }

    .software-info-card.layout-vertical-compact .app-thumbnail,
    .software-info-card.layout-horizontal-enhanced .app-thumbnail,
    .software-info-card.layout-info-grid .app-thumbnail {
        width: 60px;
        height: 60px;
    }

    .software-info-card.layout-card-float .app-thumbnail,
    .software-info-card.layout-dashboard .app-thumbnail {
        width: 50px;
        height: 50px;
    }

    .software-info-card.layout-vertical-compact .app-title,
    .software-info-card.layout-horizontal-enhanced .app-title,
    .software-info-card.layout-info-grid .app-title {
        font-size: 16px;
    }

    .software-info-card.layout-card-float .app-title {
        font-size: 18px;
    }

    .software-info-card.layout-dashboard .app-title {
        font-size: 20px;
    }
}