/* ============================================================
   淄博信息港 - 全局共用样式
   适用于所有列表页、频道页、搜索页等
   不包含 topic.html 详情页独有样式
   ============================================================ */

/* ============================================================
   全局重置 & 基础样式
   ============================================================ */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    color: #333;
    background: #d5dbe3;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: #0055a4;
}
a:hover {
    color: #e67e22;
    text-decoration: underline;
}

ul, li {
    list-style: none;
}

img {
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}

input, button {
    font-family: inherit;
    outline: none;
    border: none;
}
button {
    cursor: pointer;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================================
   主容器
   ============================================================ */
.container {
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.12);
    border: 1px solid #c8ced6;
    border-top: 1px solid #243557;
	min-height: calc(100vh - 20px);  /* 减去页脚高度 */
}

/* ============================================================
   头部 (Logo + 登录/注册 + 发布)
   ============================================================ */
.header {
    background: linear-gradient(135deg, #0f2a4a, #1f4a7a);
    padding: 0 12px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #0d1f33;
}
.header .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}
.header .logo img {
    height: 30px;
}
.header .logo .brand {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #f0f4fa;
}
.header .header-right {
    display: flex;
    align-items: center;
    gap: 2px;
}
.header .header-right a {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 3px;
    transition: all 0.2s;
}
.header .header-right a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}
.header .header-right .btn-publish {
    background: #d97a1a;
    color: #fff;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 4px;
}
.header .header-right .btn-publish:hover {
    background: #c96a0a;
    color: #fff;
}
.header .header-right .sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
}
.header .header-right .badge-msg {
    color: #ff8a80;
    font-weight: 700;
}

/* ============================================================
   搜索框 (PC端隐藏，手机端显示)
   ============================================================ */
.search-bar {
    padding: 4px 6px;
    background: #f5f6f8;
    border-bottom: 1px solid #d0d6de;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
.search-bar .search-inner {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    background: #fff;
    border: 2px solid #c8ced6;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.search-bar .search-inner:focus-within {
    border-color: #d97a1a;
}
.search-bar .search-inner input {
    width: 160px;
    height: 30px;
    padding: 0 8px;
    font-size: 13px;
    color: #333;
    background: transparent;
    min-width: 0;
}
.search-bar .search-inner input::placeholder {
    color: #aaa;
    font-size: 13px;
}
.search-bar .search-inner button {
    height: 30px;
    padding: 0 8px;
    background: #d97a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
    border-radius: 0;
    flex-shrink: 0;
}
.search-bar .search-inner button:hover {
    background: #c96a0a;
}
.search-bar .search-hot {
    font-size: 11px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px 3px;
    flex-shrink: 0;
    margin-left: 2px;
}
.search-bar .search-hot a {
    color: #0055a4;
    white-space: nowrap;
    padding: 1px 4px;
    font-size: 13px;
}
.search-bar .search-hot a:hover {
    color: #d97a1a;
    text-decoration: none;
}
.search-bar .search-hot .label {
    color: #d97a1a;
    font-weight: 600;
    font-size: 11px;
}

/* ============================================================
   分类导航 (换行显示全部分类)
   ============================================================ */
.cate-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 6px 6px;
    background: #f8f9fb;
    border-bottom: 2px solid #d0d6de;
    gap: 2px;
}
.cate-nav .cate-label {
    background: #3f6c94;
    color: #fff;
    padding: 2px 4px;
    font-size: 14px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}
.cate-nav .cate-label a {
    color: #fff;
}
.cate-nav .cate-label a:hover {
    color: #fff;
    text-decoration: none;
}
.cate-nav a {
    padding: 3px 4px;
    font-size: 15px;
    color: #5e0404;
    border-radius: 14px;
    transition: all 0.2s;
    white-space: nowrap;
}
.cate-nav a:hover {
    background: #dce2ea;
    color: #003d7a;
    text-decoration: none;
}
.cate-nav a.active {
    background: #d97a1a;
    color: #fff;
}
.cate-nav a.active:hover {
    background: #c96a0a;
    color: #fff;
}
.cate-nav a.zhpcss {
    color: #d97a1a;
    font-weight: 600;
}

/* ============================================================
   子分类导航 (频道细分导航)
   ============================================================ */
