/* ==========================================================================
   CSS 变量定义：颜色配置中心
   ========================================================================== */
:root {
    /* --- 白天模式 (默认) --- */
    --p-bg: #ffffff;               /* 纸张背景 */
    --p-text: #333333;             /* 正文颜色 */
    --p-text-light: #666666;       /* 次级文字 */
    --p-text-lighter: #888888;     /* 辅助文字 */
    
    --p-brand: #b93a3a;            /* 品牌红 (标题/线条) */
    --p-border: #eee;              /* 通用边框 */
    --p-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 纸张阴影 */

    /* 引用框 (晨读金句) */
    --quote-border: #b93a3a;       /* 金句边框红 */
    --quote-bg: #fffbfb;           /* 金句整体背景(极淡红白) */
    --quote-inner-bg: #f9f0f0;     /* 金句内部背景(淡粉色) */
    --quote-text: #333;            /* 金句文字 */

    /* 申论应用框 */
    --p-app-bg: #f7f7f7;           /* 应用框背景 */
    --p-app-border: #999;          /* 应用框左侧线条 */

    /* 侧边栏/分析 */
    --p-sidebar-border: #eee;
    --p-label-bg: #eee;            /* 默认标签背景 */
    --p-label-text: #333;          /* 默认标签文字 */

    /* --- 高亮配色 (白天) --- */
    --hl-zld-color: #c0392b;           /* 总论点：红 */
    --hl-zld-border: #e74c3c;
    --hl-fld-color: #2980b9;           /* 分论点：蓝 */
    --hl-jj-bg: #fff3cd;               /* 金句：浅黄底 */
    --hl-jj-text: #856404;             /* 金句：深褐字 */
    --hl-ls-color: #27ae60;            /* 论述：绿 */
    --hl-al-bg: #fff5e6;               /* 案例：淡橙色 */
    --hl-al-color: #d35400;               /* 案例：深橙色 */
    --hl-dc-color: #8e44ad;            /* 对策：紫 */
}

/* --- 深色模式适配 (针对 MkDocs Material 'slate' 主题) --- */
[data-md-color-scheme="slate"], 
body[data-md-color-scheme="slate"] {
    --p-bg: #1e1e20;               /* 深灰背景 */
    --p-text: #e6e6e6;             /* 亮灰文字 */
    --p-text-light: #a0a0a0;
    --p-text-lighter: #707070;

    --p-brand: #ff6b6b;            /* 提亮红色，防深色背景下看不清 */
    --p-border: #333;
    --p-shadow: 0 4px 15px rgba(0,0,0,0.3);

    /* 引用框 (晨读金句) */
    --quote-border: #ff6b6b;       /* 边框亮红 */
    --quote-bg: #252525;           /* 整体背景 */
    --quote-inner-bg: #2a2020;     /* 内部深红褐 */
    --quote-text: #e6e6e6;

    /* 申论应用框 */
    --p-app-bg: #262626;
    --p-app-border: #666;

    /* 侧边栏/分析 */
    --p-sidebar-border: #333;
    --p-label-bg: #333;
    --p-label-text: #ccc;

    /* --- 高亮配色 (深色) --- */
    --hl-zld-color: #ff8787;       /* 柔和粉红 */
    --hl-zld-border: #ff6b6b;
    --hl-fld-color: #63b3ed;       /* 天蓝 */
    --hl-jj-bg: #4d3e00;           /* 深棕黄底 */
    --hl-jj-text: #ffeeba;         /* 亮黄字 */
    --hl-ls-color: #68d391;        /* 亮绿 */
    --hl-al-bg: #4b301b;           /* 深棕橙 */
    --hl-al-color: #ff9f43;           /* 亮橙色 */
    --hl-dc-color: #d6bcfa;        /* 亮紫 */
}

/* ==========================================================================
   1. 基础容器与结构
   ========================================================================== */

/* 主容器：模拟纸张 */
.daily-paper-wrapper {
    font-family: "LXGW WenKai", "Georgia", "Songti SC", "SimSun", serif;
    color: var(--p-text);
    line-height: 1.8;
    background-color: var(--p-bg);
    padding: 20px;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: var(--p-shadow);
    transition: background-color 0.3s, color 0.3s; /* 切换模式时的平滑过渡 */
}

/* 加载动画文字 */
.paper-loading {
    text-align: center;
    padding: 50px;
    color: var(--p-text-lighter);
    font-size: 18px;
}

/* 头部 Header */
.paper-header {
    border-bottom: 2px solid var(--p-brand);
    padding-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
}
.paper-header .brand {
    font-size: 32px;
    font-weight: bold;
    color: var(--p-brand);
    font-family: "SimHei", sans-serif;
    line-height: 1;
}
.paper-header .sub-brand {
    font-size: 14px;
    color: var(--p-text-light);
    font-weight: normal;
    margin-left: 10px;
}
.paper-header .meta {
    font-size: 12px;
    color: var(--p-text-lighter);
    text-align: right;
    line-height: 1.5;
}

