/* ================= 全局变量 ================= */
:root {
    --text-main: #2c3e50;
    --text-sub: #546e7a;
    --text-light: #90a4ae;
    --accent-orange: #ff6b00;
    --accent-blue: #1976d2;
    --teacher-red: #c62828;
    --bg-body: #f5f7fa;
    --bg-white: #ffffff;
    --border-color: #e0e6ed;
    --shadow-card: 0 4px 15px rgba(0,0,0,0.05);
    --shadow-hover: 0 8px 25px rgba(0,0,0,0.08);
    --review-bg: #fdf8f0; /* 批改纸背景色 */
    --review-border: #e8d5b8; /* 批改纸边框色 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg-body); color: var(--text-main); line-height: 1.7; font-size: 16px; }
a { text-decoration: none; color: var(--text-main); transition: all 0.2s; }
a:hover { color: var(--accent-orange); }

/* ================= 头部导航 ================= */
.header { background: #fff; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.header-inner { max-width: 1200px; margin: 0 auto; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.logo-wrapper { display: flex; align-items: center; gap: 12px; }
.logo-icon { width: 40px; height: 40px; background: var(--accent-blue); color: #fff; font-size: 22px; font-weight: bold; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-family: "KaiTi", serif; }
.logo-text { font-size: 22px; font-weight: 800; color: #333; letter-spacing: 1px; }
.logo-text span { color: var(--accent-orange); }

.top-nav { display: flex; gap: 25px; }
.top-nav a { font-size: 15px; font-weight: 500; color: #444; position: relative; padding: 5px 0; }
.top-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent-orange); transition: width 0.3s; }
.top-nav a:hover { color: var(--accent-orange); }
.top-nav a:hover::after { width: 100%; }

/* ================= 布局容器 ================= */
.container { max-width: 1200px; margin: 30px auto; display: flex; gap: 30px; padding: 0 20px; align-items: flex-start; }
.main-content { flex: 1; min-width: 0; }
.sidebar { width: 340px; flex-shrink: 0; position: sticky; top: 90px; }

/* ================= 页面标题区 ================= */
.page-header { background: var(--bg-white); padding: 30px 35px; border-radius: 10px; margin-bottom: 25px; box-shadow: var(--shadow-card); border: 1px solid var(--border-color); }
.breadcrumb { font-size: 14px; color: var(--text-light); margin-bottom: 15px; }
.breadcrumb a { color: var(--text-light); }
.breadcrumb a:hover { color: var(--accent-blue); }
.breadcrumb span { margin: 0 8px; color: #ccc; }

.page-header h1 { font-size: 28px; color: #222; border-left: 5px solid var(--accent-orange); padding-left: 15px; margin-bottom: 10px; font-weight: 700; }
.page-desc { color: var(--text-sub); font-size: 15px; margin-top: 10px; padding-left: 20px; }

/* ================= 文章列表 ================= */
.article-list { display: flex; flex-direction: column; gap: 25px; }
.article-card { background: var(--bg-white); padding: 35px 40px; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: var(--shadow-card); transition: transform 0.3s, box-shadow 0.3s; }
.article-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: #d0d7de; }

.art-title-box { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 15px; }
.art-title { font-size: 24px; font-weight: 700; color: #222; line-height: 1.4; }
.word-count-badge {
    font-size: 13px;
    background: linear-gradient(135deg, #ff8f00, #ff6b00);
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(255, 107, 0, 0.3);
    white-space: nowrap;
}

.art-meta {
    font-size: 13px !important;
    background-color: #f5faff !important;  /* 更淡的蓝色背景 */
    border: 1px solid #d9ebff !important;  /* 更浅的边框 */
    border-radius: 20px !important;
    padding: 4px 12px !important;           /* 更小的内边距 */
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 12px;
}
.art-meta span {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #2c3e50 !important;
    font-weight: 400 !important;
}
.art-meta span svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: #1976d2;
}

.article-tags { 
    margin: 0 0 20px 0; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px;
}
.article-tags a { 
    display: inline-flex; align-items: center;
    font-size: 13px; color: var(--accent-blue); 
    background: #fff; 
    padding: 3px 12px 3px 26px;
    border-radius: 14px;
    border: 1px solid #bbdefb; 
    transition: all 0.3s; position: relative; font-weight: 500;
    line-height: 1.4;
    height: auto;
}
.article-tags a::before {
    content: ''; position: absolute; left: 8px; top: 50%; 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' fill='none' stroke='%231976d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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/path%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
}
.article-tags a:hover { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); transform: translateY(-2px); }
.article-tags a:hover::before { filter: brightness(0) invert(1); }

/* 正文 */
.art-content { font-size: 17px; line-height: 1.9; color: #333; text-align: justify; margin-bottom: 25px; }
.art-content p { margin-bottom: 1.2em; text-indent: 2em; }
.art-content strong, .art-content b { font-weight: 400; color: #333; }



/* ================= 侧边栏 (优化版) ================= */
.sidebar-widget { 
    background: var(--bg-white); 
    padding: 25px; 
    border-radius: 10px; 
    border: 1px solid var(--border-color);
    margin-bottom: 25px; 
    box-shadow: var(--shadow-card); 
}

.widget-title { 
    font-size: 18px; font-weight: 800; color: #222; 
    border-bottom: 2px solid #f0f2f5; padding-bottom: 12px; margin-bottom: 20px; 
    display: flex; align-items: center; gap: 10px;
    padding-left: 35px; position: relative;
}
.widget-title.icon-hot::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    /* 火焰图标颜色调整为更柔和的橙色 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff9800' stroke='none'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.1.2-2.2.5-3.3.3.9.8 1.8 1.5 2.8z'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
}
.widget-title.icon-tip::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb74d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='9' y1='18' x2='15' y2='18'%3E%3C/line%3E%3Cline x1='10' y1='22' x2='14' y2='22'%3E%3C/line%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 12 2 4.65 4.65 0 0 0 7.5 11.5c.76.76 1.23 1.52 1.41 2.5'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain;
}

/* ================= 侧边栏 - 立体清爽版 ================= */
.tag-cloud-box { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 10px; 
    padding: 8px; /* 为阴影留出空间 */
}

.cloud-tag { 
    /* 1. 基础造型 */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 2. 背景：极淡的微渐变，模拟磨砂玻璃质感，几乎无色但非纯平 */
    background: linear-gradient(145deg, #ffffff, #f7f9fc);
    
    /* 3. 字体与排版 */
    font-size: 13px;
    font-weight: 600;
    color: #4a5568; /* 高级灰，比纯黑更柔和 */
    padding: 8px 16px;
    border-radius: 99px; /* 完美圆角 */
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* 4. 核心立体感：三层光影系统 */
    /* 层1: 底部柔和扩散阴影 (营造悬浮高度) */
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05), 
        0 2px 4px -1px rgba(0, 0, 0, 0.03),
        /* 层2: 顶部高光边框 (模拟光线从左上角打入) */
        inset 0 1px 0 rgba(255, 255, 255, 1);
    
    /* 5. 精致边框：极细的浅灰边框，增加轮廓感 */
    border: 1px solid rgba(226, 232, 240, 0.8);
}

/* --- 权重区分策略：大站通常用字号 + 字重 + 微量色彩点缀 --- */

/* 小号：低调，接近背景 */
.ts-s { 
    font-size: 12px;
    padding: 6px 12px;
    color: #718096;
    background: linear-gradient(145deg, #f7f9fc, #edf2f7);
    box-shadow: 
        0 2px 4px -1px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 中号：标准状态 */
.ts-m { 
    font-size: 13px;
    color: #4a5568;
}

/* 大号：加粗，增加存在感 */
.ts-l { 
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    /* 微微加深背景，增加层级 */
    background: linear-gradient(145deg, #ffffff, #f0f4f8);
    box-shadow: 
        0 6px 8px -1px rgba(0, 0, 0, 0.08), 
        0 3px 5px -1px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* 特大号：品牌色点缀，视觉焦点 */
.ts-xl { 
    font-size: 15px;
    font-weight: 800;
    color: var(--accent-blue); /* 使用主题蓝 */
    background: linear-gradient(145deg, #ffffff, #ebf8ff); /* 极淡的蓝色背景倾向 */
    border-color: rgba(25, 118, 210, 0.15); /* 淡淡的蓝色边框 */
    box-shadow: 
        0 8px 10px -1px rgba(25, 118, 210, 0.1), /* 带一点蓝色的阴影 */
        0 4px 6px -1px rgba(25, 118, 210, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* --- 交互效果：大站级的细腻反馈 --- */

.cloud-tag:hover { 
    /* 1. 轻微上浮 */
    transform: translateY(-2px);
    
    /* 2. 文字变色：悬停时变成品牌橙色，引导点击 */
    color: var(--accent-orange);
    
    /* 3. 边框高亮 */
    border-color: rgba(255, 107, 0, 0.3);
    
    /* 4. 阴影加深，增强悬浮感 */
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1), 
        0 4px 6px -2px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 1);
        
    /* 特大号悬停时，阴影带点橙色光晕 */
}
.ts-xl:hover {
    box-shadow: 
        0 10px 15px -3px rgba(255, 107, 0, 0.15), 
        0 4px 6px -2px rgba(255, 107, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* 点击瞬间：真实的“按下”感 */
.cloud-tag:active { 
    transform: translateY(0);
    box-shadow: 
        0 1px 2px 0 rgba(0, 0, 0, 0.05), /* 阴影几乎消失 */
        inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); /* 内部阴影模拟凹陷 */
    border-color: rgba(226, 232, 240, 1);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .tag-cloud-box { gap: 8px; }
    .cloud-tag { 
        padding: 6px 12px; 
        font-size: 12px; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.04); 
    }
}
/* --- 标签云核心修改结束 --- */

.pagination { margin-top: 30px; text-align: center; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #ddd; border-radius: 8px; color: #666; background: #fff; font-weight: 500; }
.pagination a:hover { border-color: var(--accent-orange); color: var(--accent-orange); background: #fff5eb; }
.pagination .thisclass { background: var(--accent-blue); color: #fff; border-color: var(--accent-blue); cursor: default; }


.footer { background: #fff; border-top: 1px solid #eee; padding: 50px 20px; margin-top: 50px; text-align: center; }
.footer-logo { font-size: 20px; font-weight: 800; color: #333; margin-bottom: 15px; display: inline-block; }
.footer-logo span { color: var(--accent-orange); }
.footer-links { margin-bottom: 20px; }
.footer-links a { color: #666; margin: 0 10px; font-size: 14px; }
.copyright { color: #999; font-size: 13px; line-height: 2; }
.copyright a { color: #999; }

@media (max-width: 768px) {
    .header-inner { flex-direction: column; height: auto; padding: 15px; gap: 15px; }
    .top-nav { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .container { flex-direction: column; margin: 15px auto; }
    .sidebar { width: 100%; position: static; }
    .article-card { padding: 20px; }
    .widget-title { padding-left: 30px; }
    .widget-title::before { width: 18px; height: 18px; left: 5px; }
    .art-review {
        padding: 15px 20px !important;
    }
}

.pingyu_box {
  margin: 20px 0;
  background: #f0f7ff; 
  border: 1px solid #d0e8ff;
  border-left: 5px solid #4285F4; 
  border-radius: 8px;
  padding: 12px 18px; 
}

.pingyu_header {
  display: flex;
  align-items: center;
  gap: 8px; 
  margin-bottom: 10px;
  position: relative;
  padding-left: 30px;
}

.pingyu_header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; 
  height: 20px;
  /* SVG转成base64内置到CSS，无额外请求 */
  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' stroke-linecap='round' stroke-linejoin='round'%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-repeat: no-repeat;
  background-size: contain;
}
.pingyu_header h3 {
  font-size: 18px; 
  font-weight: 500 !important; 
  color: #4285F4; 
  margin: 0;
  padding: 0;
}

/* 评语内容区：虚线边框 + 老师批改红 */
.pingyu_content {
  background: #ffffff;
  border: 1px dashed #d0d7e2;
  border-radius: 6px;
  padding: 15px 18px; 
}
.pingyu_content,
.pingyu_content * {
  font-size: 18px; 
  line-height: 1.7;
  color: #FF0000 !important; 
  font-weight: 400 !important;
  font-family: "KaiTi", "STKaiti", "楷体", serif; 
  text-indent: 2em; 
}
.pingyu_content b,
.pingyu_content strong,
.pingyu_header h3 b,
.pingyu_header h3 strong {
  font-weight: 400 !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .pingyu_header h3 {
    font-size: 18px;
  }
  .pingyu_content {
    font-size: 14px;
    padding: 12px 15px;
  }
  .pingyu_box {
    padding: 12px 15px;
  }
}