/*===== 总览视图样式 =====*/
.category-overview{
    padding:32px 24px;
    max-width: 1400px;          /* 统一全站容器宽度 */
    margin: 0 auto;             /* 居中 */
}
.overview-header-card{
    background:rgba(25,42,75,0.32);
    border-radius:14px;
    padding:30px;
    text-align:center;
    margin-bottom:24px;
}
.overview-header-card h2{
    color:#94c3ff;
    font-size:28px;
    margin-bottom:10px;
}
.overview-header-card p{
    color:rgba(255,255,255,0.6);
    margin-bottom:20px;
}

.quick-bar{
    background:rgba(25,42,75,0.32);
    border-radius:12px;
    padding:16px 20px;
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:20px;
}
.quick-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    flex:1;
}
.quick-tag{
    padding:6px 10px 6px 14px;
    background:rgba(255,255,255,0.08);
    border-radius:8px;
    cursor:pointer;
    transition:0.2s;
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    color:#fff;
}
.quick-tag:hover{
    background:rgba(43, 107, 255,0.4);
}
.quick-tag-name{
    pointer-events:none;
}
.quick-tag-remove{
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:14px;
    line-height:1;
    color:rgba(255,255,255,0.7);
    transition:0.2s;
}
.quick-tag-remove:hover{
    background:rgba(255,255,255,0.15);
    color:#ff6b6b;
}
.quick-empty{
    font-size:13px;
    color:rgba(255,255,255,0.45);
}
.filter-bar{
    background:rgba(25,42,75,0.32);
    border-radius:12px;
    padding:16px 20px;
    margin-bottom:30px;
}
.filter-row{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 7px;
    align-items: center;
    margin: 10px 0;
}
.filter-row > span {
    min-width: 50px;
}
.filter-btn{
    padding:7px 13px;
    min-width: 34px;
    border-radius:6px;
    border:none;
    background:rgba(255,255,255,0.07);
    color:#fff;
    cursor:pointer;
    font-size: 15px;
}
.filter-btn.active{
    background:#2b6bff;
}
.group-title{
    font-size:18px;
    margin:30px 0 18px;
    color:#b4d4ff;
}


/* ============ 和首页完全统一的卡片样式 ============ */
.card-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:24px;
}
.category-card{
    background:rgba(25, 42, 75, 0.55);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius:16px; /* 和首页卡片圆角保持一致 */
    padding:22px;
    display:flex;
    align-items:center;
    gap:16px;
    cursor:pointer;
    transition: 0.25s;
}
.category-card:hover{
    background:rgba(40,72,125,0.7);
    border-color:rgba(70, 140, 255, 0.25);
    transform: translateY(-3px);
}
.card-icon{
    width:48px;
    height:48px;
    border-radius:10px; /*首页图标方块圆角*/
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    flex-shrink: 0;
}
.card-info{
    flex:1;
}
.card-info h3{
    color:#fff;
    margin:0 0 4px;
    font-size:18px;
}
.card-info p{
    color:#b0b8d4;
    margin:0;
    font-size:14px;
}
.card-arrow{
    color:#8892b0;
    font-size:20px;
    flex-shrink: 0;
}


.cat-breadcrumb{
    color:#b4b8d1;
    margin:12px 0;
}
.cat-header{
    padding:24px;
    background:#182042;
    border-radius:12px;
    margin-bottom:16px;
}
.cat-header h1{
    margin:0 0 8px;
    color:#fff;
}
.cat-header p{
    color:#b4b8d1;
    margin:0;
}
.cat-tab-bar{
    margin-bottom:16px;
}
.tab-btn{
    padding:8px 16px;
    background:#1a2240;
    color:#fff;
    border:none;
    border-radius:6px;
    margin:0 6px 6px 0;
    cursor:pointer;
}
.tab-btn.active{
    background:#4056ff;
}
.tag{
    display:inline-block;
    background:#27325c;
    padding:3px 8px;
    border-radius:4px;
    font-size:12px;
    color:#ddd;
}
.empty-tip{
    text-align:center;
    padding:40px;
    color:#999;
}


