/* ==================== 基础重置 ==================== */
body, div, iframe, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, table, th, td, 
form, input, button, select, textarea {margin: 0;padding: 0;font-weight: normal;font-style: normal;font-size: 100%;font-family: inherit;}
ol, ul {list-style: none;}
img {border: 0;}
a:link,a:visited {color:#000000;text-decoration:none;}
a:hover {color:#c00;text-decoration:underline;}
body {font-size:12px;color:#1A1A1A;font-family:arial, sans-serif;background:#f5f7fa}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; }
h1,h2,h3,h4,h5,h6 {margin:0; padding:0; font-weight:normal;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;}
.cr {clear:both;height:0px;overflow:hidden;}
.fl {float:left;}
.fr {float:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;line-height:0;font-size:0;}
.clearfix{*zoom:1;}
a:hover {-webkit-transition:all linear .218s;-moz-transition:all linear .218s;transition:all linear .218s}

/* ==================== 顶部toolbar ==================== */
.toolbar {width: 100%;height: 36px;background: url(header.jpg) repeat-x;display: block;overflow: hidden;color: #666}
.toolbar .toolbar-box {margin: 0 auto;width: 1200px;overflow: hidden}
.toolbar .toolbar-left {float: left;width: auto;line-height: 30px;font-size: 14px}
.toolbar .toolbar-right {float: right;display: block;height: 30px;line-height: 30px;font-size: 14px;color: #0aa770}
.toolbar .toolbar-right a {color: #666;padding-right: 5px}
.toolbar .toolbar-right a:hover {color: #0aa770}

/* ==================== header头部 ==================== */
.header {width: 100%;background: #fff;overflow: hidden}
.header .header-box {margin: 5px auto;width: 1200px;overflow: hidden}
.header .logo {float: left;display: block;overflow: hidden;padding: 18px 0}
.header .logo .logo-img {width: auto;height: 50px;vertical-align: middle}

/* ==================== 搜索框 ==================== */
.search {width: 460px;float:right;margin: 12px 0 0 0px;}
.search ul {height: 26px;line-height: 26px;}
.search ul li {float: left;width: 72px;text-align: center; cursor: pointer;border-radius: 3px 3px 0 0;}
.search ul li:hover {background: #F2F2F2;}
.search ul li.on {background: #237ded;color: #fff;}
.search div {border: 1px solid #237ded;height: 35px;overflow: hidden;}
.search div input {float: left;border: 0;}
.search div .search_ipt {line-height: 30px;height: 30px;outline: none;margin: 4px;width: 358px;}
.search div .search_btn {width: 92px;height: 35px;background: #237ded;color: #fff;cursor: pointer;}
.search div .search_btn:hover {opacity: .9;}

/* ==================== 精品频道导航jptpdh ==================== */
.jptpdh{width:1200px; height:auto; overflow:hidden; margin:0 auto;}
.jptpdh1{width:1200px; height:45px;}
.jptpdh1l{width:200px; float:left; height:45px; line-height:45px;background:#237ded; font-size:20px; text-align:center; color:#fff;}
.jptpdh1l a{ color:#fff;}
.jptpdh1r{width:1000px; height:45px; background:#5A9EF2; float:left;}
.jptpdh1r1{width:900px; float:left; line-height:45px; color:#fff;}
.jptpdh1r1 a{ color:#fff;}
.jptpdh1r1 li{ float:left; padding:0px 16px;}
.jptpdh1r1 li a{font-size:16px;}

/* ==================== 容器wrapper ==================== */
.wrapper {display: block;margin: 15px auto 0;width: 1200px;}

/* ==================== 面包屑 ==================== */
.crumbs {overflow: hidden;height: 28px;color: #686868;font-weight: 400;font-size: 14px;line-height: 28px;padding-left: 10px;margin-bottom: 10px}
.crumbs a {color: #686868;font-size: 14px}

/* ==================== 底部footer ==================== */
.footer{clear:both;padding:5px 0;width:100%;background:#333;font-size:14px;line-height:22px;min-width:1210px;margin-top: 20px;}
.footer .copyright{color:#7b7b7b;font-size:12px; margin-bottom:10px; text-align:center;}
.footer .copyright a {color:#7b7b7b;}

/* ==================== 专题列表页样式 ==================== */

/* 页面标题区 */
.list-page-header {
    background: #fff;
    border-radius: 12px;
    padding: 28px 35px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    text-align: center;
}
.list-page-header h1 {
    font-size: 26px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}
.list-page-subtitle {
    font-size: 14px;
    color: #999;
    margin: 0;
}

/* 列表容器 */
.topic-list-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 列表项 */
.topic-list-item {
    background: #fff;
    border-radius: 12px;
    padding: 22px 28px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    border: 1px solid #eaeef3;
    transition: all 0.2s ease;
}
.topic-list-item:hover {
    box-shadow: 0 4px 16px rgba(35,125,237,.1);
    border-color: #d0e0f5;
}

/* 标题 */
.topic-list-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}
.topic-list-title a {
    color: #1a1a1a;
    text-decoration: none;
}
.topic-list-title a:hover {
    color: #237ded;
}

/* 数据行 */
.topic-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
}
.meta-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}
.stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #888;
    padding-left: 18px;
    position: relative;
}
.stat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background-size: contain;
    background-repeat: no-repeat;
}
.stat-qa::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z'/%3E%3C/svg%3E");
}
.stat-like::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}
.stat-help::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}
.stat-doc::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm4 18H6V4h7v5h5v11z'/%3E%3C/svg%3E");
}
.stat-crowd::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

/* 更新时间 */
.topic-update {
    font-size: 12px;
    color: #bbb;
    font-weight: 400;
    white-space: nowrap;
}

/* 三列核心指标 - 每列三行独立 */
.topic-list-metrics {
    display: flex;
    gap: 14px;
    margin-bottom: 6px;
}
.metric-box {
    flex: 1;
    background: #fafbfc;
    border-radius: 10px;
    padding: 14px 16px;
    min-width: 0;
    border: 1px solid #f0f2f5;
}
.metric-box-mis {
    background: #fff8f8;
    border: 1px solid #ffe8e8;
}
.metric-box-exp {
    background: #f5f9ff;
    border: 1px solid #e0ecff;
}

.metric-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    padding-left: 16px;
    position: relative;
}
.metric-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
}
.metric-header-exp::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23237ded' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
}
.metric-header-word::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230aa770' d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
}
.metric-header-warn::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e74c3c' d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.metric-name {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* 第一行：文字内容 */
.metric-text {
    font-size: 14px;
    color: #333;
    font-weight: 400;  /* 修复：不加粗 */
    line-height: 1.5;
    margin-bottom: 8px;
    min-height: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.metric-text-red {
    color: #c0392b;
}

/* 第二行：条形图 */
.metric-track {
    width: 100%;
    height: 8px;
    background: #e8eaed;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}
.metric-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.metric-fill-blue {
    background: linear-gradient(90deg, #237ded, #5A9EF2);
}
.metric-fill-green {
    background: linear-gradient(90deg, #0aa770, #2ecc71);
}
.metric-fill-red {
    background: linear-gradient(90deg, #ff6b6b, #ee5a5a);
}

/* 第三行：百分比 */
.metric-percent {
    font-size: 13px;
    color: #237ded;
    font-weight: 600;
    text-align: right;
}
.metric-percent-red {
    color: #e74c3c;
}

.metric-empty {
    font-size: 13px;
    color: #ccc;
    padding: 20px 0;
    text-align: center;
}

/* 底部操作区 */
.topic-list-footer {
    display: flex;
    justify-content: flex-start;
    padding-top: 4px;
}

/* 按钮美化 */
.btn-enter-topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: #fff;
    color: #237ded;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1.5px solid #237ded;
    cursor: pointer;
}
.btn-enter-topic:hover {
    background: #237ded;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(35,125,237,.25);
}
.btn-text {
    display: inline-block;
}
.btn-arrow {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
    transition: transform 0.2s ease;
}
.btn-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23237ded' d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 0.2s ease;
}
.btn-enter-topic:hover .btn-arrow {
    transform: translateX(3px);
}
.btn-enter-topic:hover .btn-arrow::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
}

/* 分页 */
.list-pagination-wrap {
    margin: 30px 0;
}
.list-pagination-wrap #pages {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.list-pagination-wrap #pages a,
.list-pagination-wrap #pages b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
}
.list-pagination-wrap #pages a {
    background: #fff;
    color: #555;
    border: 1px solid #e0e0e0;
}
.list-pagination-wrap #pages a:hover {
    background: #237ded;
    color: #fff;
    border-color: #237ded;
}
.list-pagination-wrap #pages b {
    background: #237ded;
    color: #fff;
    font-weight: 700;
    border: 1px solid #237ded;
}

/* 空状态 */
.list-empty {
    background: #fff;
    border-radius: 10px;
    padding: 60px 30px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* 响应式 */
@media(max-width: 768px) {
    .wrapper { width: 100%; padding: 0 15px; box-sizing: border-box; }
    .jptpdh, .jptpdh1, .jptpdh1l, .jptpdh1r { width: 100%; }
    .header .header-box { width: 100%; padding: 0 15px; box-sizing: border-box; }
    .search { width: 100%; float: none; margin: 10px 0; }
    .search div .search_ipt { width: calc(100% - 100px); }
    .topic-list-metrics { flex-direction: column; gap: 10px; }
    .topic-list-meta { flex-direction: column; align-items: flex-start; }
    .topic-update { margin-left: auto; }
    .topic-list-item { padding: 18px 16px 14px; }
    .list-page-header h1 { font-size: 22px; }
    .footer { min-width: auto; }
}