.sub-nav {
    padding: 4px 14px;
    background: #f8f9fb;
    border-bottom: 1px solid #d0d6de;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
}
.sub-nav .sub-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-right: 6px;
}
.sub-nav a {
    padding: 2px 4px;
    font-size: 14px;
    color: #555;
    border-radius: 14px;
    transition: all 0.2s;
    white-space: nowrap;
}
.sub-nav a:hover {
    background: #dce2ea;
    color: #003d7a;
    text-decoration: none;
}
.sub-nav a.active {
    background: #d97a1a;
    color: #fff;
}
.sub-nav a.active:hover {
    background: #c96a0a;
    color: #fff;
}

/* ============================================================
   面包屑导航
   ============================================================ */
.breadcrumb-bar {
    padding: 5px 14px;
    line-height: 30px;
    background-color: #f5f6ca;
    border-bottom: 1px solid #e8e0d0;
    font-size: 17px;
    color: #333;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
}
.breadcrumb-bar a {
    color: #990000;
    font-weight: bold;
}
.breadcrumb-bar a:hover {
    color: #d97a1a;
    text-decoration: underline;
}
.breadcrumb-bar .sep {
    color: #999;
}
.breadcrumb-bar .page-info {
    color: #888;
    font-size: 15px;
    font-weight: normal;
}

/* ============================================================
   主布局 (两栏)
   ============================================================ */
.main-layout {
    display: flex;
    gap: 20px;
    padding: 12px 18px 20px;
    background: #fff;
}
.main-left {
    flex: 1;
    min-width: 0;
}
.main-right {
    width: 270px;
    flex-shrink: 0;
}

/* ============================================================
   信息列表
   ============================================================ */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 3px solid #d97a1a;
    padding-bottom: 4px;
    margin-bottom: 10px;
}
.list-header .title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}
.list-header .title .hl {
    color: #1c3bb8;
}
.list-header .more {
    font-size: 14px;
    color: #1a34d9;
    float: right;
}
.list-header .more:hover {
    color: #d97a1a;
    text-decoration: none;
}
.list-header .more .horn {
    margin-right: 4px;
}

/* 列表项 - 隔行交替背景 */
.topic-list li {
    padding: 5px 6px;
    border-bottom: 1px solid #e6e9ed;
    border-radius: 2px;
    transition: background 0.15s;
}
.topic-list li:nth-child(odd) {
    background: #f5f6f8;
}
.topic-list li:nth-child(even) {
    background: #ffffff;
}
.topic-list li:hover {
    background: #e8ecf2;
}
.topic-list li:last-child {
    border-bottom: none;
}

/* 置顶信息特殊样式 */
.topic-list li.is-top {
    background: #fdf3e6 !important;
    border-left: 4px solid #d97a1a;
    padding-left: 10px;
    margin-left: -4px;
    border-bottom-color: #e8d5c0;
}
.topic-list li.is-top:hover {
    background: #faead8 !important;
}
.topic-list li.is-top .row1 .title a {
    color: #a3520a;
}

/* 第一行：分类 + 标题 + 标签 */
.topic-list .row1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* 分类标签 - 不同分类不同颜色 */
.topic-list .row1 .cate {
    font-size: 14px;
    padding: 0 3px;
    border-radius: 3px;
    line-height: 22px;
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
    border: 1px solid transparent;
}
.topic-list .row1 .cate a {
    color: inherit;
}
.topic-list .row1 .cate a:hover {
    text-decoration: underline;
    color: inherit;
}
.topic-list .row1 .cate.cate-job {
    background: #d97a1a;
    color: #fff;
    border-color: #c96a0a;
}
.topic-list .row1 .cate.cate-house {
    background: #2d7d2d;
    color: #fff;
    border-color: #1a6b1a;
}
.topic-list .row1 .cate.cate-love {
    background: #c0392b;
    color: #fff;
    border-color: #a83226;
}
.topic-list .row1 .cate.cate-gq {
    background: #1a6b8a;
    color: #fff;
    border-color: #0a5a7a;
}
.topic-list .row1 .cate.cate-life {
    background: #b86a16;
    color: #fff;
    border-color: #a05a0a;
}
.topic-list .row1 .cate.cate-other {
    background: #6a5a8a;
    color: #fff;
    border-color: #5a4a7a;
}
.topic-list .row1 .cate.cate-default {
    background: #8a9aa8;
    color: #fff;
    border-color: #7a8a98;
}