.detail-header-card{
    display:flex;
    gap:20px;
    align-items:center;
    flex-wrap:wrap;
}
.header-icon{
    font-size:42px;
}
.count-badge{
    font-size:14px;
    background:#2b6bff;
    padding:2px 8px;
    border-radius:12px;
    margin-left:8px;
}
.header-meta{
    display:flex;
    gap:18px;
    margin-top:10px;
    font-size:14px;
    color:#b4b8d1;
}
.header-search{
    margin-left:auto;
    display:flex;
    gap:8px;
}
.header-search input{
    padding:10px 14px;
    width:260px;
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;
    color:#fff;
}
.header-search button{
    padding:0 14px;
    border-radius:8px;
    border:none;
    background:#2b6bff;
    color:white;
    cursor:pointer;
}


/* ========== 排序&视图切换栏 ========== */
.cat-sort-bar{
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:14px 0;
    margin-bottom:24px;
}
.sort-left,.view-right{
    display:flex;
    gap:10px;
}
.sort-btn,.view-btn{
    padding:7px 14px;
    border:none;
    border-radius:6px;
    background:#1a2240;
    color:#fff;
    cursor:pointer;
    transition:0.2s;
}
.sort-btn.active,.view-btn.active{
    background:#2b6bff;
}


/* ========== 网站列表：卡片网格模式(4列) ========== */
.cat-site-list.card-mode{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:22px;
    
}

/* 列表长条模式 */
.cat-site-list.list-mode{
    display:flex;
    flex-direction:column;
    gap:16px;
}


/* ========== 重写网站卡片样式，匹配效果图 ========== */
.site-card{
    background:rgba(25, 42, 75, 0.55);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    padding:24px;
    position:relative;
    transition: 0.25s;
    margin-bottom:0;
    color:#ffffff;
    display:flex;
    flex-direction:column;
    height: 100%;
}
.site-card:hover{
    background:rgba(40,72,125,0.7);
    border-color:rgba(70, 140, 255, 0.25);
    transform: translateY(-3px);
}
/* 右上角书签收藏图标 */
.card-bookmark{
    position:absolute;
    top:18px;
    right:18px;
    font-size:20px;
    color:#8892b0;
    cursor:pointer;
    transition: 0.2s;
}
.card-bookmark:hover{
    color:#ffffff;
}
.site-icon{
    width:44px;
    height:44px;
    min-height:44px;  /*新增！强制盒子永远占住44px高度*/
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:12px;
}
.site-card h3{
    margin:0 0 8px;
    font-size:17px;
}
.site-desc{
    font-size:13px;
    color:#b0b8d4;
    margin:0 0 12px;
    min-height:40px;
    line-height:1.5;
}
.site-tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
/*热度文字*/
.hot-info{
    font-size:13px;
    color:#ffd760;
    margin:0 0 14px 0;
}
/* 星级评分行 */
.site-rating-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    color:#ffcc44;
}
.visit-btn{
    padding:6px 14px;
    background:#4056ff;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    font-size:14px;
    display: inline-block;
}



/* ========== 底部提交网站横幅 ========== */
.submit-banner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(25, 42, 75, 0.55);
    border-radius:14px;
    padding:20px 24px;
    margin-top:20px;
}
.submit-banner-text{
    color:#b0b8d4;
}
.submit-banner-btn{
    padding:10px 22px;
    background:#2b6bff;
    color:white;
    border:none;
    border-radius:8px;
    font-size:15px;
    cursor:pointer;
}

/* 卡片内部主体容器，用来撑开剩余高度 */
.card-inner{
    flex-grow: 1;
    margin-bottom: 16px;
}

.detail-main-wrap{
    margin-top: 40px;
    margin-bottom: 60px;
    /* display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px; */
}

.search-box-wrap{
    display:flex;
    gap:12px;
    margin-top:16px;
}
.search-input-wrap{
    position:relative;
    flex:1;
}
.search-icon{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:#888;
}
.search-input{
    width:100%;
    padding:12px 14px 12px 40px;
    border-radius:8px;
    border:none;
    font-size:15px;
    /* background:rgba(255,255,255,0.12); */
    color:#fff;
}
.search-input::placeholder{
    color:#bbbbbb;
}
.search-btn{
    padding:0 24px;
    border-radius:8px;
    border:none;
    background:#2563eb;
    color:#fff;
    cursor:pointer;
    font-size:15px;
    white-space:nowrap;
}
.search-btn:hover{
    background:#1d4ed8;
}