*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: system-ui, sans-serif;
}
body{
    background:#ffffff;
    color:#222;
}
:root{
    --main-color:#FF2442; /* 选定主题淡红色 */
}
.container{
    max-width: min(96%, 2200px);
    margin:0 auto;
    display:flex;
    gap:20px;
    padding:15px;
    align-items:flex-start; /* 修复：防止main-content被stretch到sidebar高度，导致窗口无滚动条 */
}

/* 左侧侧边栏 固定跟随滚动 */
.sidebar{
    width:200px;
    flex-shrink:0;
    position:sticky;
    top:15px;
    height:calc(100vh - 30px);
    overflow-y:auto;
    padding-bottom:20px;
}
.logo-box{
    margin-bottom:15px;
}
.site-logo{
    width:100%;
    display:block;
    border-radius:8px;
}
.nav-menu a{
    display:block;
    padding:10px 12px;
    text-decoration:none;
    color:#333;
    border-radius:6px;
    margin-bottom:4px;
}
.nav-menu a.active{
    background:var(--main-color);
    color:#fff;
}

/* 侧边广告位 加大与导航距离 */
.side-ad{
    border:1px dashed #ccc;
    padding:30px 10px;
    text-align:center;
    margin:35px 0;
    border-radius:8px;
    color:#888;
}
.sidebar-footer{
    margin-top:10px;
    font-size:13px;
    color:#666;
}
.friend-link h4{
    margin-bottom:8px;
}
.friend-link a{
    display:inline-block;
    margin:4px;
    color:#0066cc;
}

/* 主内容区域 */
.main-content{
    flex:1;
}
.top-search-bar{
    margin-bottom:16px;
}
.search-wrap {
    display: flex;
    gap: 8px;
    margin-bottom:10px;
    justify-content: center; /* 整行搜索框居中 */
}
.search-input-box {
    position:relative;
    width: min(100%, 620px); /* 横向缩短，最大宽度620px，可自行调整数值 */
}
#searchInput {
    width:100%;
    padding:10px 90px 10px 14px; /* 右侧留出按钮空间 */
    border:1px solid #ddd;
    border-radius:6px;
    font-size:15px;
}
.search-clear {
    position:absolute;
    right:70px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    text-align:center;
    line-height:20px;
    border-radius:50%;
    background:#ddd;
    cursor:pointer;
    color:#333;
    font-size:14px;
    display:none;
    z-index:2;
}
#searchBtn {
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    padding:6px 16px;
    background:var(--main-color);
    color:#fff;
    border:none;
    border-radius:6px;
    cursor:pointer;
}
.top-ad{
    padding:8px;
    background:#f6f6f6;
    text-align:center;
    font-size:13px;
    color:#777;
    border-radius:6px;
    margin-bottom:12px;
}
.filter-bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
    margin-bottom:15px;
}
.sort-item{
    padding:4px 10px;
    text-decoration:none;
    color:#444;
    border-radius:4px;
}
.sort-item.active{
    background:var(--main-color);
    color:#fff;
}

/* 瀑布流布局 - PC端5列 */
.waterfall{
    column-count:5;
    column-gap:16px;
}
.wall-item{
    break-inside:avoid;
    margin-bottom:16px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid #eee;
    cursor:pointer;
    transition: all 0.24s ease;
}
.wall-item img{
    width:100%;
    display:block;
    object-fit:cover;
    background:#f3f3f3;
    transition: filter 0.24s ease;
}
.wall-item h4{
    padding:8px 10px;
    font-size:14px;
    font-weight:normal;
}
/* 悬停变暗效果 */
.wall-item:hover img {
    filter: brightness(0.75);
}
.wall-item:hover {
    transform: translateY(-3px);
}
.loading-tip{
    text-align:center;
    padding:20px;
    color:#888;
    min-height:60px; /* 始终占位，作为无限滚动的哨兵元素 */
}

/* 视频弹窗 */
.video-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999;
    padding:20px;
    display:none;
}
.modal-inner{
    background:#fff;
    border-radius:10px;
    max-width:900px;
    width:100%;
    padding:20px;
    position:relative;
}
.modal-close{
    position:absolute;
    right:15px;
    top:12px;
    font-size:28px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:10;
}
#modalVideo{
    width:100%;
    margin:12px 0;
    background:#000;
}
.download-btn{
    display:inline-block;
    padding:9px 22px;
    background:var(--main-color);
    color:#fff;
    text-decoration:none;
    border-radius:6px;
}

/* 回到顶部悬浮按钮 */
.back-top{
    position:fixed;
    right:25px;
    bottom:25px;
    width:44px;
    height:44px;
    border-radius:50%;
    border:none;
    background:var(--main-color);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    display:none;
    z-index:99;
}

/* ========== 移动端自适应 ========== */
@media screen and (max-width:1200px){
    .waterfall{column-count:4;}
}
@media screen and (max-width:960px){
    .container{flex-direction:column;}
    .sidebar{
        width:100%;
        position:static;
        height:auto;
    }
    .waterfall{column-count:3;}
}
@media screen and (max-width:640px){
    .waterfall{column-count:2;}
}
@media screen and (max-width:420px){
    .waterfall{column-count:1;}
}

/* Logo固定尺寸、居中、防止溢出，方便后续替换图片 */
.logo-box a {
    display: block;
    width: 100%;
}
.site-logo {
    width: 100%;
    height: 80px;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

.logo-box a:hover .site-logo {
    opacity: 0.92;
    transition: opacity 0.2s ease;
}

/* 导航栏字体加粗 */
.nav-menu a {
    font-weight: 600 !important;
}
/* 排序文字整体加粗：排序：、最新、热门 */
.sort-box {
    font-weight: 600;
}
.sort-item {
    font-weight: 600;
}

.sidebar {
    display: flex;
    flex-direction: column;
}
.sidebar > div:not(.sidebar-footer) {
    flex-shrink: 0;
}
.sidebar-footer {
    margin-top: auto !important;
    padding-top: 20px;
}

/* 导航字体居中 */
.nav-menu a {
    text-align: center !important;
}

/* 友情链接优化，去除刺眼蓝色 */
.friend-link a {
    color: #444 !important;
    transition: color 0.2s ease;
}
.friend-link a:hover {
    color: var(--main-color) !important;
}

/* 瀑布流缩略图渐入缩放动画 */
@keyframes wallFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.wall-item {
    animation: wallFadeIn 0.35s ease-out forwards;
}
.wall-item {
    backface-visibility: hidden;
}

/* 修复竖视频弹窗过大，限制视频最大高度，保证关闭、下载按钮可见 */
.modal-inner {
    max-height: 88vh;
    overflow-y: auto;
}
#modalVideo {
    max-height: 65vh;
    width: 100%;
    object-fit: contain;
}

/* 关于我们 */
.nav-custom-link{
    display:block;
    padding:10px 12px;
    text-decoration:none;
    color:#333;
    border-radius:6px;
    margin-bottom:4px;
    margin-top:4px;
    text-align:center !important;
    font-weight:600 !important;
}
.nav-custom-link:hover{
    background:#f2f2f2;
}