/* ====== 通用样式 ====== */

* {
    box-sizing: border-box;
}

/* 强制所有标题颜色为 RGB(61, 50, 116) */
h1, h2, h3, h4, h5, h6,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.content main h1, .content main h2, .content main h3,
article h1, article h2, article h3,
h1 a.header, h2 a.header, h3 a.header, h4 a.header, h5 a.header, h6 a.header,
.content h1 a.header, .content h2 a.header, .content h3 a.header {
    color: rgb(61, 50, 116) !important;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Noto IKEA", "Noto Sans", "Verdana", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fefefd;
    margin: 0;
    padding: 0;
}

/* ====== 内容区域 ====== */
/* content：填满整个宽度，增加左右margin以优化竖版布局 */
.content {
    overflow-y: auto;
    padding: 60px 32px 100px 32px;
    background-color: #fefefd;
    width: calc(100% - 128px);
    max-width: calc(100% - 128px);
    margin: 0 64px;
}

/* card之间的垂直间距 - 在content层控制 */
/* 情况1：直接相邻的card */
.content .card + .card {
    margin-top: 16px;
}

/* 情况2：card-control之间的间距 */
.content .card-control + .card-control {
    margin-top: 16px;
}

/* 情况3：其他卡片容器之间的间距 */
.content .feature-card-group + .card-control,
.content .card-control + .feature-card-group,
.content .card-in-row + .card-control,
.content .card-control + .card-in-row {
    margin-top: 16px;
}

.content p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: #111111;
    margin-bottom: 24px;
    letter-spacing: 0.01em;
}

.content ol,
.content ul {
    margin-bottom: 24px;
    padding-left: 24px;
}

.content ol li {
    color: var(--heading-color) !important;
    font-weight: 300 !important;
}

.content ol li a {
    color: var(--heading-color) !important;
    font-weight: 600 !important;
}

.content li {
    margin-bottom: 12px;
}

/* ====== 标题样式 ====== */
.content h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
    color: #111 !important;
}

.content h2 {
    font-size: 24px !important;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 24px;
    margin-top: 48px;
    padding-bottom: 12px;
    border-bottom: 2px solid rgb(61, 50, 116);
    color: rgb(61, 50, 116) !important;
    scroll-margin-top: 100px;
}

/* 修复：从HTML块转换出来的h2文本强制变成标题 */
.content p:has(+ script) h2,
.content h2 {
    display: block !important;
}

.content h2 a[id] {
    display: none;
}

/* 确保 # 开头的行作为标题显示 */
.content h2 a.header {
    pointer-events: auto;
}

.content h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 16px;
    color: var(--heading-color);
}

.content h4 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 14px;
}

.content h5 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 12px;
}

.content h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 10px;
}

h2, h3 { margin-block-start: 2.5em; }
h4, h5 { margin-block-start: 2em; }

/* ====== 链接样式 ====== */
.content a {
    color: var(--link-color);
    text-decoration: none;
}

.content a:hover {
    text-decoration: underline;
}

/* ====== 引用样式 ====== */
.content blockquote {
    margin: 24px 0;
    padding: 16px 24px;
    background-color: var(--quote-bg);
    border-left: 4px solid var(--quote-border);
    border-radius: 0 4px 4px 0;
}