.topic-list .row1 .title {
    flex: 1;
    min-width: 80px;
    font-size: 16px;
    font-weight: 500;
    color: #222;
}
.topic-list .row1 .title a {
    color: #222;
}
.topic-list .row1 .title a:hover {
    color: #003d7a;
    text-decoration: underline;
}

.topic-list .row1 .badge {
    font-size: 11px;
    font-weight: 600;
    padding: 0 8px;
    border-radius: 3px;
    line-height: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.topic-list .row1 .badge.top {
    background: #d91a3a;
    color: #fff;
}
.topic-list .row1 .badge.tui {
    background: #c0392b;
    color: #fff;
}

/* 第二行：日期 + 查看次数 + 地区 + 城镇分类 */
.topic-list .row2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    font-size: 14px;
    color: #888;
    padding-left: 2px;
    margin-top: 2px;
}
.topic-list .row2 .date {
    order: 1;
}
.topic-list .row2 .views {
    order: 2;
}
.topic-list .row2 .region {
    order: 3;
}
.topic-list .row2 .town {
    order: 4;
}
.topic-list .row2 .region a {
    color: #97a6b5;
}
.topic-list .row2 .region a:hover {
    text-decoration: underline;
}
.topic-list .row2 .town a {
    color: #0055a4;
}
.topic-list .row2 .town a:hover {
    text-decoration: underline;
}

/* ============================================================
   分页
   ============================================================ */
.pagination-wrap {
    padding-top: 14px;
    text-align: center;
}
.pagination-wrap a,
.pagination-wrap .current {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid #d0d6de;
    margin: 0 2px;
    font-size: 13px;
    color: #444;
    border-radius: 3px;
    transition: all 0.2s;
}
.pagination-wrap a:hover {
    background: #e6e9ed;
    border-color: #b0b8c2;
    text-decoration: none;
}
.pagination-wrap .current {
    background: #d97a1a;
    color: #fff;
    border-color: #d97a1a;
}
.pagination-wrap .btn-page {
    background: #1f4a7a;
    color: #fff;
    border-color: #1f4a7a;
}
.pagination-wrap .btn-page:hover {
    background: #0f2a4a;
    border-color: #0f2a4a;
    color: #fff;
}

/* ============================================================
   右侧边栏
   ============================================================ */
.sidebar-block {
    margin-bottom: 14px;
}
.sidebar-block .block-title {
    font-size: 14px;
    font-weight: 700;
    color: #222;
    padding: 0 0 4px 10px;
    border-left: 3px solid #d97a1a;
    border-bottom: 2px solid #d0d6de;
    margin-bottom: 8px;
}
.sidebar-block .block-title .unread-link {
    float: right;
    font-weight: 400;
    font-size: 13px;
    color: #c0392b;
}
.sidebar-block .block-title .unread-link:hover {
    color: #a83226;
    text-decoration: none;
}

/* 搜索框 (在侧边栏，PC端显示) */
.sidebar-search {
    display: flex;
    background: #fff;
    border: 2px solid #c8ced6;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.sidebar-search:focus-within {
    border-color: #d97a1a;
}
.sidebar-search input {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    font-size: 13px;
    color: #333;
    background: transparent;
}
.sidebar-search input::placeholder {
    color: #aaa;
}
.sidebar-search button {
    height: 34px;
    padding: 0 16px;
    background: #d97a1a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    white-space: nowrap;
    border-radius: 0;
}
.sidebar-search button:hover {
    background: #c96a0a;
}

/* 热门搜索 (侧边栏) */
.sidebar-hot {
    margin-top: 6px;
    font-size: 13px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
}
.sidebar-hot a {
    color: #181bcd;
}
.sidebar-hot a:hover {
    color: #d97a1a;
    text-decoration: none;
}
.sidebar-hot .label {
    color: #d97a1a;
    font-weight: 600;
}

