/* ==================== 基础模块样式（module）=================== */
.module { 
    margin-bottom: 15px; 
    background: #fff; 
    border-radius: 5px; 
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); 
}
/* 清除浮动 */
.module .bd { zoom: 1; }
.module .bd:before, .module .bd:after { 
    content: ""; 
    display: table; 
}
.module .bd:after { 
    clear: both; 
    overflow: hidden; 
}

/* ==================== 面板模块样式（mod-panel）=================== */
.mod-panel { padding-top: 15px; }
/* 面板头部 */
.mod-panel .hd { 
    margin-bottom: 10px; 
    text-align: center; 
}
.mod-panel .hd h1 { 
    line-height: 32px; 
    font-weight: bold; 
    font-size: 18px; 
    color: #333; 
}
.mod-panel .hd p { 
    line-height: 24px; 
    font-size: 15px; 
    color: #666; 
}
/* 面板主体与底部 */
.mod-panel .bd,
.mod-panel .ft { 
    padding: 0 8px 20px; 
}

/* ==================== 盒子样式（box）=================== */
.mod-panel .box { 
    float: left; 
    width: 50%; 
    margin-bottom: 15px; 
}
.mod-panel .box .c-hd { 
    line-height: 30px; 
    text-align: center; 
}
.mod-panel .box .c-hd h3 { font-size: 18px; }
.mod-panel .box .c-hd p { margin-bottom: 10px; }
.mod-panel .box .c-bd { margin: 0 8px; }