.content blockquote p {
    margin-bottom: 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* ====== 代码样式 ====== */
.content code {
    background-color: var(--inline-code-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Source Code Pro", monospace;
    font-size: 0.9em;
}

.content pre {
    background-color: var(--code-bg);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 24px 0;
}

.content pre code {
    background-color: transparent;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ====== 表格样式 ====== */
.content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
}

.content th,
.content td {
    padding: 12px 16px;
    border: 1px solid var(--table-border-color);
    text-align: left;
}

.content th {
    background-color: var(--table-row-odd-bg);
    font-weight: 600;
}

.content tr:nth-child(odd) {
    background-color: var(--table-row-odd-bg);
}

.content tr:hover {
    background-color: var(--table-row-hover-bg);
}

/* ====== 图片样式 ====== */
.content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* ====== 水平分隔线 ====== */
.content hr {
    border: none;
    height: 1px;
    background-color: var(--table-border-color);
    margin: 32px 0;
}

/* ====== 警告框 ====== */
.warning {
    position: relative;
    margin: 20px;
    padding: 0 20px;
    border-inline-start: 2px solid var(--warning-border);
}

.warning:before {
    position: absolute;
    width: 3rem;
    height: 3rem;
    margin-inline-start: calc(-1.5rem - 21px);
    content: "ⓘ";
    text-align: center;
    background-color: var(--bg);
    color: var(--warning-border);
    font-weight: bold;
    font-size: 2rem;
}

blockquote .warning:before {
    background-color: var(--quote-bg);
}

/* ====== 脚注样式 ====== */
.footnote-definition {
    font-size: 0.9em;
}

.footnote-definition ul,
.footnote-definition ol {
    padding-left: 20px;
}

.footnote-definition > li {
    position: relative;
}

.footnote-definition > li:target {
    scroll-margin-top: 50vh;
}

.footnote-reference:target {
    scroll-margin-top: 50vh;
}

.footnote-definition > li:target::before {
    border: 2px solid var(--footnote-highlight);
    border-radius: 6px;
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -32px;
    pointer-events: none;
    content: "";
}

@media not (prefers-reduced-motion) {
    .footnote-reference:target {
        animation: fn-highlight 0.8s;
        border-radius: 2px;
    }

    @keyframes fn-highlight {
        from {
            background-color: var(--footnote-highlight);
        }
    }
}

/* ====== 参考文献样式 ====== */
.content .references {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #EEEEEE;
}

.content .references h3 {
    font-family: "Noto IKEA", "Noto Sans", "Verdana", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 24px;
    line-height: 1.4;
}

.content .references .references-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.content .references .references-list li {
    font-family: "Noto IKEA", "Noto Sans", "Verdana", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #888888;
    line-height: 1.8;
    margin-bottom: 12px;
    letter-spacing: 0.01em;
    text-align: left;
}

.content .references .references-list li strong {
    font-weight: 600;
    color: #666666;
    margin-right: 4px;
}

.content .references .references-list li:last-child {
    margin-bottom: 0;
}

/* ====== 自定义样式 ====== */

/* 隐藏 markdown 横线 */
.content hr {
    display: none;
}

/* 主标题样式 */
.content .main-title {
    color: rgb(61, 50, 116) !important;
    font-family: "Noto IKEA", "Noto Sans", "Verdana", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.02em !important;
}

/* 二级标题样式 */
.content main h2 {
    color: rgb(61, 50, 116) !important;
    font-family: "Noto IKEA", "Noto Sans", "Verdana", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: 1.6em !important;
    font-weight: 500 !important;
    border-bottom: 3px solid rgb(44, 42, 53, 0.24) !important;
    padding-bottom: 12px !important;
    margin-top: 32px !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.02em !important;
}

/* ====== 卡片样式 ====== */
/* card本身：隐形边界，不控制间距 */
.card {
    background: #fefefd;
    padding: 16px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    height: 100%;
    box-sizing: border-box;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    gap: 24px;
    margin: 48px 0;
    align-items: stretch;
}

.card strong {
    color: #214021;
    font-weight: 600;
}

.card.chart-card {
    background: #FFFFFF;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 16px auto;
}

.card.chart-card p {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.card.chart-card p.chart-title {
    font-size: 16px;
}

.card.chart-card img {
    border: 0px solid #CCCCCC;
    border-radius: 0;
    display: block;
    margin: 0 auto;
}

/* ====== 特定卡片控制的margin ====== */
.card-control:nth-child(8) > div:first-child {
    margin-top: 16px;
}

/* ====== 图表网格布局 ====== */
/* card-control：隐形罩子，只控制宽度，无厚度 */
.card-control {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 !important;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.card-control > .card {
    width: 100%;
    min-width: 300px;
}

.card-control + .card-control {
    margin-top: 0;
}

/* card-in-row：隐形罩子，只控制card排列和gap */
.card-in-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
    align-items: stretch;
}

.card-in-row .card-control {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
}

.card-in-row .card-control .card,
.card-in-row .card-control .card.chart-card {
    margin: 0 !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ====== 图表标题 ====== */
.chart-title {
    font-size: 18px;
    font-weight: bold !important;
    color: var(--text-primary);
    margin-bottom: 6px !important;
    margin-top: 0;
    line-height: 1.4;
}

.chart-note {
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.5;
}

/* ====== 三列布局 ====== */
.intro-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.intro-three-col .col-img {
    height: 180px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.intro-three-col .col-img img {
    width: 100%;
    height: 180px;
    min-height: 100%;
    object-fit: cover;
    border-radius: 0;
    vertical-align: top;
    display: block;
    margin: 0 !important;
}

.intro-three-col .col-text {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
    background: rgba(44, 34, 54, 0.825) center/cover;
    color: #FFFFFF;
    padding-left: 16px;
    padding-top: 8px;
    height: 180px;
    border-radius: 0;
    margin: 0;
}

.intro-three-col .col-text h3 {
    font-size: 14px;
    font-weight: 400;
    margin: 0 0 8px 0;
    line-height: 1.5;
    word-break: break-word;
    color: #FFFFFF;
}

.intro-three-col .col-text h3 strong {
    font-weight: 600;
    color: #FFFFFF;
}

.intro-three-col .col-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #FFFFFF !important;
}

/* ====== 功能卡片组 ====== */
.feature-card-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 10px 0 5px 0;
    background: #FFFFFF;
    border: none;
    box-shadow: none;
}

.feature-card-group + .card-control {
    margin-top: 5px;
}

.feature-card-group .card-top {
    padding: 32px 0 0 0;
}

.feature-card-group .card-bottom {
    padding: 0 0 32px 0;
}

.feature-card-group .card-bottom p {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
    color: #111111;
    margin-bottom: 24px;
    letter-spacing: 0.01em;
    text-align: justify;
    text-justify: inter-character;
}

.feature-card-group .intro-three-col {
    gap: 16px;
}

/* ====== 参考内容卡片 ====== */
.ref-card {
    padding: 24px;
    height: auto;
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
    font-style: normal;
    text-align: justify;
    text-justify: inter-character;
    box-sizing: border-box;
    background: rgba(234, 237, 231, 0.3);
    border: none;
    border-radius: 8;
}

.ref-card p {
    font-size: 11px !important;
    margin: 0;
    line-height: 1.6;
}

/* ====== 响应式 ====== */
@media (max-width: 768px) {
    body {
        padding: 0 16px;
    }
    .content {
        padding: 0 16px 100px 16px;
    }
    .card-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .intro-three-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .card p, .card li {
        font-size: 16px;
    }
}

/* ====== 侧边栏控制 ====== */
#sidebar li.chapter-item > a::before {
    display: none !important;
    content: none !important;
}

#sidebar ol,
#sidebar li {
    list-style: none !important;
    padding-left: 0 !important;
}

#sidebar li a {
    padding: 3px 6px !important;
    font-size: 14px;
    white-space: nowrap;
}

#sidebar li {
    overflow: hidden;
    text-overflow: ellipsis;
}