/* 用户卡片 */
.user-card {
    background: #eef1f5;
    border: 1px solid #d0d6de;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
	font-weight:700;
}
.user-card .links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 5px;
    align-items: center;
}
.user-card .links a {
    color: #0055a4;
}
.user-card .links a:hover {
    text-decoration: underline;
}
.user-card .links .sep {
    color: #b8b8b8;
}

/* 广告位 */
.ad-box {
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #d0d6de;
}
.ad-box img {
    width: 100%;
    display: block;
}
.ad-box .label {
    text-align: center;
    font-size: 14px;
    color: #b86a16;
    padding: 2px 0;
    background: #fef3e6;
    border-top: 1px solid #e8d5c0;
}

/* 地区导航 */
.region-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.region-nav a {
    padding: 2px 8px;
    font-size: 16px;
    color: #444;
    background: #eef1f5;
    border-radius: 3px;
    border: 1px solid #dce0e6;
    transition: all 0.2s;
}
.region-nav a:hover {
    background: #dce2ea;
    color: #003d7a;
    text-decoration: none;
}
.region-nav a.active {
    background: #d97a1a;
    color: #fff;
    border-color: #d97a1a;
}
.region-nav a.active:hover {
    background: #c96a0a;
    color: #fff;
}

/* 分类导航 (侧边栏) */
.cate-nav-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px 0;
}
.cate-nav-sidebar a {
    padding: 2px 10px;
    font-size: 14px;
    color: #444;
    background: #eef1f5;
    border-radius: 3px;
    border: 1px solid #dce0e6;
    transition: all 0.2s;
    white-space: nowrap;
}
.cate-nav-sidebar a:hover {
    background: #dce2ea;
    color: #003d7a;
    text-decoration: none;
}
.cate-nav-sidebar a.zhpcss {
    color: #d97a1a;
    font-weight: 600;
}
.cate-nav-sidebar a.active {
    background: #d97a1a;
    color: #fff;
    border-color: #d97a1a;
}
.cate-nav-sidebar a.active:hover {
    background: #c96a0a;
    color: #fff;
}

/* 标签导航 */
.tag-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tag-nav a {
    padding: 2px 5px;
    font-size: 15px;
    color: #555;
    background: #eef1f5;
    border-radius: 3px;
    border: 1px solid #dce0e6;
    transition: all 0.2s;
}
.tag-nav a:hover {
    background: #dce2ea;
    color: #003d7a;
    text-decoration: none;
}

/* 推荐列表 */
.rec-list li {
    padding: 4px 0;
    border-bottom: 1px dashed #dce0e6;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rec-list li:last-child {
    border-bottom: none;
}
.rec-list li .d {
    color: #aaa;
    font-size: 12px;
    margin-right: 4px;
}
.rec-list li a {
    color: #222;
}
.rec-list li a:hover {
    color: #d97a1a;
    text-decoration: none;
}

/* 便民导航 (侧边栏版本) */
.service-nav-side .block-title {
    margin-bottom: 6px;
}
.service-nav-side ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.service-nav-side ul li a {
    display: inline-block;
    padding: 2px 10px;
    background: #eef1f5;
    border-radius: 3px;
    font-size: 14px;
    color: #444;
    border: 1px solid #dce0e6;
    transition: all 0.2s;
}
.service-nav-side ul li a:hover {
    background: #dce2ea;
    color: #003d7a;
    text-decoration: none;
}

/* 友情链接 */
.friend-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 14px;
}
.friend-links a {
    color: #0055a4;
    border-bottom: 1px dotted #d0d6de;
}
.friend-links a:hover {
    color: #d97a1a;
    text-decoration: none;
    border-bottom-color: #d97a1a;
}

/* ============================================================
   页脚
   ============================================================ */
.footer {
    background: #eef1f5;
    border-top: 1px solid #d0d6de;
    padding: 14px 18px;
    text-align: center;
    font-size: 14px;
    color: #555;
}
.footer a {
    color: #555;
    margin: 0 6px;
}
.footer a:hover {
    color: #222;
    text-decoration: underline;
}
.footer .copy {
    margin-top: 4px;
}

/* ============================================================
   筛选栏 (列表页通用)
   ============================================================ */