/* ==================== 表格样式（table）=================== */
.mod-panel .box table { 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0; 
    border: 1px solid #dbdbdb; 
}
.mod-panel .box table thead { background: #f5f5f5; }
.mod-panel .box table th,
.mod-panel .box table td { 
    max-width: 210px; 
    padding: 5px 8px; 
    border: 1px solid #dbdbdb; 
    line-height: 24px; 
    text-align: center; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    color: #666; 
}
.mod-panel .box table th span,
.mod-panel .box table th a,
.mod-panel .box table td span,
.mod-panel .box table td a { margin: 0 5px; }
.mod-panel .box table th a,
.mod-panel .box table td a { 
    color: #0081c2; 
    transition: color 0.3s ease; 
}
.mod-panel .box table th a:hover,
.mod-panel .box table td a:hover { 
    color: #0073b7; 
    text-decoration: underline; 
}
.mod-panel .box table th .gray,
.mod-panel .box table td .gray { color: #999; }

/* ==================== 结果与空状态样式 ==================== */
.mod-panel .result { overflow: hidden; }
.mod-panel .none { 
    padding: 35px 0; 
    line-height: 30px; 
    text-align: center; 
    color: #666; 
}
.mod-panel .none .text-red { 
    font-size: 15px; 
    color: #fc0000; 
}

/* ==================== 搜索框样式（mod-panel内）=================== */
.mod-panel .search { 
    position: relative; 
    height: 42px; 
    background: #f8f8f8; 
    border-radius: 21px; 
    overflow: hidden; 
}
.mod-panel .search .clear { 
    display: none; 
    position: absolute; 
    top: 5px; 
    right: 90px; 
    width: 32px; 
    height: 32px; 
    line-height: 32px; 
    text-align: center; 
    vertical-align: middle; 
}
.mod-panel .search .clear span { 
    display: inline-block; 
    width: 24px; 
    height: 24px; 
    background: #dbdbdb; 
    line-height: 24px; 
    text-align: center; 
    font-size: 14px; 
    border-radius: 50%; 
    color: #333; 
}
.mod-panel .search .input-text { 
    width: 100%; 
    height: 42px; 
    padding: 9px 136px 9px 16px; 
    margin-right: -120px; 
    border: none; 
    background: none; 
    line-height: 24px; 
    vertical-align: middle; 
    font-size: 16px; 
    outline: none; 
    box-sizing: border-box; 
}
.mod-panel .search .button { 
    float: right; 
    position: relative; 
    z-index: 9; 
    width: 120px; 
    height: 42px; 
    padding: 0; 
    margin: 0; 
    background: #ff7500; 
    border: none; 
    line-height: 42px; 
    vertical-align: middle; 
    font-size: 16px; 
    color: #fff; 
    border-radius: 0; 
    outline: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
}
.mod-panel .search .button:hover { background: #e06a00; }

/* ==================== 列表模块样式（mod-list）=================== */
.mod-list .hd { 
    width: 320px; 
    height: 30px; 
    margin: 0 auto 25px; 
    border-bottom: 2px solid #e4e4e4; 
    line-height: 30px; 
    text-align: center; 
}
.mod-list .hd h3 { font-size: 20px; }
.mod-list .hd h3 span { 
    position: relative; 
    bottom: -15px; 
    padding: 0 30px; 
    background: #fff; 
    color: #333; 
    font-weight: bold; 
}
.mod-list .bd { 
    margin: 0 15px; 
    padding-bottom: 20px; 
}
.mod-list .bd ul { overflow: hidden; }
.mod-list .bd li { 
    position: relative; 
    bottom: -1px; 
    border-bottom: 1px dotted #dbdbdb; 
    overflow: hidden; 
}
.mod-list .bd a { 
    display: block; 
    padding: 5px 15px; 
    line-height: 28px; 
    text-align: center; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    color: #666; 
    transition: all 0.3s ease; 
}
.mod-list .bd a:hover { 
    background: #f8f8f8; 
    color: #0081c2; 
    text-decoration: none; 
}

/* ==================== 段落基础样式（p）=================== */
p { 
    font-family: Arial, sans-serif; 
    font-size: 16px; 
    line-height: 1.5; 
    color: #333; 
    margin-bottom: 20px; 
    text-align: justify; 
}

/* ==================== 特殊段落样式（highlight）=================== */
.highlight { 
    background-color: #FFF; 
    padding: 10px; 
    border-left: 3px solid #e6f4ff; /* 浅蓝色左侧边框，区分普通段落 */
    margin-bottom: 8px; /* 缩小段落间距，更紧凑 */
    border-radius: 3px; /* 轻微圆角，更美观 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* 轻微阴影，增强层次感 */
}
.highlight2 { 
    background-color: #ffffcc; 
    padding: 10px; 
    border-left: 3px solid #ffcc00; 
    border-radius: 3px; 
}

/* ==================== 行内段落样式（inline-paragraph）=================== */
.inline-paragraph { 
    display: inline; 
    margin-right: 15px; 
}

/* ==================== 页面加载动画样式（#loading）=================== */
#loading { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255, 255, 255, 0.8); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index: 9999; /* 最高层级，覆盖所有内容 */
}
.spinner { 
    width: 50px; 
    height: 50px; 
    border: 5px solid #f3f3f3; 
    border-top: 5px solid #3498db; 
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
    will-change: transform; /* 优化动画性能 */
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* ==================== 特殊链接样式（special-link）=================== */
a.special-link { 
    display: inline-block; 
    padding: 4px 16px; 
    border: 2px solid #6495ED; 
    border-radius: 50px; 
    background-color: #6495ED; 
    color: white; 
    text-decoration: none; 
    transition: all 0.3s ease; 
    line-height: 1; 
    font-size: 14px; 
    font-weight: 500; 
}
a.special-link:hover { 
    background-color: #4876FF; 
    border-color: #4876FF; 
    color: #fff; 
    text-decoration: none; 
    transform: translateY(-2px); /* 轻微上浮，增强交互感 */
    box-shadow: 0 4px 8px rgba(72, 118, 255, 0.2); 
}

/* ==================== 关键词标签样式（tag）=================== */
.tag { 
    display: inline-block; 
    margin: 0 8px 10px 0; 
    padding: 5px 14px; 
    background-color: #f0f7ff; 
    color: #1890ff; 
    border-radius: 20px; 
    font-size: 14px; 
    line-height: 1.4; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1); 
    text-decoration: none; 
}
.tag:hover { 
    background-color: #1890ff; 
    color: #fff; 
    text-decoration: none; 
    box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2); 
    transform: translateY(-2px); /* 上浮效果，增强交互 */
}

/* ==================== 信息与截图布局样式（核心）=================== */
.info-screenshot-container { 
    display: flex; 
    gap: 25px; 
    align-items: flex-start; 
    margin: 15px 0 25px; 
    padding: 10px; 
}
.info-list { flex: 1; /* 左侧信息占满剩余空间 */ }
.screenshot-wrapper { 
    flex: 0 0 320px; /* 桌面端截图固定宽度，不缩放 */
    position: relative; 
    height: 280px; /* 固定高度，避免布局跳动 */
    border-radius: 8px; 
    overflow: hidden; 
}
/* 截图图片样式 */
.site-screenshot { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* 保持图片比例，填充容器 */
    border: 3px solid #e6f4ff; /* 浅蓝色美化边框 */
    border-radius: 10px; 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); 
    transition: all 0.3s ease; 
    display: none; /* 初始隐藏，加载成功后显示 */
}
.site-screenshot:hover { 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); 
    transform: scale(1.02); /* 轻微放大，增强交互 */
}
/* 截图加载失败/等待提示样式 */
.screenshot-fallback { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    height: 100%; 
    border: 3px dashed #e6f4ff; /* 虚线边框，区分加载状态 */
    border-radius: 10px; 
    background-color: #f9fcff; /* 淡蓝色背景，与边框呼应 */
    color: #666; 
    font-size: 14px; 
    text-align: center; 
    padding: 0 10px; 
    transition: all 0.3s ease; 
}
.screenshot-fallback:hover { 
    background-color: #f0f7ff; 
    color: #1890ff; 
}