/* ==========================================================================
   2. 晨读金句 (特殊红框样式)
   ========================================================================== */

.quote-wrapper {
    margin: 30px 0 50px 0;
    padding: 0 10px;
}

.quote-box {
    position: relative; /* 用于标题绝对定位 */
    border: 1px solid var(--quote-border);
    background-color: var(--quote-inner-bg);
    padding: 40px 30px 30px 30px;
    border-radius: 2px;
    margin-top: 15px;
}

/* 标题：晨读 · 金句 (压在边框上) */
.quote-title-badge {
    position: absolute;
    top: -14px; /* 上移，盖住边框 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    
    background-color: var(--p-bg); /* 背景色需与纸张一致，形成遮挡效果 */
    color: var(--quote-border);
    
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
    font-family: "SimSun", "Songti SC", serif;
    letter-spacing: 2px;
    white-space: nowrap;
}

.quote-content {
    text-align: center;
    font-family: "KaiTi", "Kaiti SC", "SimSun", serif;
    font-size: 18px;
    line-height: 2;
    color: var(--quote-text);
}

.quote-line { margin-bottom: 15px; }
.quote-line:last-child { margin-bottom: 0; }

/* ==========================================================================
   3. 通用板块 (政策/热点/案例)
   ========================================================================== */

.section-block {
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--p-border);
}
.section-title {
    font-size: 24px;
    border-left: 6px solid var(--p-brand);
    padding-left: 12px;
    margin-bottom: 20px;
    color: var(--p-text);
    font-weight: bold;
}
.section-title .tag {
    color: var(--p-brand);
}
.section-body {
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
}
.text-content {
    text-align: justify;
    font-size: 16px;
    color: var(--p-text);
}

/* 申论运用示例框 */
.application-box {
    background-color: var(--p-app-bg);
    padding: 15px 20px;
    border-radius: 6px;
    font-size: 15px;
    border-left: 4px solid var(--p-app-border);
    color: var(--p-text);
}
.app-title {
    color: var(--p-brand);
    font-weight: bold;
    margin-bottom: 8px;
}

/* ==========================================================================
   4. 深度文章 (Essay) 布局与样式
   ========================================================================== */

.article-section {
    border-top: 3px solid var(--p-brand);
    padding-top: 40px;
    margin-top: 40px;
}
.article-header {
    text-align: center;
    margin-bottom: 35px;
}
.main-title {
    font-size: 28px;
    color: var(--p-brand);
    font-weight: bold;
    margin-bottom: 15px;
}
.art-meta {
    font-size: 13px;
    color: var(--p-text-lighter);
    margin-bottom: 15px;
}
.art-tags .pill {
    display: inline-block;
    border: 1px solid var(--p-brand);
    color: var(--p-brand);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    margin: 0 4px;
}

/* 左右两栏布局 */
.article-layout {
    display: grid;
    grid-template-columns: 2.2fr 1fr; /* 左宽右窄 */
    gap: 40px;
    align-items: start;
}

/* 左侧正文 */
.article-main p {
    text-indent: 2em;
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 1.9;
    text-align: justify;
    color: var(--p-text);
}

/* --- 正文高亮样式 --- */
.hl-zld { /* 总论点: 红 */
    color: var(--hl-zld-color);
    font-weight: bold;
    border-bottom: 2px solid var(--hl-zld-border);
}
.hl-fld { /* 分论点: 蓝 */
    color: var(--hl-fld-color);
    font-weight: bold;
    border-bottom: 2px dotted var(--hl-fld-color);
}
.hl-jj { /* 金句: 黄底 */
    background-color: var(--hl-jj-bg);
    color: var(--hl-jj-text);
    padding: 2px 2px;
    border-radius: 2px;
}
.hl-ls { /* 论述: 绿 */
    color: var(--hl-ls-color);
    border-bottom: 1px solid var(--hl-ls-color);
}
.hl-al { /* 案例: 灰/斜体 */
    color: var(--hl-al-color);
    font-style: italic;
    background-color: var(--hl-al-bg);
    padding: 0 2px;
}
.hl-dc { /* 对策: 紫 */
    color: var(--hl-dc-color);
    font-weight: bold;
}

/* ==========================================================================
   5. 右侧侧边栏 (分析卡片)
   ========================================================================== */

.article-sidebar {
    background-color: transparent;
    padding-left: 20px;
    border-left: 1px solid var(--p-sidebar-border);
}
.analysis-card {
    margin-bottom: 30px;
}