.filter-bar {
    background: #f5f6f8;
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #e6e9ed;
}
.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: center;
}
.filter-group input[type="text"] {
    padding: 4px 8px;
    border: 1px solid #d0d6de;
    border-radius: 4px;
    width: 140px;
    height: 30px;
    font-size: 13px;
}
.filter-group .btn-search-local {
    padding: 3px 10px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    height: 30px;
    cursor: pointer;
}
.filter-group .btn-search-global {
    padding: 3px 10px;
    background: #1f4a7a;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    height: 30px;
    cursor: pointer;
}
.filter-group select {
    padding: 3px 8px;
    border: 1px solid #d0d6de;
    border-radius: 4px;
    background: white;
    height: 30px;
    font-size: 13px;
}
.filter-group .filter-checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 13px;
}
.filter-clear {
    color: #c0392b;
    font-size: 13px;
}
.filter-clear:hover {
    color: #a83226;
}

/* ============================================================
   响应式
   ============================================================ */
/* PC端：显示侧边栏搜索，隐藏顶部搜索 */
@media (min-width: 769px) {
    .main-right {
        display: block;
    }
    .search-bar {
        display: none;
    }
}

/* 手机端：显示顶部搜索，隐藏侧边栏搜索 */
@media (max-width: 768px) {
    .main-right {
        display: none;
    }
    .main-layout {
        padding: 8px 8px 12px;
        gap: 0;
        flex-direction: column;
    }
    .search-bar {
        display: flex;
        align-items: center;
        gap: 3px;
        padding: 4px 6px;
        flex-wrap: nowrap;
    }
    .search-bar .search-inner {
        flex: 0 0 auto;
    }
    .search-bar .search-inner input {
        width: 160px;
        height: 28px;
        font-size: 13px;
        padding: 0 6px;
    }
    .search-bar .search-inner button {
        height: 28px;
        padding: 0 6px;
        font-size: 11px;
    }
    .search-bar .search-hot {
        font-size: 11px;
        margin-left: 2px;
        gap: 1px 2px;
        flex-shrink: 1;
        overflow: hidden;
    }
    .search-bar .search-hot a {
        font-size: 13px;
        padding: 1px 3px;
        white-space: nowrap;
    }
    .search-bar .search-hot .label {
        display: none;
    }

    .header {
        height: 42px;
        padding: 0 8px;
    }
    .header .logo img {
        height: 24px;
    }
    .header .logo .brand {
        font-size: 14px;
    }
    .header .header-right a {
        font-size: 14px;
        padding: 3px 6px;
    }
    .header .header-right .btn-publish {
        padding: 3px 10px;
        font-size: 12px;
    }

    .cate-nav {
        padding: 3px 8px 4px;
        gap: 2px;
        overflow-y: auto;
    }
    .cate-nav .cate-label {
        font-size: 14px;
        padding: 1px 3px;
    }
    .cate-nav a {
        font-size: 14px;
        padding: 2px 3px;
    }

    .breadcrumb-bar {
        font-size: 15px;
        padding: 4px 10px;
        line-height: 28px;
        gap: 2px 4px;
    }
    .breadcrumb-bar .page-info {
        font-size: 14px;
    }

    .sub-nav {
        padding: 3px 10px;
        gap: 2px 4px;
    }
    .sub-nav .sub-label {
        font-size: 13px;
    }
    .sub-nav a {
        font-size: 14px;
        padding: 2px 3px;
    }

    .topic-list .row1 .title {
        font-size: 15px;
    }
    .topic-list .row1 .cate {
        font-size: 14px;
        line-height: 20px;
        padding: 0 3px;
    }
    .topic-list .row1 .badge {
        font-size: 10px;
        line-height: 18px;
        padding: 0 6px;
    }
    .topic-list .row2 {
        font-size: 14px;
        gap: 4px 10px;
    }

    .pagination-wrap a,
    .pagination-wrap .current {
        padding: 3px 10px;
        font-size: 12px;
    }

    .footer {
        padding: 10px;
        font-size: 14px;
    }

    .filter-group input[type="text"] {
        width: 100px;
        font-size: 12px;
    }
    .filter-group .btn-search-local,
    .filter-group .btn-search-global {
        font-size: 12px;
        padding: 2px 8px;
        height: 28px;
    }
    .filter-group select {
        font-size: 12px;
        height: 28px;
        padding: 2px 6px;
    }
    .filter-group .filter-checkbox {
        font-size: 12px;
    }
    .filter-clear {
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .header .logo .brand {
        font-size: 12px;
    }
    .header .logo img {
        height: 20px;
    }
    .header .header-right a {
        font-size: 14px;
        padding: 2px 6px;
    }
    .header .header-right .btn-publish {
        font-size: 11px;
        padding: 2px 8px;
    }
    .search-bar .search-inner input {
        width: 140px;
        font-size: 10px;
    }
    .search-bar .search-inner button {
        font-size: 10px;
        padding: 0 5px;
    }
    .search-bar .search-hot a {
        font-size: 13px;
        padding: 1px 2px;
    }
    .cate-nav .cate-label {
        font-size: 13px;
        padding: 1px 8px;
    }
    .cate-nav a {
        font-size: 14px;
        padding: 2px 3px;
    }
    .breadcrumb-bar {
        font-size: 14px;
        padding: 3px 8px;
        line-height: 26px;
    }
    .breadcrumb-bar .page-info {
        font-size: 14px;
    }
    .sub-nav .sub-label {
        font-size: 12px;
    }
    .sub-nav a {
        font-size: 14px;
        padding: 1px 3px;
    }
    .topic-list .row1 .title {
        font-size: 15px;
    }
    .topic-list .row1 .cate {
        font-size: 10px;
        line-height: 18px;
        padding: 0 6px;
    }
    .topic-list .row1 .badge {
        font-size: 9px;
        line-height: 16px;
        padding: 0 5px;
    }
    .topic-list .row2 {
        font-size: 14px;
        gap: 4px 6px;
    }
    .footer {
        font-size: 14px;
        padding: 8px;
    }

    .filter-group input[type="text"] {
        width: 80px;
        font-size: 11px;
        height: 26px;
    }
    .filter-group .btn-search-local,
    .filter-group .btn-search-global {
        font-size: 11px;
        padding: 2px 6px;
        height: 26px;
    }
    .filter-group select {
        font-size: 11px;
        height: 26px;
        padding: 2px 4px;
    }
    .filter-group .filter-checkbox {
        font-size: 11px;
    }
    .filter-clear {
        font-size: 11px;
    }
}
/* ============================================================
   地区分类标签颜色（柔和统一风格）
   ============================================================ */
   .topic-list .row1 .cate.cate-region {
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}

/* 淄博各区县 - 统一明度，不同色相 */
.topic-list .row1 .cate.cate-zhangdian {
    background: #4A7FB5;  /* 张店区 - 柔蓝 */
}
.topic-list .row1 .cate.cate-zichuan {
    background: #5B8C5A;  /* 淄川区 - 柔绿 */
}
.topic-list .row1 .cate.cate-boshan {
    background: #B58A5A;  /* 博山区 - 柔金 */
}
.topic-list .row1 .cate.cate-linzi {
    background: #8A6FB0;  /* 临淄区 - 柔紫 */
}
.topic-list .row1 .cate.cate-zhoucun {
    background: #C4815A;  /* 周村区 - 柔橙 */
}
.topic-list .row1 .cate.cate-yiyuan {
    background: #B56A6A;  /* 沂源县 - 柔红 */
}
.topic-list .row1 .cate.cate-gaoqing {
    background: #5A9A9A;  /* 高青县 - 柔青 */
}
.topic-list .row1 .cate.cate-huantai {
    background: #A58A6A;  /* 桓台县 - 柔棕 */
}
.topic-list .row1 .cate.cate-qita {
    background: #78903b;  /* 桓台县 - 柔棕 */
}
/* 默认地区颜色 */
.topic-list .row1 .cate.cate-region-default {
    background: #7A8A9A;  /* 默认 - 柔灰蓝 */
}

/* ============================================================
   手机端分页样式（带首页/尾页）
   ============================================================ */

.pagination-mobile {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #f8f9fb;
    border-radius: 8px;
    padding: 10px 12px;
    margin: 8px 0;
}

/* 第一行：首页 + 页码 + 尾页 */
.pagination-mobile-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
}

