* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Serif SC", serif;
    color: #2c2c2c;
    background: #fcf8f0;
    max-width: 780px;
    margin: 0 auto;
    padding: 30px 24px 50px;
    line-height: 2;
    font-size: 16px;
    transition: background 0.3s;
}

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 12px;
    border-bottom: 2px solid #d4b48c;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}

.logo-link {
    text-decoration: none;
    color: #5a2d0c;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}
.logo-link i { color: #d4a050; font-size: 22px; }

.nav-links { display: flex; gap: 16px; align-items: center; }
.nav-links a {
    color: #7a4a1a;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 14px;
    border: 1px solid #d4b48c;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.nav-links a:hover { background: #d4b48c; color: #fff; }

.article-title {
    text-align: center;
    padding: 16px 0 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid #d4b48c;
}
.article-title h1 {
    font-size: 26px;
    font-weight: bold;
    color: #3d1f00;
    letter-spacing: 4px;
}

.font-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px 0 4px;
    flex-wrap: wrap;
    border-top: 1px solid #e8ddd0;
    margin-top: 12px;
}
.font-label { font-size: 13px; color: #8a7a6a; }
.font-btn {
    background: transparent;
    border: 2px solid #d4b48c;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 14px;
    cursor: pointer;
    color: #7a6a5a;
    font-family: inherit;
}
.font-btn.active { background: #d4b48c; color: #fff;}
.font-divider { color: #ddd; }

.bg-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #d4b48c;
    cursor: pointer;
    padding: 0;
}
.bg-btn.active { border-color: #5a2d0c; box-shadow: 0 0 0 3px rgba(90,45,12,0.25); }
.bg-btn[data-bg="cream"] { background: #fcf8f0; }
.bg-btn[data-bg="green"] { background: #e8f5e9; }
.bg-btn[data-bg="gray"] { background: #f0f0f0; }
.bg-btn[data-bg="blue"] { background: #e3f2fd; }
.bg-btn[data-bg="dark"] { background: #1a1a2e; }

.article-content { padding: 4px 0; }
.article-content h3 {
    font-size: 17px;
    color: #5a2d0c;
    margin: 14px 0 8px 0;
    padding-left: 6px;
    border-left: 3px solid #d4b48c;
}
.article-content p { margin: 4px 0; text-indent: 2em; }
.article-content .indent {
    display: block;
    margin-left: 2em;
    padding-left: 12px;
    border-left: 2px solid #e0d5c8;
}
.article-content .indent-2 { margin-left: 4em; }

.download-link {
    text-align: center;
    margin-top: 20px;
    padding: 14px 0;
    background: #f5efe8;
    border-radius: 6px;
}
.download-link a {
    color: #5a2d0c;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 24px;
    border: 1px solid #d4b48c;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.download-link a:hover { background: #d4b48c; color: #fff; }

.site-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #d4b48c;
    text-align: center;
}
.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.footer-links a {
    color: #7a6a5a;
    text-decoration: none;
    font-size: 14px;
    padding: 4px 8px;
}
.footer-links a:hover { color: #3d1f00; background: #f5efe8; }
.copyright { color: #999; font-size: 13px; line-height: 1.8; }
.copyright .sutra { color: #b8a898; margin-top: 4px; letter-spacing: 2px; }

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d4b48c;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}
.back-to-top:hover { background: #5a2d0c; }

/* ===== 字体大小 ===== */
body.font-small .article-content { font-size: 14px; }
body.font-large .article-content { font-size: 18px; }

/* ===== 背景色 ===== */
body.bg-green { background: #e8f5e9; }
body.bg-gray { background: #f0f0f0; }
body.bg-blue { background: #e3f2fd; }
body.bg-dark {
    background: #1a1a2e;
    color: #d4d4d4;
}
body.bg-dark .article-title { border-bottom-color: #444; }
body.bg-dark .article-title h1 { color: #e8d5b8; }
body.bg-dark .article-content h3 { color: #d4b48c; border-left-color: #d4b48c; }
body.bg-dark .site-header { border-bottom-color: #444; }
body.bg-dark .logo-link { color: #e8d5b8; }
body.bg-dark .nav-links a { color: #d4b48c; border-color: #444; }
body.bg-dark .nav-links a:hover { background: #d4b48c; color: #1a1a2e; }
body.bg-dark .font-btn { border-color: #555; color: #b8a898; }
body.bg-dark .font-btn.active { background: #d4b48c; color: #1a1a2e; }
body.bg-dark .bg-btn { border-color: #555; }
body.bg-dark .bg-btn.active { border-color: #d4b48c; }
body.bg-dark .download-link { background: #2a2a3e; }
body.bg-dark .download-link a { color: #d4b48c; border-color: #444; }
body.bg-dark .download-link a:hover { background: #d4b48c; color: #1a1a2e; }
body.bg-dark .site-footer { border-top-color: #444; }
body.bg-dark .footer-links a { color: #a09888; }
body.bg-dark .footer-links a:hover { color: #e8d5b8; background: #2a2a3e; }
body.bg-dark .copyright { color: #666; }
body.bg-dark .copyright .sutra { color: #555; }
body.bg-dark .back-to-top { background: #d4b48c; color: #1a1a2e; }

@media (max-width: 480px) {
    body { padding: 16px 12px 30px; }
    .site-header { flex-direction: column; text-align: center; }
    .logo-link { justify-content: center; }
    .nav-links { justify-content: center; }
    .article-title h1 { font-size: 20px; }
    .article-content h3 { font-size: 15px; }
    .bg-btn { width: 24px; height: 24px; }
    .back-to-top { bottom: 16px; right: 16px; width: 38px; height: 38px; }
}