/* 序号圆圈 */
.step-badge {
    background-color: var(--p-brand);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    display: inline-block;
    margin-right: 8px;
}
.step-title {
    color: var(--p-brand);
    font-weight: bold;
    font-size: 16px;
}

.analysis-point {
    margin-top: 10px;
    font-size: 14px;
    color: var(--p-text-light);
    line-height: 1.5;
}

/* --- 侧边栏标签样式 (与正文高亮颜色对应) --- */

/* 默认标签 */
.analysis-point .label {
    background-color: var(--p-label-bg);
    color: var(--p-text);
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 5px;
    border: 1px solid transparent; 
}

/* 总论点：红色系 */
.analysis-point .label-zld {
    color: var(--hl-zld-color);
    border-color: var(--hl-zld-color);
    background-color: var(--p-bg); /* 背景用纸张色，突出边框 */
}

/* 分论点：蓝色系 */
.analysis-point .label-fld {
    color: var(--hl-fld-color);
    border-color: var(--hl-fld-color);
    background-color: var(--p-bg);
}

/* 论述：绿色系 (下划线风格) */
.analysis-point .label-ls {
    color: var(--hl-ls-color);
    border-bottom: 2px solid var(--hl-ls-color);
    border-radius: 0;
    padding: 0 2px;
    background-color: transparent;
}

/* 金句：金色系 (色块填充) */
.analysis-point .label-jj {
    background-color: var(--hl-jj-bg);
    color: var(--hl-jj-text);
    border: none;
}

/* 案例：灰色/斜体系 */
.analysis-point .label-al {
    color: var(--hl-al-color);
    background-color: var(--hl-al-bg);
    font-style: italic;
    font-weight: normal;
}

/* 对策：紫色系 */
.analysis-point .label-dc {
    color: var(--hl-dc-color);
    border-color: var(--hl-dc-color);
    background-color: var(--p-bg);
}

/* ==========================================================================
   6. 移动端适配
   ========================================================================== */
@media (max-width: 768px) {
    .section-body {
        flex-direction: column;
    }
    .article-layout {
        grid-template-columns: 1fr; /* 单列 */
    }
    .article-sidebar {
        border-left: none;
        border-top: 1px solid var(--p-sidebar-border);
        padding-left: 0;
        padding-top: 20px;
        margin-top: 20px;
        background-color: var(--p-app-bg); /* 移动端加个底色区分 */
        padding: 15px;
        border-radius: 4px;
    }
}



/* ==========================================================================
   顶部控制栏样式 (Controls)
   ========================================================================== */

.daily-controls {
    display: flex;
    justify-content: space-between; /* 左右两组分开 */
    align-items: center;
    gap: 15px;
    margin: 20px auto 30px auto;
    padding: 12px 20px;
    max-width: 900px;
    background-color: var(--p-bg);
    border-radius: 8px;
    box-shadow: var(--p-shadow);
    flex-wrap: wrap; 
}

/* 左侧导航组 */
.dc-nav-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dc-date-group {
    display: flex;
    gap: 5px;
}

/* 右侧操作组 */
.dc-action-group {
    display: flex;
    gap: 8px;
}

/* 通用按钮 */
.dc-btn {
    background-color: var(--p-bg);
    border: 1px solid var(--p-border);
    color: var(--p-text);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dc-btn:hover {
    border-color: var(--p-brand);
    color: var(--p-brand);
}

.dc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(0,0,0,0.05);
}
.dc-btn:disabled:hover {
    border-color: var(--p-border);
    color: var(--p-text-lighter);
}

/* "查询"按钮 - 实心 */
.dc-btn-primary {
    background-color: var(--p-brand);
    color: #fff;
    border-color: var(--p-brand);
}
.dc-btn-primary:hover {
    opacity: 0.9;
    color: #fff;
}

/* 导出按钮 - 稍微强调 */
.dc-btn-outline {
    border-color: var(--p-border);
    color: var(--p-text-light);
}
.dc-btn-outline:hover {
    border-color: var(--p-brand);
    background-color: var(--p-app-bg);
}

/* 日期输入框 */
.dc-input {
    padding: 5px 8px;
    border: 1px solid var(--p-border);
    border-radius: 4px;
    background-color: var(--p-app-bg);
    color: var(--p-text);
    font-family: inherit;
    outline: none;
}
.dc-input:focus {
    border-color: var(--p-brand);
}

/* 移动端适配 */
@media (max-width: 700px) {
    .daily-controls {
        flex-direction: column; /* 上下排列 */
        align-items: stretch;
    }
    .dc-nav-group {
        justify-content: space-between;
    }
    .dc-action-group {
        justify-content: flex-end;
    }
}