.pagination-mobile-pages .page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e0e4ea;
    transition: all 0.2s;
    cursor: pointer;
}

/* 首页/尾页特殊样式（稍小一点，突出"首页"/"尾页"文字） */
.pagination-mobile-pages .page-num.first,
.pagination-mobile-pages .page-num.last {
    font-size: 12px;
    min-width: 44px;
    padding: 0 6px;
    color: #555;
    background: #f0f2f5;
    border-color: #d5d9e0;
}

.pagination-mobile-pages .page-num.first:hover,
.pagination-mobile-pages .page-num.last:hover {
    background: #e67e22;
    color: #fff;
    border-color: #e67e22;
}

.pagination-mobile-pages .page-num:active {
    transform: scale(0.92);
}

.pagination-mobile-pages .page-num.current {
    background: #e67e22;
    color: #fff;
    border-color: #e67e22;
    font-weight: 700;
}

.pagination-mobile-pages .page-num.disabled {
    color: #ccc;
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: #e8e8e8;
}

.pagination-mobile-pages .page-ellipsis {
    padding: 0 4px;
    color: #999;
    font-size: 16px;
}

/* 第二行：上一页/下一页 */
.pagination-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    border-top: 1px solid #eee;
    padding-top: 8px;
}

.pagination-mobile-nav .page-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e0e4ea;
    transition: all 0.2s;
    cursor: pointer;
    flex: 1;
    min-height: 40px;
}

