*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,sans-serif;}
body{background:#fff;color:#333;}

/* ========== 顶部导航栏 ========== */
.header{
    position:fixed;top:0;left:0;right:0;height:64px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 40px;background:#fff;border-bottom:1px solid #f0f0f0;
    z-index:1000;box-shadow:0 1px 4px rgba(0,0,0,0.03);
}
.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:#222;flex-shrink:0;}
.logo-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#2ecc71;color:#fff;border-radius:50%;font-size:20px;font-weight:bold;}
.header-right{display:flex;align-items:center;gap:28px;flex:1;justify-content:flex-end;max-width:1200px;margin:0 auto;}
.search-box{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e0e0e0;border-radius:24px;padding:8px 18px;width:320px;transition:all .2s;}
.search-box:focus-within{border-color:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,0.12);}
.search-box svg{flex-shrink:0;}
.search-input{border:none;outline:none;background:transparent;font-size:14px;width:100%;color:#333;}
.search-input::placeholder{color:#bbb;}
.nav-btn{padding:4px 0;text-decoration:none;color:#555;font-size:15px;transition:color .2s;cursor:pointer;position:relative;white-space:nowrap;}
.nav-btn:hover{color:#228B22;}
.nav-btn.active{color:#228B22;font-weight:600;}
.nav-btn.active::after{content:"";position:absolute;bottom:-20px;left:0;right:0;height:3px;background:#2ecc71;border-radius:2px;}

/* ========== 布局 ========== */
.container{display:flex;min-height:calc(100vh - 64px);padding-top:64px;}
.sidebar{
    width:272px;padding:2rem 1rem 2rem 1.5rem;border-right:1px solid #eee;
    overflow-y:auto;height:calc(100vh - 64px);position:sticky;top:64px;
    background:#fff;margin-left:calc((100% - 1394px) / 2);flex-shrink:0;
}

/* ★ 主内容区：加宽 */
.main{
    flex:1;
    padding:2rem 4rem;
    overflow-y:auto;
    height:calc(100vh - 64px);
    background:#fff;
    max-width:1100px;
}

/* ========== 通知栏 ========== */
.notice-bar{margin-bottom:20px;}
.notice-text{
    display:flex;align-items:center;width:100%;height:44px;
    background:#FFF9E0;border-left:6px solid #F1C40F;
    padding:0 20px;font-size:14px;color:#333;
    box-shadow:0 1px 4px rgba(0,0,0,0.03);box-sizing:border-box;
}

/* 侧边栏内部 */
.sidebar-title{font-size:18px;font-weight:bold;margin-bottom:16px;}
.menu-group{margin-bottom:24px;}
.menu-group .menu-item{display:inline-block;margin-right:4px;}
#cateListBox .menu-item,
.menu-group > .menu-item{display:block;width:fit-content;max-width:100%;}

/* 分类/标签 */
.menu-item{
    display:inline-block;padding:6px 12px;color:#444;text-decoration:none;cursor:pointer;
    border-radius:6px;transition:all 0.22s cubic-bezier(.4,0,.2,1);position:relative;margin:2px 0;
}
.menu-item:hover{background:#e8f5e9;color:#228B22;padding-left:20px;box-shadow:0 2px 6px rgba(46,204,113,0.15);}
.menu-item.active{color:#228B22;font-weight:500;background:#e8f5e9;padding-left:20px;}
.menu-item.active::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:3px;height:18px;background:#2ecc71;border-radius:2px;}
.reset-filter-btn{margin-top:10px;padding:6px 10px;border:1px solid #228B22;background:#fff;color:#228B22;border-radius:4px;cursor:pointer;}

/* ★ 排序栏：加底部横线 */
.sort-bar{
    text-align:right;
    margin-bottom:20px;
    padding-bottom:14px;
    border-bottom:1px solid #f0f0f0;
}
.sort-bar a{color:#228B22;text-decoration:none;margin-left:8px;cursor:pointer;}
.sort-bar a.active{font-weight:bold;}

/* ★ 卡片：两列，间距稍大 */
.card-wrap{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-bottom:30px;
}
.soft-card{
    display:flex;gap:16px;padding:12px;border-radius:8px;transition:all 0.28s cubic-bezier(.4,0,.2,1);
    cursor:pointer;border:1px solid #eee;background:#fff;position:relative;overflow:visible;
}
.soft-card:hover{background-color:#fafdfb;border-color:#c8e6c9;transform:translateY(-4px);box-shadow:0 8px 24px rgba(46,204,113,0.15);}
.soft-card img{width:120px;height:120px;object-fit:cover;border-radius:6px;background:#f5f5f5;flex-shrink:0;transition:transform 0.35s cubic-bezier(.4,0,.2,1);}
.soft-card:hover img{transform:rotate(6deg) scale(1.04);box-shadow:0 4px 12px rgba(0,0,0,0.12);}
.soft-name{font-size:17px;margin-bottom:6px;font-weight:500;}
.soft-info-grid{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;margin-bottom:6px;}
.soft-info-grid .info-item{font-size:13px;color:#666;display:flex;gap:4px;align-items:baseline;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.soft-info-grid .info-item .label{color:#999;flex-shrink:0;}
.soft-info-grid .info-item .value{color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.soft-info-grid .info-item.highlight .value{color:#228B22;}

/* 标签 */
.tag-wrap{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.tag-badge{display:inline-block;padding:1px 6px;font-size:12px;border-radius:3px;background:#e8f5e9;color:#2e7d32;}
.tag-badge.free{background:#fff3e0;color:#e65100;}
.tag-badge.open{background:#e3f2fd;color:#1565c0;}
.tag-badge.green{background:#fce4ec;color:#ad1457;}
.tag-badge.cn{background:#f3e5f5;color:#6a1b9a;}

.empty-tip{text-align:center;padding:60px 20px;color:#888;font-size:16px;}
.pagination{display:flex;gap:8px;justify-content:center;}
.page-btn{padding:6px 12px;border:1px solid #ddd;background:#fff;border-radius:4px;cursor:pointer;}
.page-btn.active{background:#228B22;color:#fff;border-color:#228B22;}
.page-btn.disabled{color:#aaa;cursor:not-allowed;}

/* ========== 弹窗 ========== */
.modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:999;backdrop-filter:blur(4px);}
.modal-box{background:#fff;width:600px;border-radius:12px;padding:0;max-height:90vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.2);}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #f0f0f0;}
.modal-title{font-size:18px;font-weight:600;color:#333;}
.modal-close{cursor:pointer;font-size:24px;color:#999;transition:color .2s;}
.modal-close:hover{color:#dc2626;}
.modal-hero{display:flex;align-items:flex-start;gap:16px;padding:24px;background:#f9fafb;border-bottom:1px solid #f0f0f0;position:relative;}
.modal-hero > img{width:90px;height:90px;object-fit:cover;border-radius:12px;border:1px solid #eee;background:#fff;flex-shrink:0;}
.modal-hero-info{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;}

/* 弹窗 Hero 信息网格：2 列 */
.modal-hero-info .meta{
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px 16px;
    font-size: 13px;
    color: #666;
    justify-content: flex-start;
    margin-bottom: 8px;
}
.modal-hero-info .meta span{
    background: #eef2f7;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

/* 评分行 */
.modal-hero-info .meta-score{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #666;
    line-height: 1.2;
    white-space: nowrap;
}
.modal-hero-info .meta-score .score-label{
    color: #888;font-size:15px;white-space:nowrap;flex-shrink:0;
}
.modal-hero-info .meta-score .stars{
    font-size:18px;letter-spacing:1px;line-height:1;
    display:inline-flex;align-items:center;flex-shrink:0;
}
.modal-hero-info .meta-score .stars-full{color:#FFB800;}
.modal-hero-info .meta-score .stars-empty{color:#ddd;}
.modal-hero-info .meta-score .score-num{
    color:#228B22;font-weight:700;font-size:16px;
    white-space:nowrap;flex-shrink:0;
}

/* 安全无毒图片：绝对定位居中 */
.modal-hero-safe{
    position:absolute;
    top:50%;
    left:62%;
    transform:translateY(-50%);
    z-index:2;
    pointer-events:none;
}
.modal-hero-safe img{
    width:80px;
    height:80px;
    object-fit:contain;
    display:block;
}

/* 客服二维码：固定占位 */
.modal-hero-qr{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-left:20px;
    padding-right:8px;
    border-left:1px dashed #e0e0e0;
    flex-shrink:0;
    width:118px;
    min-height:110px;
    box-sizing:border-box;
    position:relative;
    z-index:3;
}
.modal-hero-qr img{
    width:90px;height:90px;object-fit:contain;border-radius:6px;border:1px solid #eee;
    background:#fff;transition:all 0.3s ease;cursor:pointer;
    position:relative;z-index:1;
}
.modal-hero-qr img:hover{
    transform:scale(2.2);transform-origin:top right;
    box-shadow:0 8px 24px rgba(0,0,0,0.2);border-color:#2ecc71;
    z-index:999;position:relative;
}
.modal-hero-qr span{font-size:12px;color:#888;margin-top:4px;white-space:nowrap;}
.modal-hero-qr-placeholder{width:90px;height:90px;}

/* 弹窗其他区块 */
.modal-section{margin:0 24px 20px;}
.modal-section-title{margin-bottom:10px;font-size:15px;color:#333;font-weight:600;display:flex;align-items:center;gap:6px;}
.modal-section-title::before{content:"";display:inline-block;width:4px;height:16px;background:#228B22;border-radius:2px;}
.modal-desc{line-height:1.8;color:#555;font-size:14px;background:#fdfdfd;padding:12px;border-radius:8px;border:1px solid #f0f0f0;}
.download-group{display:flex;flex-wrap:wrap;gap:12px;}
.download-btn{padding:10px 20px;border-radius:30px;border:none;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;box-shadow:0 2px 6px rgba(0,0,0,.1);}
.download-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.15);}
.download-btn.baidu{background:#2982ff;color:#fff;}
.download-btn.kuake{background:#ff7d00;color:#fff;}
.download-btn.xunlei{background:#00b42a;color:#fff;}
.download-btn:disabled{background:#e0e0e0!important;color:#999!important;cursor:not-allowed;box-shadow:none;}
.history-ver{padding-top:16px;border-top:1px solid #eee;}
.history-item{padding:6px 0;color:#555;font-size:14px;display:flex;gap:8px;}
.history-item::before{content:"•";color:#228B22;font-weight:bold;}

/* 弹窗广告位 */
.modal-ad-box{
    width:100%;height:110px;
    background:#fdfdfd;border:1px solid #f0f0f0;border-radius:8px;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;padding:6px;box-sizing:border-box;margin:20px 0;
}
.modal-ad-box img{
    max-width:100%;max-height:100%;width:auto;height:auto;
    object-fit:contain;display:block;border-radius:4px;
}

/* ========== 响应式 ========== */
@media (max-width:1393px){
    .sidebar{margin-left:0;}
    .main{padding:2rem 3rem;}
}
@media (max-width:959px){
    .sidebar{margin-left:0;}
    .main{padding:2rem;}
    .header{padding:0 16px;height:56px;}
    .header-right{gap:14px;}
    .search-box{width:200px;padding:6px 12px;}
    .nav-btn{font-size:13px;}
    .nav-btn:nth-child(n+4){display:none;}
    .container{padding-top:56px;}
    .sidebar,.main{height:auto;position:static;}
    .sidebar{width:100%;border-right:none;border-bottom:1px solid #eee;padding:1rem 1.5rem;}
    .notice-text{font-size:13px;padding:0 14px;}
}
@media (max-width:719px){
    .main{padding:1.5rem;}
    .card-wrap{grid-template-columns:1fr;}
    .modal-box{width:95%;}
    .modal-hero{flex-wrap:wrap;}
    .modal-hero-qr{border-left:none;border-top:1px dashed #e0e0e0;padding-left:0;padding-top:12px;width:100%;margin-top:12px;min-height:auto;}
    .modal-hero-safe{position:static;transform:none;margin-top:8px;}
    .notice-text{font-size:12px;padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:44px;}
}
@media (max-width:419px){
    .main{padding:1.5rem;}
    .search-box{width:140px;}
}

/* 移动端菜单按钮 */
.menu-toggle{display:none;width:36px;height:36px;border:none;background:transparent;font-size:22px;color:#333;cursor:pointer;border-radius:6px;transition:background 0.2s;}
.menu-toggle:hover{background:#f0f0f0;}
.menu-mask{display:none;position:fixed;top:56px;left:0;width:100%;height:calc(100vh - 56px);background:rgba(0,0,0,0.4);z-index:998;}
.menu-mask.show{display:block;}
@media (max-width:959px){
    .menu-toggle{display:inline-flex;align-items:center;justify-content:center;}
    .sidebar{position:fixed;top:56px;left:-300px;width:280px;height:calc(100vh - 56px);background:#fff;z-index:999;transition:left 0.3s ease;border-right:1px solid #eee;box-shadow:2px 0 12px rgba(0,0,0,0.08);padding:1.5rem 1.2rem;overflow-y:auto;}
    .sidebar.open{left:0;}
    .main{width:100%;max-width:none;padding:1.2rem;margin-left:0;}
    .container{flex-direction:column;padding-top:56px;}
    .sort-bar{text-align:left;display:flex;flex-wrap:wrap;gap:8px;font-size:13px;margin-bottom:16px;}
    .sort-bar a{margin-left:0;}
    .card-wrap{grid-template-columns:1fr;gap:12px;}
    .header{padding:0 12px;height:56px;}
    .header-right{gap:12px;}
    .search-box{width:auto;flex:1;max-width:180px;padding:6px 12px;}
    .nav-btn{font-size:13px;}
    .nav-btn:nth-child(n+3){display:none;}
}
@media (max-width:419px){
    .main{padding:1rem;}
    .logo{font-size:16px;}
    .logo-icon{width:32px;height:32px;font-size:18px;}
    .search-box{max-width:130px;}
    .modal-box{width:95%;}
}