@charset "UTF-8";
/* ============================================================
   1fuli -「乐无限」皮肤 fresh-20
   数值全部按 D8 原版对齐（导航 #4a4a4a | 主色 #428bca | 页面底 #eee
   卡片 #fff | 浅灰条 #f7f7f7 | 标签红 #d9534f | 正文 16px/1.8
   桌面容器 1320px / 侧栏 360px / 断点 1024·979·640·480）
   所有规则用 body.skin-fresh-20 限定，避免与引擎全局样式冲突
   ============================================================ */

/* ---------------- 基础 ---------------- */
body.skin-fresh-20 {
    margin: 0;
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: #555;
    background-color: #eee;
    overflow-x: hidden;
}
body.skin-fresh-20 a { color: #428bd1; text-decoration: none; }
body.skin-fresh-20 a:hover { color: #3071a9; }
body.skin-fresh-20 img { border: 0; vertical-align: middle; max-width: 100%; }
body.skin-fresh-20 p { margin: 0 0 10px; }
body.skin-fresh-20 h1, body.skin-fresh-20 h2, body.skin-fresh-20 h3,
body.skin-fresh-20 h4, body.skin-fresh-20 h5, body.skin-fresh-20 h6 {
    margin: 5px 0; font-family: inherit; font-weight: bold; color: inherit;
}
body.skin-fresh-20 h1 { font-size: 20px; font-weight: normal; line-height: 35px; }
body.skin-fresh-20 h2 { font-size: 17px; font-weight: normal; line-height: 35px; }
body.skin-fresh-20 h3 { font-size: 14px; font-weight: normal; line-height: 35px; }
body.skin-fresh-20 ul, body.skin-fresh-20 ol { margin: 0; padding: 0; list-style: none; }
body.skin-fresh-20 li { line-height: 20px; }
body.skin-fresh-20 .clearfix:after { content: ""; display: table; clear: both; }
body.skin-fresh-20 .muted { color: #999; }
body.skin-fresh-20 .container { max-width: 1320px; margin: 0 auto 15px; padding: 0; }
body.skin-fresh-20 .content-wrap { display: flex; align-items: flex-start; gap: 15px; }
body.skin-fresh-20 .content { flex: 1 1 auto; min-width: 0; }
body.skin-fresh-20 .sidebar { flex: 0 0 360px; width: 360px; }

/* ---------------- 标签徽章（D8 .label / .label-important） ---------------- */
body.skin-fresh-20 .label {
    position: relative; display: inline-block; padding: 4px 6px 3px;
    font-size: 10.152px; line-height: 14px; color: #fff;
    vertical-align: baseline; white-space: nowrap; background-color: #999;
    text-decoration: none;
}
body.skin-fresh-20 .label-important { background-color: #d9534f; }
body.skin-fresh-20 .label .label-arrow {
    position: absolute; top: 7px; right: -4px; width: 0; height: 0;
    border-left: 4px solid #000;
    border-top: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid rgba(0, 0, 0, 0);
}
body.skin-fresh-20 .label-important .label-arrow { border-left-color: #d9534f; }
body.skin-fresh-20 a.label:hover { color: #fff; }
body.skin-fresh-20 a.label-important:hover { background-color: #d33632; }
body.skin-fresh-20 a.label-important:hover .label-arrow { border-left-color: #d33632; }

/* ---------------- 顶部导航（深灰条只占 1320px 居中，两侧留页面底色） ---------------- */
body.skin-fresh-20 .navbar-wrap { background-color: transparent; }
body.skin-fresh-20 .navbar {
    height: 52px; background-color: #4a4a4a; position: relative;
    max-width: 1320px; margin: 0 auto;
    display: flex; align-items: center;
}
body.skin-fresh-20 .navbar:after { content: ""; display: table; clear: both; }
body.skin-fresh-20 .navbar .logo {
    flex: 0 0 230px; width: 230px; height: 52px; margin: 0;
    background-color: #428bca; display: flex; align-items: center; justify-content: center;
    overflow: hidden; font-size: 18px; font-weight: bold;
}
body.skin-fresh-20 .navbar .logo a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 52px; padding: 0 16px;
    color: #fff; font-size: 18px; font-weight: bold;
    overflow: hidden; white-space: nowrap;
}
body.skin-fresh-20 .navbar .logo a:hover { color: #fff; }
body.skin-fresh-20 .navbar .logo svg { width: 22px; height: 22px; fill: #fff; flex: 0 0 22px; }
body.skin-fresh-20 .navbar .nav { display: flex; align-items: center; height: 52px; margin: 0 10px 0 0; font-size: 14px; }
body.skin-fresh-20 .navbar .nav > li { position: relative; height: 52px; }
body.skin-fresh-20 .navbar .nav > li > a {
    display: block; height: 52px; line-height: 52px; padding: 0 20px;
    color: #eee; font-size: 14px;
}
body.skin-fresh-20 .navbar .nav > li > a:hover,
body.skin-fresh-20 .navbar .nav > li.active > a { background-color: #404040; color: #fff; }
body.skin-fresh-20 .navbar .menu-pull-right { margin-left: auto; display: flex; align-items: center; padding-right: 0; }
/* 搜索：白底输入框 + 绿色按钮 */
body.skin-fresh-20 .navbar .search-form { position: relative; display: flex; }
body.skin-fresh-20 .navbar .search-form input[type="text"],
body.skin-fresh-20 .navbar .search-form input[type="search"] {
    width: 180px; height: 30px; line-height: 30px; padding: 0 10px;
    border: none; border-radius: 2px 0 0 2px; background-color: #fff; color: #555;
    font-size: 12px; outline: none; font-family: inherit;
}
body.skin-fresh-20 .navbar .search-form input::placeholder { color: #999; }
body.skin-fresh-20 .navbar .search-form button {
    height: 30px; padding: 0 14px; border: none; border-radius: 0 2px 2px 0;
    background-color: #8cac52; color: #fff; font-size: 12px; cursor: pointer; font-family: inherit;
}
body.skin-fresh-20 .navbar .search-form button:hover { background-color: #7d9c46; }
/* 手机汉堡 */
body.skin-fresh-20 .navbar .btn-navbar {
    display: none; margin-left: auto; margin-right: 8px;
    width: 40px; height: 36px; border: none; background-color: #404040; cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
body.skin-fresh-20 .navbar .btn-navbar i { display: block; width: 18px; height: 2px; background-color: #f9f9f9; }

/* ---------------- 公告条 ---------------- */
body.skin-fresh-20 .speedbar {
    background-color: #f7f7f7; color: #666; font-size: 14px; line-height: 22px;
    padding: 10px 20px; max-width: 1320px; margin: 0 auto 10px;
    display: flex; align-items: center; gap: 10px;
}
body.skin-fresh-20 .speedbar .toptip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.skin-fresh-20 .speedbar .toptip a { color: #666; }
body.skin-fresh-20 .speedbar .toptip a:hover { color: #428bca; }
body.skin-fresh-20 .speedbar .speedbar-badge {
    flex: 0 0 auto; background-color: #428bca; color: #fff; font-size: 12px;
    padding: 1px 8px; border-radius: 2px;
}

/* ---------------- 栏目标题条 ---------------- */
body.skin-fresh-20 .title {
    position: relative; margin: 0; height: 37px; line-height: 37px; padding: 0 20px;
    font-size: 14px; font-weight: bold; color: #555;
    background-color: #f7f7f7; border-bottom: 1px solid #eaeaea;
    display: flex; align-items: center; justify-content: space-between;
}
body.skin-fresh-20 .banner-contenttop { margin-bottom: 1px; background: none; }

/* ---------------- 文章卡片（D8 .excerpt 原式） ---------------- */
body.skin-fresh-20 .excerpt {
    position: relative; background-color: #fff; margin-bottom: 1px;
    padding: 20px 20px 20px 256px; border-left: solid 4px #fff;
    transition: background-color .2s, border-color .2s;
}
body.skin-fresh-20 .excerpt:hover {
    border-left-color: #428bca; padding-left: 260px; margin-left: -4px; background-color: #f8fcfe;
}
body.skin-fresh-20 .excerpt .focus {
    float: left; width: 220px; margin-left: -240px; text-align: center;
    position: relative; overflow: hidden; display: table;
}
body.skin-fresh-20 .excerpt .focus a { display: table-cell; vertical-align: middle; width: 220px; height: 150px; }
body.skin-fresh-20 .excerpt .focus img { margin: 0 auto; max-width: 220px; max-height: 150px; }
body.skin-fresh-20 .excerpt header { margin: 0 40px 15px 0; }
body.skin-fresh-20 .excerpt header .label { margin-right: 5px; position: relative; top: -2px; }
body.skin-fresh-20 .excerpt h2 {
    display: inline; font-size: 20px; margin: 0; font-weight: normal;
    position: relative; top: 1px; line-height: 25px;
}
body.skin-fresh-20 .excerpt h2 a { color: #428bd1; }
body.skin-fresh-20 .excerpt h2 a:hover { color: #3071a9; }
body.skin-fresh-20 .excerpt .note {
    color: #777; font-size: 14px; line-height: 24px;
    word-break: break-word; margin-bottom: 0; overflow: hidden;
}
body.skin-fresh-20 .excerpt .muted { margin-right: 20px; color: #999; }
body.skin-fresh-20 .excerpt .muted a { color: #428bd1; }
body.skin-fresh-20 .excerpt .muted a:hover { color: #3071a9; }
body.skin-fresh-20 .excerpt .muted svg { width: 12px; height: 12px; fill: #bbb; margin-right: 3px; vertical-align: -1px; }
body.skin-fresh-20 .excerpt-nothumbnail { padding-left: 20px; }
body.skin-fresh-20 .excerpt-nothumbnail:hover { padding-left: 24px; }
body.skin-fresh-20 .excerpt-nothumbnail .focus { display: none; }
/* New 标记（本站附加） */
body.skin-fresh-20 .new-flag {
    display: inline-block; background-color: #d9534f; color: #fff;
    font-size: 10.152px; line-height: 14px; padding: 4px 6px 3px;
    margin-right: 5px; position: relative; top: -2px; font-weight: normal;
}

/* ---------------- 分页（D8 原式） ---------------- */
body.skin-fresh-20 .pagination { padding: 20px; background-color: #fff; text-align: center; }
body.skin-fresh-20 .pagination ul { display: inline-flex; flex-wrap: wrap; gap: 0; justify-content: center; }
body.skin-fresh-20 .pagination ul > li > a,
body.skin-fresh-20 .pagination ul > li > span {
    display: block; float: left; margin: 0 1px; padding: 4px 12px 3px; line-height: 20px;
    text-decoration: none; background-color: #eee; color: #666; font-size: 12px;
}
body.skin-fresh-20 .pagination ul > li > a:hover { background-color: #ccc; color: #444; }
body.skin-fresh-20 .pagination ul > li.active > span { background-color: #428bca; color: #fff; cursor: default; }
body.skin-fresh-20 .pagination ul > li.disabled > span { color: #999; background-color: rgba(0, 0, 0, 0); cursor: default; }

/* ---------------- 右侧栏 ---------------- */
body.skin-fresh-20 .widget { clear: both; margin-bottom: 15px; background-color: #fff; }
/* 标题按 D8 的 h2 基础样式：17px / 常规字重 / 行高 35px */
body.skin-fresh-20 .widget .widget-title {
    margin: 5px 0; padding: 10px 20px 0; height: auto; line-height: 35px;
    font-size: 17px; font-weight: normal; color: #555; background: none; border: none;
}
body.skin-fresh-20 .widget ul { padding: 0 20px 12px; }
body.skin-fresh-20 .widget ul li { line-height: 25px; font-size: 14px; color: #666; }
body.skin-fresh-20 .widget ul li a { color: #428bd1; }
body.skin-fresh-20 .widget ul li a:hover { color: #3071a9; }
/* 搜索 widget */
body.skin-fresh-20 .widget-search { padding: 15px 20px 16px; }
body.skin-fresh-20 .widget-search .widget-search-label { display: block; font-size: 17px; color: #555; line-height: 30px; margin-bottom: 8px; }
body.skin-fresh-20 .widget-search form { display: flex; }
body.skin-fresh-20 .widget-search input[type="text"],
body.skin-fresh-20 .widget-search input[type="search"] {
    flex: 1 1 auto; min-width: 0; height: 32px; line-height: 32px; padding: 0 10px; font-size: 13px;
    border: 1px solid #ccc; border-right: none; border-radius: 0; outline: none;
    font-family: inherit; color: #555; background: #fff;
}
body.skin-fresh-20 .widget-search input[type="text"]:focus { border-color: #999; }
body.skin-fresh-20 .widget-search button {
    flex: 0 0 auto; height: 32px; padding: 0 18px; border: none; border-radius: 0;
    background-color: #333; color: #fff; font-size: 13px; cursor: pointer; font-family: inherit;
}
body.skin-fresh-20 .widget-search button:hover { background-color: #111; }
/* 最新文章（本站附加） */
body.skin-fresh-20 .widget-posts ul { padding-bottom: 14px; }
body.skin-fresh-20 .widget-posts li { line-height: 22px; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; }
body.skin-fresh-20 .widget-posts li:last-child { border-bottom: none; }
body.skin-fresh-20 .widget-posts li a { display: block; color: #428bd1; font-size: 13px; }
body.skin-fresh-20 .widget-posts li a:hover { color: #3071a9; }
body.skin-fresh-20 .widget-posts li small { display: block; color: #bbb; font-size: 12px; }
/* 标签云（本站附加） */
body.skin-fresh-20 .tagcloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 20px 16px; }
body.skin-fresh-20 .tagcloud a {
    display: inline-block; padding: 2px 10px; font-size: 12px;
    background-color: #f4f4f4; color: #666; border-radius: 2px;
}
body.skin-fresh-20 .tagcloud a:hover { background-color: #428bca; color: #fff; }

/* ---------------- 面包屑 ---------------- */
body.skin-fresh-20 .breadcrumbs {
    margin: 0 0 1px; padding: 9px 20px 7px; background-color: #f7f7f7;
    font-size: 12px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.skin-fresh-20 .breadcrumbs a { color: #428bd1; }
body.skin-fresh-20 .breadcrumbs a:hover { color: #3071a9; }
body.skin-fresh-20 .breadcrumbs small { font-size: 12px; font-family: serif; color: #bbb; margin: 0 2px; font-weight: bold; }

/* ---------------- 文章头 ---------------- */
body.skin-fresh-20 .article-header {
    position: relative; background-color: #fbfbfb; margin-bottom: 1px;
    padding: 5px 20px 15px;
}
body.skin-fresh-20 .article-header h1.article-title {
    font-size: 22px; line-height: 32px; font-weight: bold; margin: 5px 0 10px; color: #333;
}
body.skin-fresh-20 .article-header h1.article-title a { color: #333; }
body.skin-fresh-20 .article-header .meta { font-size: 12px; color: #999; margin: 0; }
body.skin-fresh-20 .article-header .meta .muted,
body.skin-fresh-20 .article-header .meta span { margin-right: 20px; color: #999; }
body.skin-fresh-20 .article-header .meta a { color: #428bd1; }
body.skin-fresh-20 .article-header .meta a:hover { color: #3071a9; }
body.skin-fresh-20 .article-header .meta svg { width: 12px; height: 12px; fill: #bbb; margin-right: 3px; vertical-align: -1px; }

/* ---------------- 正文（D8 原式） ---------------- */
body.skin-fresh-20 .article-content {
    position: relative; background-color: #fff; padding: 20px 20px 1px;
    font-size: 16px; line-height: 1.8; color: #555;
    word-wrap: break-word; text-align: justify;
}
body.skin-fresh-20 .article-content p { margin: 0 0 20px; }
body.skin-fresh-20 .article-content img { max-width: 100%; height: auto; }
body.skin-fresh-20 .article-content h1 { font-size: 22px; margin: 20px 0; font-weight: bold; }
body.skin-fresh-20 .article-content h2 {
    font-size: 20px; font-weight: bold;
    margin: 20px -20px 20px -24px; padding: 10px 20px;
    border-left: 4px solid #428bca; background-color: #fbfbfb;
}
body.skin-fresh-20 .article-content h3,
body.skin-fresh-20 .article-content h4,
body.skin-fresh-20 .article-content h5,
body.skin-fresh-20 .article-content h6 {
    border-bottom: #eee 1px solid; padding-bottom: 2px; margin-bottom: 20px; font-weight: bold;
}
body.skin-fresh-20 .article-content h3 { font-size: 18px; }
body.skin-fresh-20 .article-content h4 { font-size: 16px; }
body.skin-fresh-20 .article-content h5 { font-size: 14px; }
body.skin-fresh-20 .article-content h6 { font-size: 12px; }
body.skin-fresh-20 .article-content a { color: #428bca; text-decoration: underline; }
body.skin-fresh-20 .article-content a:hover { color: #d9534f; }
body.skin-fresh-20 .article-content ul { margin: 0 0 20px 26px; list-style: none; }
body.skin-fresh-20 .article-content ul li {
    padding-left: 20px; margin-bottom: 10px; line-height: 25px; position: relative; list-style: disc;
}
body.skin-fresh-20 .article-content ol { margin: 20px; list-style: decimal; }
body.skin-fresh-20 .article-content ol li { list-style: decimal; margin-left: 28px; line-height: 25px; }
body.skin-fresh-20 .article-content blockquote {
    margin: 15px auto; border: 1px solid #d6e9c6; border-left-width: 3px;
    padding: 10px 15px 5px; background-color: #f4ffef;
    font-size: 12px; line-height: 20px; color: #555;
}
body.skin-fresh-20 .article-content blockquote p { margin: 0 0 5px; font-size: 12px; line-height: 20px; }
body.skin-fresh-20 .article-content pre {
    margin: 20px 0; font: 12px/20px "courier new", Consolas, monospace;
    background: #4a4a4a; padding: 10px 20px; color: #f8f8d4;
    border-radius: 0; border: none; overflow-x: auto; word-break: break-all;
}
body.skin-fresh-20 .article-content code { font-family: Consolas, Monaco, "courier new", monospace; }
body.skin-fresh-20 .article-content table { border-top: solid 1px #ddd; border-left: solid 1px #ddd; width: 100%; margin-bottom: 20px; border-collapse: collapse; }
body.skin-fresh-20 .article-content table th { background-color: #f9f9f9; text-align: center; }
body.skin-fresh-20 .article-content table td,
body.skin-fresh-20 .article-content table th { border-bottom: solid 1px #ddd; border-right: solid 1px #ddd; padding: 5px 10px; }

/* ---------------- 文章页脚 / 标签 ---------------- */
body.skin-fresh-20 .article-footer {
    position: relative; background-color: #fff; border-top: 1px solid #f7f7f7;
    padding: 15px 20px; overflow: hidden; font-size: 12px; color: #999;
}
body.skin-fresh-20 .article-footer .itag { padding-top: 0; }
body.skin-fresh-20 .article-footer .itag a {
    border-style: solid; border-width: 1px; border-color: #e2e2e2 #ddd #ddd #e2e2e2;
    display: inline-block; margin-right: 3px; border-radius: 1px; padding: 0 5px;
    line-height: 18px; color: #428bd1;
}
body.skin-fresh-20 .article-footer .itag a:hover { border-color: #428bca; color: #3071a9; }
body.skin-fresh-20 .article-meta-extra { padding-top: 8px; color: #aaa; line-height: 22px; }

/* ---------------- 上一篇 / 下一篇（D8 原式） ---------------- */
body.skin-fresh-20 .article-nav {
    border-top: 1px solid #f2f2f2; background-color: #fbfbfb;
    overflow: hidden; padding: 15px 20px; font-size: 14px; color: #bbb;
}
body.skin-fresh-20 .article-nav > span { float: left; position: relative; width: 48%; }
body.skin-fresh-20 .article-nav > span > span { display: block; color: #bbb; font-size: 12px; }
body.skin-fresh-20 .article-nav > span.article-nav-next { float: right; text-align: right; }
body.skin-fresh-20 .article-nav a { color: #428bd1; }
body.skin-fresh-20 .article-nav a:hover { color: #3071a9; }

/* ---------------- 相关文章（D8 原式） ---------------- */
body.skin-fresh-20 .relates {
    overflow: hidden; background-color: #fff; border-top: 1px solid #f2f2f2; margin-bottom: 15px;
}
body.skin-fresh-20 .relates h3 {
    font-size: 18px; line-height: 1; padding: 15px 20px 0; margin-bottom: 0; font-weight: bold;
    background: none; border: none; height: auto;
}
body.skin-fresh-20 .relates ul { padding: 15px 0 15px 20px; overflow: hidden; font-size: 14px; display: block; }
body.skin-fresh-20 .relates li { float: left; width: 50%; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.skin-fresh-20 .relates li:before { content: none; }
body.skin-fresh-20 .relates a { margin-right: 20px; color: #428bd1; }
body.skin-fresh-20 .relates a:hover { color: #3071a9; }

/* ---------------- 评论区 ---------------- */
body.skin-fresh-20 .comment-area { background-color: #fff; margin-bottom: 15px; }
body.skin-fresh-20 .comment-area .comment-title {
    overflow: hidden; padding: 12px 20px; background-color: #f7f7f7; border-bottom: 1px solid #eee;
    font-size: 14px; font-weight: bold; color: #555; margin: 0; line-height: 30px;
}
body.skin-fresh-20 .comment-area .comt-count { float: right; color: #999; font-weight: normal; }
body.skin-fresh-20 .comment-list { padding: 10px 20px 0; }
body.skin-fresh-20 .comment-item { padding: 12px 0; border-bottom: 1px dashed #f2f2f2; display: flex; gap: 10px; }
body.skin-fresh-20 .comment-item:last-child { border-bottom: none; }
body.skin-fresh-20 .comt-avatar {
    flex: 0 0 28px; width: 28px; height: 28px; border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: bold;
}
body.skin-fresh-20 .comment-main { flex: 1; min-width: 0; }
body.skin-fresh-20 .comment-main .comt-author { font-size: 16px; color: #666; margin: 2px 0 4px; }
body.skin-fresh-20 .comment-main .comt-author span { color: #bbb; margin-left: 10px; font-size: 12px; }
body.skin-fresh-20 .comment-main .comt-text { font-size: 14px; line-height: 24px; color: #555; word-break: break-word; }
body.skin-fresh-20 .comment-reply {
    margin-top: 8px; background-color: #f4ffef; border-left: 3px solid #56af45;
    padding: 8px 12px; font-size: 13px; line-height: 22px; color: #666;
}
body.skin-fresh-20 .comment-reply b { color: #3d8b30; }
body.skin-fresh-20 .comt-empty { padding: 20px; color: #bbb; font-size: 14px; }
body.skin-fresh-20 .comment-form { padding: 0 20px 20px; }
body.skin-fresh-20 .comment-form .row { display: flex; gap: 12px; margin-bottom: 10px; }
body.skin-fresh-20 .comment-form .row > div { flex: 1; min-width: 0; }
body.skin-fresh-20 .comment-form input[type="text"],
body.skin-fresh-20 .comment-form textarea {
    width: 100%; border: 1px solid #ddd; border-radius: 0; padding: 8px 10px;
    font-size: 14px; font-family: inherit; color: #555; outline: none; box-sizing: border-box;
}
body.skin-fresh-20 .comment-form input[type="text"]:focus,
body.skin-fresh-20 .comment-form textarea:focus { border-color: #bbb; }
body.skin-fresh-20 .comment-form textarea { height: 100px; resize: vertical; line-height: 24px; }
body.skin-fresh-20 .comment-form .hint { font-size: 12px; color: #bbb; text-align: right; margin: 4px 0 8px; }
body.skin-fresh-20 .comment-form button {
    display: block; margin-left: auto;
    height: 34px; padding: 0 30px; border: none; border-radius: 0;
    background-color: #428bca; color: #fff; font-size: 14px; cursor: pointer; font-family: inherit;
}
body.skin-fresh-20 .comment-form button:hover { background-color: #337ab7; }
body.skin-fresh-20 .comment-alert { margin: 0 20px 12px; padding: 8px 12px; background-color: #fdf7f7; border-left: 3px solid #d9534f; color: #d9534f; font-size: 13px; }
body.skin-fresh-20 .comment-ok { margin: 0 20px 12px; padding: 8px 12px; background-color: #f4ffef; border-left: 3px solid #56af45; color: #3d8b30; font-size: 13px; }

/* 加密文章解锁 */
body.skin-fresh-20 .unlock-box { background-color: #fff; padding: 40px 20px; text-align: center; }
body.skin-fresh-20 .unlock-box p { font-size: 14px; color: #999; margin-bottom: 16px; }
body.skin-fresh-20 .unlock-box input { height: 34px; padding: 0 12px; border: 1px solid #ddd; border-radius: 0; font-size: 14px; outline: none; }
body.skin-fresh-20 .unlock-box button {
    height: 34px; padding: 0 20px; border: none; border-radius: 0;
    background-color: #428bca; color: #fff; font-size: 14px; cursor: pointer; margin-left: 6px;
}

/* ---------------- 页脚（D8 原式：1320 居中 + 20px 蓝左框） ---------------- */
body.skin-fresh-20 .footer { clear: both; position: relative; z-index: 1; color: #ddd; text-shadow: 0 -1px 0 #333; }
body.skin-fresh-20 .footer-inner {
    max-width: 1320px; margin: 0 auto; padding: 16px 20px 14px;
    background-color: #414141; border-left: 20px solid #428bca;
    color: #aaa; text-shadow: 0 -1px 0 #333; font-size: 12px; line-height: 22px;
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
    box-sizing: border-box;
}
body.skin-fresh-20 .footer-inner a { color: #aaa; }
body.skin-fresh-20 .footer-inner a:hover { color: #ddd; text-decoration: underline; }
body.skin-fresh-20 .site-footer { display: flex; flex-wrap: wrap; gap: 4px 18px; }
body.skin-fresh-20 .site-footer p { margin: 0; }

/* 空状态 */
body.skin-fresh-20 .empty-tip { background-color: #fff; padding: 60px 20px; text-align: center; color: #bbb; font-size: 14px; }

/* ---------------- 页面底部功能条（引擎工具条：首页/选择皮肤/PC版/登录/音乐/写文章）
   按页面流排列，跟在页脚版权信息下面，随页面一起滚动、滚过去就看不见 ---------------- */
body.skin-fresh-20 .blog-toolbar {
    position: static; top: auto; left: auto; right: auto; bottom: auto;
    transform: none; width: 100%; max-width: 1320px; margin: 0 auto;
    background-color: #414141; border-left: 20px solid #428bca; border-top: 1px solid #3a3a3a;
    padding: 10px 20px; border-radius: 0; white-space: normal; z-index: auto; box-shadow: none;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
    box-sizing: border-box;
}
body.skin-fresh-20 .blog-toolbar button,
body.skin-fresh-20 .blog-toolbar a {
    font-size: 12px; padding: 5px 12px; border-radius: 3px; line-height: 1.2;
    border: none; cursor: pointer; font-family: inherit; white-space: nowrap;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 1380px) {
    body.skin-fresh-20 .container,
    body.skin-fresh-20 .navbar,
    body.skin-fresh-20 .speedbar,
    body.skin-fresh-20 .footer-inner,
    body.skin-fresh-20 .blog-toolbar { max-width: 100%; }
    body.skin-fresh-20 .container { padding-left: 15px; padding-right: 15px; }
    body.skin-fresh-20 .speedbar { padding-left: 15px; padding-right: 15px; }
    body.skin-fresh-20 .navbar { padding-left: 15px; padding-right: 15px; }
    body.skin-fresh-20 .navbar .logo { margin-left: -15px; }
}
@media (max-width: 1024px) {
    body.skin-fresh-20 .content-wrap { display: block; }
    body.skin-fresh-20 .sidebar { width: 100%; flex: none; margin-top: 15px; }
}
@media (max-width: 979px) {
    body.skin-fresh-20 .navbar .nav { display: none; }
    body.skin-fresh-20 .navbar .btn-navbar { display: flex; }
    body.skin-fresh-20 .navbar .logo { flex: 0 0 auto; min-width: 150px; }
    body.skin-fresh-20 .navbar .search-form input[type="text"],
    body.skin-fresh-20 .navbar .search-form input[type="search"] { width: 130px; }
    body.skin-fresh-20 .navbar .nav.nav-open {
        display: block; position: absolute; top: 52px; left: 0; right: 0;
        background-color: #404040; height: auto; margin: 0; z-index: 1001;
    }
    body.skin-fresh-20 .navbar .nav.nav-open > li { height: auto; }
    body.skin-fresh-20 .navbar .nav.nav-open > li > a { height: 44px; line-height: 44px; padding: 0 20px; border-bottom: 1px solid #4a4a4a; }
}
@media (max-width: 768px) {
    body.skin-fresh-20 .speedbar { display: none; }
}
@media (max-width: 640px) {
    /* 手机端顶部导航：logo 限宽 + 搜索框吃掉剩余宽度，绝不横向溢出 */
    body.skin-fresh-20 .navbar { padding-left: 0; padding-right: 8px; }
    body.skin-fresh-20 .navbar .logo { flex: 0 0 auto; width: auto; min-width: 0; max-width: 45%; margin-left: 0; }
    body.skin-fresh-20 .navbar .logo a { padding: 0 10px; font-size: 14px; gap: 0; }
    body.skin-fresh-20 .navbar .logo svg { display: none; }
    body.skin-fresh-20 .navbar .btn-navbar { flex: 0 0 38px; width: 38px; margin: 0 6px 0 auto; }
    body.skin-fresh-20 .navbar .menu-pull-right { flex: 1 1 0; min-width: 0; width: auto; overflow: hidden; }
    body.skin-fresh-20 .navbar .search-form { width: 100%; min-width: 0; }
    body.skin-fresh-20 .navbar .search-form input[type="text"],
    body.skin-fresh-20 .navbar .search-form input[type="search"] {
        flex: 1 1 0; width: 0; min-width: 0; text-align: center;
    }
    body.skin-fresh-20 .navbar .search-form button { flex: 0 0 auto; width: auto; padding: 0 8px; }

    /* 卡片：缩略图转为居中的 220×150（与 D8 手机端一致），文字铺满整行 */
    body.skin-fresh-20 .excerpt, body.skin-fresh-20 .excerpt:hover { padding: 15px; margin-left: 0; border-left-width: 4px; border-left-color: #fff; }
    body.skin-fresh-20 .excerpt .focus { float: none; margin-left: 0; width: 100%; display: block; text-align: center; margin-bottom: 10px; }
    body.skin-fresh-20 .excerpt .focus a { display: block; margin: 0 auto; width: 220px; height: 150px; }
    body.skin-fresh-20 .excerpt .focus img { width: auto; height: auto; max-width: 220px; max-height: 150px; margin: 0 auto; }
    body.skin-fresh-20 .excerpt header { margin: 0 0 10px; }
    body.skin-fresh-20 .excerpt h2 { font-size: 17px; line-height: 24px; }
    body.skin-fresh-20 .excerpt .note { font-size: 13px; line-height: 22px; }
    body.skin-fresh-20 .article-header h1.article-title { font-size: 19px; line-height: 28px; }
    body.skin-fresh-20 .article-content { font-size: 15px; }
    body.skin-fresh-20 .article-content h2 { margin-left: -20px; margin-right: -20px; }
    body.skin-fresh-20 .relates li { float: none; width: 100%; }
    body.skin-fresh-20 .comment-form .row { flex-direction: column; gap: 8px; }
    body.skin-fresh-20 .container { padding: 0 10px; }
    body.skin-fresh-20 .blog-toolbar { padding: 4px 6px; gap: 4px; }
    body.skin-fresh-20 .blog-toolbar button,
    body.skin-fresh-20 .blog-toolbar a { font-size: 11px; padding: 4px 8px; }
}
@media (max-width: 480px) {
    body.skin-fresh-20 .navbar .logo a { font-size: 13px; padding: 0 8px; }
    body.skin-fresh-20 .excerpt .muted { margin-right: 12px; }
    body.skin-fresh-20 .article-header,
    body.skin-fresh-20 .article-content,
    body.skin-fresh-20 .article-footer,
    body.skin-fresh-20 .breadcrumbs { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================
 * Fangg：文章目录 TOC · 代码高亮 · 复制按钮 · 回到顶部 · 搬运来源
 * ============================================================ */
.article-content pre {
    position: relative; background: #f6f8fa; border: 1px solid #eaecef; border-radius: 6px;
    padding: 12px 14px; overflow: auto; font-size: 13.5px; line-height: 1.75; margin: 14px 0;
    -webkit-overflow-scrolling: touch;
}
.article-content pre code { background: none; padding: 0; font-family: Consolas, Monaco, "Courier New", monospace; }
.article-content code { background: #f2f2f2; padding: 2px 5px; border-radius: 3px; font-size: 13px; font-family: Consolas, Monaco, monospace; color: #c7254e; }
.article-content pre .fangg-copy {
    position: absolute; top: 6px; right: 8px; font-size: 12px; padding: 2px 9px;
    border: 1px solid #ddd; background: #fff; color: #888; border-radius: 3px; cursor: pointer;
    opacity: 0; transition: opacity .2s; font-family: inherit;
}
.article-content pre:hover .fangg-copy { opacity: 1; }
.fangg-toc {
    background: #fafafa; border: 1px solid #eee; border-left: 4px solid #428bca;
    border-radius: 4px; padding: 10px 16px; margin: 0 0 18px; font-size: 14px;
}
.fangg-toc summary { cursor: pointer; font-weight: bold; color: #428bca; outline: none; list-style: none; }
.fangg-toc summary::-webkit-details-marker { display: none; }
.fangg-toc-list { margin: 10px 0 4px; padding-left: 22px; }
.fangg-toc-list li { margin: 5px 0; line-height: 1.65; }
.fangg-toc-list li.lv3 { list-style: circle; margin-left: 16px; font-size: 13px; }
.fangg-toc-list a { color: #555; text-decoration: none; }
.fangg-toc-list a:hover, .fangg-toc-list a.on { color: #428bca; font-weight: bold; }
.fangg-totop {
    display: none; position: fixed; right: 18px; bottom: 74px; width: 40px; height: 40px; line-height: 38px;
    text-align: center; background: rgba(66,139,202,.92); color: #fff !important; border-radius: 50%;
    font-size: 15px; z-index: 999; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.fangg-totop:hover { background: #428bca; }
.fangg-source {
    background: #f7f7f7; border-left: 4px solid #428bca; padding: 10px 14px; margin: 20px 0 6px;
    color: #666; font-size: 13.5px; border-radius: 3px; line-height: 1.9;
}
.fangg-source a { color: #428bca; word-break: break-all; }
@media (max-width: 979px) { .fangg-totop { right: 10px; bottom: 64px; width: 36px; height: 36px; line-height: 34px; } }
@media (max-width: 768px) { .fangg-toc { font-size: 13px; padding: 8px 12px; } .fangg-toc-list { padding-left: 18px; } }
/* ===== 用户登录状态栏（注册制） ===== */
.user-chip { display:inline-flex; align-items:center; gap:8px; margin-left:10px; }
.user-chip .uc-name { color:#555; font-size:13px; text-decoration:none; }
.user-chip .uc-name:hover { color:#428bca; }
.user-chip .uc-reg { background:#d9534f; color:#fff !important; padding:5px 12px; border-radius:3px; font-size:13px; text-decoration:none; }
.user-chip .uc-reg:hover { background:#c9302c; }
.user-chip .uc-out { color:#999; font-size:12px; text-decoration:none; }
.user-chip .uc-out:hover { color:#d9534f; }

/* ============================================================
 * 乐无限（fresh-20）· 文章分享模块样式
 * 配色沿用主题：主色 #428bca / 浅灰底 #f7f7f7 / 2-3px 圆角
 * ============================================================ */
.f20-share {
    margin: 22px 0 0;
    padding: 14px 16px 12px;
    background: #f7f7f7;
    border: 1px solid #ececec;
    border-radius: 3px;
}
.f20-share-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: bold; color: #555;
    margin-bottom: 10px;
}
.f20-share-head svg { width: 15px; height: 15px; fill: #428bca; }
.f20-share-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.f20-share-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 14px; font-size: 13px; line-height: 1.6;
    color: #666; background: #fff; border: 1px solid #ddd; border-radius: 2px;
    cursor: pointer; text-decoration: none; transition: all .18s; font-family: inherit;
}
.f20-share-btn:hover { color: #fff; background: #428bca; border-color: #428bca; }
.f20-share-btn.wechat:hover { background: #09bb07; border-color: #09bb07; }
.f20-share-btn.weibo:hover  { background: #e6162d; border-color: #e6162d; }
.f20-share-btn.qzone:hover  { background: #ffa200; border-color: #ffa200; }
.f20-share-tip { font-size: 12px; color: #27ae60; margin-left: 2px; }
.f20-share-sub { margin-top: 10px; font-size: 12px; color: #9b9b9b; }

/* ---------- 二维码弹层 ---------- */
.f20-qr-mask {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(20, 24, 30, .5);
    align-items: center; justify-content: center; padding: 20px;
}
.f20-qr-mask.show { display: flex; }
.f20-qr-card {
    position: relative; width: 300px; max-width: 92vw;
    padding: 22px 22px 18px; text-align: center;
    background: #fff; border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.f20-qr-title { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 14px; }
.f20-qr-box {
    width: 200px; height: 200px; margin: 0 auto; padding: 8px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #eee; border-radius: 3px;
}
.f20-qr-box img, .f20-qr-box canvas {
    display: block; width: 184px !important; height: 184px !important;
}
.f20-qr-url {
    margin: 12px 0 14px; font-size: 11px; color: #999;
    line-height: 1.6; word-break: break-all; max-height: 46px; overflow: hidden;
}
.f20-qr-actions { display: flex; gap: 8px; justify-content: center; }
.f20-qr-close {
    position: absolute; top: 6px; right: 8px;
    width: 28px; height: 28px; line-height: 26px;
    border: none; background: transparent;
    font-size: 22px; color: #bbb; cursor: pointer;
}
.f20-qr-close:hover { color: #666; }

@media (max-width: 979px) {
    .f20-share { margin-top: 16px; padding: 12px; }
    .f20-share-btn { padding: 5px 10px; font-size: 12px; }
    .f20-qr-card { padding: 20px 16px 16px; }
    .f20-qr-box { width: 190px; height: 190px; }
    .f20-qr-box img, .f20-qr-box canvas { width: 172px !important; height: 172px !important; }
}

/* ===== 分享预览（免登录阅读）提示 ===== */
.f20-share-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 14px; background: #f0f7fd; border: 1px solid #d3e6f5; border-left: 3px solid #428bca; border-radius: 3px; color: #3a6787; font-size: 13.5px; line-height: 1.7; }
.f20-share-notice b { color: #2f6d9e; }
.f20-share-notice a { color: #428bca; font-weight: 700; text-decoration: none; }
.f20-share-notice a:hover { text-decoration: underline; }
.comment-login-tip { margin-top: 6px; padding: 16px 18px; background: #f7f7f7; border: 1px solid #ececec; border-radius: 3px; color: #777; font-size: 14px; text-align: center; }
.comment-login-tip a { color: #428bca; font-weight: 700; text-decoration: none; }
.comment-login-tip a:hover { text-decoration: underline; }
@media (max-width: 640px) { .f20-share-notice { font-size: 13px; padding: 9px 12px; } }