.pagination-mobile-nav .page-nav:active {
    transform: scale(0.96);
    background: #e67e22;
    color: #fff;
    border-color: #e67e22;
}

.pagination-mobile-nav .page-nav.disabled {
    color: #ccc;
    cursor: not-allowed;
    background: #f5f5f5;
    border-color: #e8e8e8;
}

.pagination-mobile-nav .page-nav.disabled:active {
    transform: none;
    background: #f5f5f5;
    color: #ccc;
}

.pagination-mobile-nav .page-info {
    color: #888;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    padding: 0 8px;
    min-width: 70px;
    text-align: center;
}

/* ============================================================
   PC端分页样式（保持不变）
   ============================================================ */

.pagination-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 12px 0;
    font-size: 14px;
}

.pagination-wrap .page-btn {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #d0d6de;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    background: #fff;
    transition: all 0.2s;
    cursor: pointer;
    user-select: none;
}

.pagination-wrap .page-btn:hover {
    background: #e67e22;
    color: #fff;
    border-color: #e67e22;
    text-decoration: none;
}

.pagination-wrap .page-btn.current {
    background: #e67e22;
    color: #fff;
    border-color: #e67e22;
    font-weight: 600;
}

.pagination-wrap .page-btn.disabled {
    color: #bbb;
    cursor: not-allowed;
    background: #f5f5f5;
}

.pagination-wrap .page-btn.disabled:hover {
    background: #f5f5f5;
    color: #bbb;
    border-color: #d0d6de;
}

.pagination-wrap .page-ellipsis {
    padding: 0 4px;
    color: #999;
}

.pagination-wrap .page-info {
    padding: 4px 12px;
    color: #888;
    font-size: 13px;
    margin-left: 4px;
}

/* ============================================================
   响应式：手机端隐藏PC分页
   ============================================================ */
@media (max-width: 768px) {
    .pagination-wrap {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .pagination-mobile {
        display: none !important;
    }
}


/* 悬浮回到顶部/底部双按钮 */
.float-btn-group {
    position: fixed;
    right: 20px;
    bottom: 60px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}
.float-btn {
    width: 50px;
    height: 50px;
    background: #d97a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: auto;
}
.float-btn.show {
    opacity: 1;
    visibility: visible;
}
.float-btn:hover {
    background: #c06b15;
}
.float-btn:active {
    background: #a3520a;
}
/* 手机端适配，抬高避开底部导航栏 */
@media (max-width: 768px) {
    .float-btn-group {
        right: 16px;
        bottom: 110px;
        gap: 10px;
    }
    .float-btn {
        width: 36px;
        height: 36px;
        font-size: 28px;
    }
}



/* ✅ 列表页 h1 语义化，样式与原有 .title 保持一致 */
.list-header h1.title {
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    display: inline;
}