/* ==================== 移动端响应式样式（屏幕<800px）=================== */
@media screen and (max-width: 800px) {
    .module { 
        margin-bottom: 0; 
        border-radius: 0; 
        box-shadow: none; 
    }
    
    .mod-panel .bd,
    .mod-panel .ft { 
        padding: 0 10px 15px; 
    }
    
    .mod-panel .box { 
        float: none; 
        width: auto; 
    }
    
    .mod-panel .box .btn { 
        width: auto; 
        min-width: 60px; 
        margin: 0 1px 5px; 
    }
    
    .mod-panel .search { 
        height: 36px; 
        margin-bottom: 15px; 
        border-radius: 3px; 
    }
    
    .mod-panel .search .input-text { 
        height: 36px; 
        padding: 6px 90px 6px 10px; 
        margin-right: -80px; 
        font-size: 14px; 
    }
    
    .mod-panel .search .button { 
        width: 80px; 
        height: 36px; 
        line-height: 36px; 
        font-size: 14px; 
    }
    
    .mod-list .hd h3 { font-size: 16px; }
    .mod-list .hd { 
        width: 240px; 
        height: 26px; 
        margin-bottom: 15px; 
    }
    .mod-list .hd h3 span { 
        padding: 0 20px; 
        bottom: -12px; 
    }
    
    .mod-list .bd { 
        margin: 0 10px; 
    }
    
    .mod-list .bd a { 
        padding: 5px; 
        font-size: 14px; 
    }

    /* 关键词标签移动端适配 */
    .tag { 
        padding: 4px 12px; 
        margin: 0 6px 8px 0; 
        font-size: 13px; 
    }

    /* 信息与截图布局移动端适配（上下布局） */
    .info-screenshot-container { 
        flex-direction: column; 
        gap: 15px; 
        padding: 0; 
    }
    .screenshot-wrapper { 
        flex: 0 0 auto; 
        width: 100%; 
        max-width: 400px; /* 限制最大宽度，避免过宽 */
        height: 220px; /* 适配移动端高度 */
        margin: 0 auto; /* 水平居中 */
    }
    .site-screenshot { 
        border-width: 2px; 
        border-radius: 8px; 
    }
    .screenshot-fallback { 
        height: 100%; 
        font-size: 13px; 
    }

    /* 特殊链接移动端适配 */
    a.special-link { 
        padding: 3px 12px; 
        font-size: 13px; 
    }
}