/* --- 整体背景设置 --- */
body {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: 'Roboto', sans-serif !important;
    background-color: #767676; /* 基础底色 */
    margin: 0;
    min-height: 100vh;
}

/* 模拟原站的固定纹理背景 */
@media (min-width: 992px) {
    body::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        /* 直接引用原站纹理（如果你想本地化可以下载后替换路径） */
        background-image: url(https://cdn.staticstack.net/includes/images/patterns/pattern-light.png);
        background-position: 0 100%;
        background-size: 600px 549px;
        background-repeat: repeat;
        opacity: 0.8; /* 调整纹理深浅 */
    }
}

/* --- 矩形模块容器 --- */
.container {
    max-width: 1150px;
    margin: 40px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 矩形间的空隙 */
    justify-content: center;
}

/* --- 精准复刻的矩形模块 --- */
.category-block {
    background: #ffffff;
    width: 280px;  /* 你量的宽度 */
    height: 430px; /* 你量的高度 */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    /* 解决笔画细的问题 */
    -webkit-font-smoothing: antialiased;
}

/* 标题头部样式 */
.category-header {
    height: 47px;
    background-color: #338cab; /* 默认主色 */
    color: #fff;
    text-align: center;
    line-height: 47px;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
}

/* 标题栏底部的双层装饰线 (原站灵魂) */
.category-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55px;
    height: 3px;
    background-color: #338cab; /* 亮色线 */
    border-top: 3px solid #e5e5e5; /* 灰色底线 */
}

/* 内部滚动列表区 */
.category-wrapper {
    flex: 1;
    overflow-y: auto; /* 内容多了自动出滚动条 */
    padding: 10px;
}

/* 自定义滚动条 (扒下来的样式) */
.category-wrapper::-webkit-scrollbar {
    width: 4px;
}
.category-wrapper::-webkit-scrollbar-thumb {
    background-color: #96979f;
    border-radius: 2px;
}

/* --- 矩形模块布局调整 --- */

.container {
    display: flex;
    flex-wrap: wrap;
    /* 两个矩形间隔缩小到 4px */
    gap: 6px; 
    justify-content: center;
    padding: 40px; /* 外部留白稍微缩小，保持紧凑 */
}

.custom-card {
    width: 280px;
    height: 430px;
    background-color: #ffffff;
    /* 边框加粗到 2px，颜色依然使用灰绿，但视觉上会厚实很多 */
    border: 2px solid #8da399; 
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.2s ease;
    /* 抵消加粗边框带来的像素偏差 */
    box-sizing: border-box; 
}

/* 标题栏：60px 高度，背景纯白 */
.card-header {
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    background-color: #ffffff;
    position: relative;
}

/* 标题文字 */
.card-header a {
    color: #000000;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    transition: color 0.3s ease;
    z-index: 2;
}

/* 使用更具体的类名确保覆盖掉任何残留样式 */
.custom-card .card-header::after {
    content: '';
    display: block;
    margin: 6px auto 0; /* 自动居中 */
    
    /* 1. 设定固定物理宽度 */
    width: calc(100% - 20px) !important; 
    height: 3px !important;
    background-color: #8da399 !important;
    border-radius: 2px !important;

    /* 2. 初始状态：缩放到中间的一个点/短线 */
    transform: scaleX(0.2) !important;
    transform-origin: center center !important;

    /* 3. 极致平滑曲线 + 长时间 + 强制执行 */
    /* 我们用 linear-transition 的高级贝塞尔版，确保每一秒都在匀速生长 */
    transition: transform 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) !important;
    
    will-change: transform;
}

/* --- 鼠标移动到“矩形”上时的交互 --- */

/* 1. 标题文字变橙色 */
.custom-card:hover .card-header a {
  transform: scaleX(1) !important;
    /* 取消延迟，鼠标一放上去立刻开始动 */
    transition-delay: 0s !important;
}

/* 悬停触发 */
.custom-card:hover .card-header::after {
    transform: scaleX(1) !important;
    /* 增加一个 0.1s 的极短延迟，防止鼠标划过时误触 */
    transition-delay: 0.1s !important; 
}
/* 鼠标移开时（恢复状态）：缩短恢复时间，避免移开后线条还在慢慢动 */
.card-header::after {
    transition: transform 0.8s ease-out; 
}

/* 中间网址区域 */
.card-body {
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* 底部容器：现在它是透明的，用来定位内部的按钮 */
.card-footer {
    height: 50px;
    background-color: transparent; /* 去掉背景色 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px; /* 让按钮左右离边框有一点距离，更好看 */
    margin-bottom: 4px; /* 距离大矩形底部 4px */
    border-top: none; /* 去掉顶部分割线，让按钮更独立 */
}

.card-footer a {
    color: #ffffff;
    background-color: #8da399; /* 灰绿色移到这里 */
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    
    /* 变成独立的小矩形 */
    width: 100%;
    height: 36px; /* 按钮自身高度，略小于父容器 */
    border-radius: 8px; /* 四个角都有圆角 */
    
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* 鼠标悬停在按钮上的效果 */
.card-footer a:hover {
    background-color: #7a8e85; /* 颜色加深一点 */
    transform: translateY(-1px); /* 轻微上浮感 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 列表容器 */
.site-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: site-counter;
}

.site-list li {
    position: relative; /* 为放大镜的 absolute 定位提供参考 */
    margin-bottom: 6px;
}

.site-list li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    padding-right: 40px; /* 给右侧放大镜留出固定空间 */
    background: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

/* 左侧数字 */
.site-list li a::before {
    counter-increment: site-counter;
    content: counter(site-counter);
    font-size: 12px;
    font-weight: bold;
    color: #8da399;
    margin-right: 2px; /* 2px 间距 */
    min-width: 18px;
}

/* 网站名字 */
.site-list li a strong {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

/* 放大镜符号 (基于你提供的代码) */
.site-list li .review {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%) scale(.889);
    display: none; /* 默认隐藏 */
    width: 18px;
    height: 18px;
    /* 重点：使用原站的橙色放大镜 SVG */
    background: url(https://cdn.staticstack.net/includes/images/icons/others/icon-search.svg) 50% 50% no-repeat;
    background-size: contain;
    pointer-events: none; /* 防止图标干扰点击 */
}

/* --- 交互逻辑 --- */

/* 1. 悬停时整体变色 */
.site-list li a:hover {
    border-color: #8da399;
    background: #fff;
}
.site-list li a:hover strong {
    color: #ff8c00;
}

/* 2. 悬停时显示放大镜 (响应式逻辑) */
@media screen and (min-width: 1025px) {
    .site-list li:hover .review {
        display: block;
        animation: fadeEffect .2s;
    }
}

/* 渐显动画 */
@keyframes fadeEffect {
    from { opacity: 0; }
    to { opacity: 1; }
}