:root {
    --text-main: #2c3e50; --text-sub: #546e7a; --text-light: #90a4ae;
    --accent-orange: #ff6b00; --accent-blue: #1976d2;
    --bg-body: #f5f7fa; --bg-white: #ffffff; --border-color: #e0e6ed;
    --shadow-card: 0 4px 15px rgba(0,0,0,0.05);
    --pc-bg-outside: #eef2f6; 
}

html {
    background-color: var(--pc-bg-outside); 
    height: 100%;
}

body { 
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif; 
    background: var(--bg-body); 
    color: var(--text-main); 
    line-height: 1.6; 
    font-size: 16px; 
    padding-bottom: 40px; 
    margin: 0;
    max-width: 480px; 
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; color: var(--text-main); }

/* 头部样式 */
.header { background: #fff; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; }
.header-inner { max-width: 100%; margin: 0 auto; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; }
.logo-wrapper { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 32px; height: 32px; background: var(--accent-blue); color: #fff; font-size: 18px; font-weight: bold; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-family: "KaiTi", serif; }
.logo-text { font-size: 18px; font-weight: 800; color: #333; }
.logo-text span { color: var(--accent-orange); }
.m-search-box { flex: 1; margin-left: 15px; max-width: 240px; }
.m-search-form { display: flex; background: #f0f2f5; border-radius: 20px; padding: 6px 12px; align-items: center; }
.m-search-form input { border: none; background: transparent; flex: 1; height: 24px; font-size: 14px; outline: none; width: 100%; }
.m-search-form button { 
    border: none; 
    background: transparent; 
    color: var(--accent-blue); 
    cursor: pointer; 
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-icon-svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 主体容器 */
.container { max-width: 100%; margin: 15px auto; padding: 0 15px; display: block; }
.page-header { background: var(--bg-white); padding: 20px; border-radius: 10px; margin-bottom: 15px; box-shadow: var(--shadow-card); border: 1px solid var(--border-color); }
.breadcrumb { font-size: 12px; color: var(--text-light); margin-bottom: 10px; }
.breadcrumb a { color: var(--text-light); }
.breadcrumb span { margin: 0 6px; color: #ccc; }
.page-header h1 { font-size: 22px; color: #222; border-left: 4px solid var(--accent-orange); padding-left: 12px; margin-bottom: 8px; font-weight: 700; }

/* 列表样式 */
.article-list { display: flex; flex-direction: column; gap: 15px; }
.article-card { 
    background: var(--bg-white); 
    padding: 12px !important; /* 恢复适度内边距，更自然 */
    border-radius: 10px; 
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-card); 
    overflow: hidden;
}

/* 标题区域 */
.art-title-box { 
    display: flex; 
    align-items: center; 
    flex-wrap: wrap; 
    gap: 8px; 
    margin-bottom: 8px; /* 标题与元信息自然间距 */
}
.art-title { 
    font-size: 18px; 
    font-weight: 700; 
    color: #222; 
    line-height: 1.4; /* 标题行高恢复自然 */
    display: inline-block; 
}
.word-count-badge { 
    font-size: 11px; 
    background: linear-gradient(135deg, #ff8f00, #ff6b00); 
    color: #fff; 
    padding: 2px 8px; 
    border-radius: 12px; 
    font-weight: 600; 
    white-space: nowrap; 
}

.art-meta { font-size: 12px; background-color: #f5faff; border: 1px solid #d9ebff; border-radius: 16px; padding: 3px 10px; display: inline-flex; align-items: center; margin-bottom: 8px; color: #2c3e50; }
.art-meta svg { width: 12px; height: 12px; margin-right: 4px; stroke: #1976d2; }

/* 标签区域 - 正文上方自然空白（10px） */
.article-tags { 
    margin: 0 0 25px 0 !important; /* 标签与正文之间留10px自然空白 */
    padding: 0 !important;
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
    line-height: 1;
}
.article-tags a { 
    font-size: 12px; 
    color: var(--accent-blue); 
    background: #fff; 
    padding: 2px 10px 2px 22px; 
    border-radius: 12px; 
    border: 1px solid #bbdefb; 
    position: relative; 
    display: inline-flex; 
    align-items: center; 
    line-height: 1.2;
}
.article-tags a::before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231976d2' stroke-width='2'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3C/svg%3E"); background-size: contain; }

/* 正文区域 - 上下保留自然空白（下方10px） */
.art-content { 
    font-size: 15px; 
    line-height: 1.8 !important; /* 移动端舒适行高不变 */
    color: #333; 
    margin: 0 0 25px 0 !important; /* 正文与点评之间留10px自然空白 */
    padding: 0 !important;
    white-space: normal !important; 
    word-break: break-word; 
}
.art-content p {
    margin: 0 !important;
    padding-bottom: 6px;
    line-height: 1.8 !important; 
    display: block;
    min-height: 0 !important;
}
.art-content p:not(:last-child) {
    margin-bottom: 4px !important; /* 段落间距保持适度 */
}

/* 点评框 - 位置自然 */
.pingyu_box { 
    margin: 0 0 10px 0 !important; 
    padding: 8px 12px; /* 点评框内边距恢复自然 */
    background: #f0f7ff; 
    border: 1px solid #d0e8ff; 
    border-left: 4px solid #4285F4; 
    border-radius: 6px; 
    clear: both;
}
.pingyu_header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; position: relative; padding-left: 26px; }
.pingyu_header::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234285F4' stroke-width='2'%3E%3Cpath d='M12 20.94c-4.97 0-9-4.03-9-9 0-4.97 4.03-9 9-9 4.97 0 9 4.03 9 9 0 4.97-4.03 9-9 9z'/%3E%3Cpath d='M12 15l-3-3h6l-3 3z'/%3E%3C/svg%3E"); background-size: contain; }
.pingyu_header h3 { font-size: 16px; color: #4285F4; margin: 0; font-weight: 500; }
.pingyu_content { background: #fff; border: 1px dashed #d0d7e2; border-radius: 4px; padding: 8px 12px; font-size: 15px; line-height: 1.8; color: #FF0000 !important; font-family: "KaiTi", serif; text-indent: 2em; }

/* 侧边栏 */
/* --- 【绝对独立版】侧边栏卡片样式 (修复变形问题) --- */

/* 1. 核心卡片容器：强制圆角、背景、内边距，不依赖父级 */
.side-card-box {
    /* 强制块级显示 */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* 背景与边框 */
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    /* 关键：强制圆角，解决“没圆角”问题 */
    border-radius: 12px !important;
    /* 轻微阴影，增加立体感 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.04) !important;
    
    /* 关键：内部留白 (上下左右都有)，解决“贴边”和“尾部拥挤”问题 */
    /* 上15px, 右15px, 下20px(防止底部贴边), 左15px */
    padding: 15px 15px 20px 15px !important;
    
    /* 外边距：与上方内容拉开距离 */
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    
    /* 清除浮动影响 */
    overflow: hidden; 
}

/* 2. 标题 H3：强制 Flex 布局，确保图标显示 */
.side-card-box > .side-h3-title {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #333333 !important;
    
    margin: 0 0 15px 0 !important; /* 标题下方留白 */
    padding: 0 !important;
    border: none !important;
    line-height: 1.4 !important;
    
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. 标题内的 SVG 图标 */
.side-card-box .side-icon-svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important; /* 防止被压缩 */
    margin-right: 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    /* 确保图标颜色不被继承覆盖 */
    stroke-width: 2.5 !important; 
}

/* 4. 列表 UL：Flex 网格布局 */
.side-tag-list, 
.side-cat-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important; /* 卡片之间的间隙 */
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 5. 列表项 LI：控制宽度实现左右留白 */
.side-tag-item, 
.side-cat-item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* 关键：宽度设为 47%，配合 space-between 自动产生左右空隙 */
    /* 这样就不会紧贴 .side-card-box 的左右边框了 */
    width: 47% !important; 
    box-sizing: border-box !important;
    
    /* 防止 li 默认样式干扰 */
    float: none !important;
}

/* 6. 链接 A：胶囊按钮样式 */
.side-tag-item a, 
.side-cat-item a {
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
    
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* 按钮高度 */
    padding: 10px 5px !important;
    
    /* 胶囊圆角 */
    border-radius: 50px !important;
    
    /* 默认样式 */
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important;
    color: #555555 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: normal !important;
    
    /* 轻微阴影 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    
    transition: all 0.2s ease;
}

/* 点击态 */
.side-tag-item a:active, 
.side-cat-item a:active {
    transform: scale(0.96);
    background-color: #f9f9f9 !important;
}

/* --- 特殊颜色逻辑 --- */

/* 特大号 (ts-xl) */
.side-tag-item.ts-xl a {
    color: #e74c3c !important;
    background-color: #fff5f5 !important;
    border-color: #ffdbd9 !important;
    font-weight: 600 !important;
}

/* 大号 (ts-l) */
.side-tag-item.ts-l a {
    color: #1976d2 !important;
    background-color: #f0f7ff !important;
    border-color: #d6eaff !important;
    font-weight: 600 !important;
}

/* 栏目入口专属：加粗黑字 */
.side-cat-list .side-cat-item a {
    color: #333333 !important;
    font-weight: 700 !important; /* 强制加粗 */
    background-color: #f8faff !important;
    border-color: #eef2f7 !important;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08) !important;
}
/* 底部 */
.footer { background: #fff; border-top: 1px solid #eee; padding: 30px 20px; margin-top: 30px; text-align: center; }
.footer-logo { font-size: 18px; font-weight: 800; color: #333; margin-bottom: 10px; }
.footer-logo span { color: var(--accent-orange); }
.copyright { color: #999; font-size: 12px; line-height: 2; }