@charset "UTF-8";
/*!
 * Rizhi Plus 7.9 — 主样式
 * 配色 / 宽度 / 字号 / 字体由后台设置通过 :root 变量注入，见 header.php
 */

/* ============================================================
 * 0. 变量兜底（未输出内联变量时也能正常显示）
 * ============================================================ */
:root{
    --container-width:956px;
    --font-size:16px;
    --font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    --accent:#27ae60;
    --accent-dark:#1e8b4d;
    --accent-rgb:39,174,96;
    --accent-soft:#eaf7ef;
    --header-gradient:linear-gradient(135deg,#0f7a4a 0%,#27ae60 45%,#6fd6a4 100%);
    --header-image:url(../img/background.jpg);
    --header-h:320px;          /* 顶部图片高度（后台可设） */
    --top-gap:30px;            /* 页面容器与浏览器顶部的间距（后台可关） */
    --body-bg:#f1f4f3;

    --surface:#fff;
    --surface-soft:#f7f9fa;
    --border:#eaedf0;
    --border-strong:#dfe5e9;
    --text:#2c3a42;
    --text-strong:#16222a;
    --text-muted:#8a969e;
    --radius:6px;
    --shadow-card:0 10px 30px rgba(20,40,30,.08);
}

/* ============================================================
 * 1. 基础重置
 * ============================================================ */
html{
    box-sizing:border-box;
    overflow-y:scroll;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    scroll-behavior:smooth;
}
*,*::before,*::after{box-sizing:inherit}

body{
    font-family:var(--font-family);
    font-size:var(--font-size);
    line-height:1.8;
    color:var(--text);
    background:var(--body-bg);
    margin:0;                 /* 去掉浏览器默认 8px 外边距，手机端才能满屏 */
    padding:0;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-feature-settings:"kern","liga","case";
    font-feature-settings:"kern","liga","case";
    min-height:100vh;
    overflow-x:hidden;
}

a,abbr,acronym,address,applet,big,blockquote,caption,cite,code,dd,del,dfn,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,iframe,ins,kbd,label,legend,li,object,ol,p,pre,q,s,samp,small,span,strike,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,tt,ul,var{
    border:0;
    font-size:100%;
    font-style:inherit;
    margin:0;
    outline:0;
    padding:0;
    word-break:break-word;
    word-wrap:break-word;
    vertical-align:baseline;
}
button,input,textarea{
    font-size:100%;
    font-family:inherit;
    line-height:1.2;
    margin:0;
    outline:0;
    color:inherit;
    appearance:none;
    -webkit-appearance:none;
}
ul{list-style:none;text-indent:0}
ol{padding-left:20px}
li,ol,ul{text-indent:0}
img{max-width:100%;height:auto;display:block;margin:0 auto}
audio,video,iframe{display:block;width:100%}
sup{vertical-align:super;font-size:smaller}
hr{
    background-image:linear-gradient(90deg,transparent,var(--border-strong) 50%,transparent);
    height:2px;border:0!important;margin:22px 0;
}
button{cursor:pointer}
button:focus,input:focus,textarea:focus{outline:0}
.clearfix{clear:both}
.left{text-align:left}
.center{text-align:center}
.word{text-align:center;text-indent:0}

a{color:inherit;text-decoration:none;transition:color .2s ease}
a:active,a:hover{color:var(--accent)}
.current{font-weight:700}

h1,h2,h3,h4,h5,h6{font-weight:600;margin:10px 0;text-indent:0;color:var(--text-strong)}

/* 表单控件 */
input[type=email],input[type=password],input[type=text],input[type=url],textarea{
    background:transparent;
    border:1px solid var(--border-strong);
    border-radius:4px;
    padding:6px 8px;
    width:100%;
    box-shadow:none;
}
input[type=email],input[type=password],input[type=text],input[type=url]{height:34px}
textarea{line-height:1.6;resize:vertical}
input[type=submit]{
    display:block;width:60%;height:34px;border-radius:4px;padding:0 6px;
    color:#fff;background:var(--accent);border:0;cursor:pointer;margin:10px auto;
}
input[type=password]{display:block;width:60%;margin:0 auto}

::selection{background:rgba(var(--accent-rgb),.18)}

/* 滚动条 */
html::-webkit-scrollbar{width:7px}
html::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.45);border-radius:4px}
html::-webkit-scrollbar-track{background:transparent}

/* ============================================================
 * 2. 页面骨架
 * ============================================================ */
.container{
    margin:var(--top-gap) auto 60px;
    max-width:var(--container-width);
    width:100%;
    background:var(--surface);
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:none;
    overflow:hidden;
}

/* 顶部 */
#header{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:var(--header-h);
    padding:60px 40px;
    text-align:center;
    color:#fff;
    background-color:#22303a;
    background-image:
        radial-gradient(ellipse 62% 96% at 50% 48%,rgba(8,14,18,.26) 0%,rgba(8,14,18,.12) 46%,rgba(8,14,18,0) 78%),
        linear-gradient(180deg,rgba(8,14,18,.05) 0%,rgba(8,14,18,.03) 45%,rgba(8,14,18,.26) 100%),
        var(--header-image),
        var(--header-gradient);
    background-position:center,center,center,center;
    background-size:cover,cover,cover,cover;
    background-repeat:no-repeat;
}
#header>*{max-width:100%}
#header::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:56px;
    background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.07));
    pointer-events:none;
}
.site-title{
    font-size:26px;
    letter-spacing:.02em;
    text-shadow:0 1px 3px rgba(0,0,0,.42),0 2px 16px rgba(0,0,0,.34);
    position:relative;
    z-index:1;
}
.site-title img{display:block;height:64px;width:auto;margin:0 auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
.site-title a,.site-title a:hover{color:#fff}

/* 菜单栏 */
.menubar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    min-height:50px;
    line-height:50px;
    padding:0 20px;
    border-bottom:1px solid var(--border);
    position:relative;
    background:var(--surface);
}
.mhome{display:inline-flex;align-items:center;flex-shrink:0;font-size:14px}
.mhome a{padding:0 12px;display:inline-block;color:var(--text)}
.mhome a.current{color:var(--accent)}

#nav-menu{flex:1 1 auto;min-width:0}
#menu{font-size:14px;display:inline}
#menu li{float:left;position:relative}
#nav-menu a{display:inline-block;padding:0 12px;color:var(--text)}
#menu li.current>a,#menu li.current .menu-row>a{color:var(--accent);font-weight:700}
#menu li>a:hover,#menu .menu-row>a:hover{color:var(--accent)}

.menu-row{display:inline-flex;align-items:center}
.has-sub> .menu-row>a::after{
    content:"";
    display:inline-block;
    margin-left:4px;
    position:relative;
    top:-2px;
    border-left:3.5px solid transparent;
    border-right:3.5px solid transparent;
    border-top:4px solid currentColor;
    opacity:.55;
    transition:transform .25s ease,border-color .25s ease;
}
.has-sub:hover .menu-row>a::after,
.has-sub.open .menu-row>a::after{transform:rotate(180deg);border-top-color:var(--accent);opacity:1}
.has-sub ul{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    width:132px;
    z-index:99;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:0 0 var(--radius) var(--radius);
    box-shadow:0 10px 24px rgba(0,0,0,.09);
    padding:4px 0;
    text-align:left;
    line-height:42px;
    font-size:13px;
}
.has-sub:hover ul,.has-sub.open ul{display:block}
.has-sub ul li{float:none;width:100%}
.has-sub ul li a{display:block;padding:0 14px}
.has-sub ul li a:hover{background:var(--accent-soft);color:var(--accent)}
.sub-toggle{display:none;background:none;border:0;color:var(--text-muted);line-height:0;padding:0;margin:0}

/* 搜索：默认收起，点放大镜后从菜单栏下方弹出 */
.search-panel{
    display:none;
    position:absolute;
    top:calc(100% - 1px);
    right:0;
    z-index:60;
    margin:0;
    padding:10px 12px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 14px 30px rgba(0,0,0,.12);
}
.menubar.search-open .search-panel{display:flex;align-items:center}
.rz-searchbar{
    --rz-h:34px;
    display:flex;
    align-items:stretch;
    position:relative;
    border:1px solid var(--border-strong);
    border-radius:calc(var(--rz-h) / 2);
    background:var(--surface);
    transition:border-color .2s ease,box-shadow .2s ease;
}
.rz-searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10)}
.rz-searchbar input.text{
    width:176px;
    min-width:0;
    height:var(--rz-h);
    border:0;
    border-color:transparent;
    border-radius:0;
    background:transparent;
    font-size:13px;
    padding:0 8px 0 14px;
    box-shadow:none;
    color:var(--text);
    outline:none;
}
.rz-searchbar input.text::placeholder{color:var(--text-muted)}
.rz-searchbar button.submit{
    width:calc(var(--rz-h) + 6px);
    height:calc(var(--rz-h) + 2px);
    margin:-1px -1px -1px 0;
    flex:0 0 auto;
    border:0;
    padding:0;
    border-radius:0 calc(var(--rz-h) / 2) calc(var(--rz-h) / 2) 0;
    background:var(--accent);
    color:#fff;
    line-height:0;
    cursor:pointer;
    transition:background .2s ease;
}
.rz-searchbar button.submit:hover{background:var(--accent-dark)}
.rz-searchbar button.submit svg{vertical-align:middle}

/* 工具栏按钮 */
.menu-tools{display:inline-flex;align-items:center;gap:2px;flex-shrink:0;margin-left:4px}
#searchbutton[aria-expanded="true"]{color:var(--accent);background:var(--accent-soft)}
#DarkModeButton,#searchbutton,#menubutton{
    background:none;
    border:0;
    color:var(--text-muted);
    padding:9px 7px;
    line-height:0;
    cursor:pointer;
    border-radius:6px;
    transition:color .2s ease,background .2s ease;
}
#DarkModeButton:hover,#searchbutton:hover,#menubutton:hover{color:var(--accent);background:var(--accent-soft)}
#searchbutton{display:inline-flex;align-items:center}
#menubutton{display:none}
.menubar.menu-open #menubutton{color:var(--accent);background:var(--accent-soft)}
.menubar.menu-open #menubutton .icon-menu{display:none}
#menubutton .icon-close{display:none}
.menubar.menu-open #menubutton .icon-close{display:inline}
#DarkModeButton .icon-sun{display:none}
#DarkModeButton[aria-pressed="true"] .icon-moon{display:none}
#DarkModeButton[aria-pressed="true"] .icon-sun{display:inline}

/* ============================================================
 * 3. 主内容区
 * ============================================================ */
#main{padding:20px 60px 40px}

.gonggao{
    display:flex;
    align-items:center;
    gap:6px;
    color:#c9791f;
    background:none;
    border:0;
    border-radius:0;
    padding:0;
    margin:2px 0 20px;
    font-size:.9em;
    line-height:1.7;
    overflow:hidden;
}
.gonggao .rz-icon{flex:0 0 auto;color:#e8971e}
.gonggao a{color:#c9791f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gonggao a:hover{color:var(--accent)}

/* 顶部三图推荐 */
.toppic{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin:4px 0 26px;
}
.toppic:empty{display:none}
.topitem{
    position:relative;
    display:block;
    border-radius:var(--radius);
    overflow:hidden;
    aspect-ratio:16 / 10;
    background:var(--surface-soft);
    box-shadow:var(--shadow-card);
}
.topitem img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}
.topitem:hover img{transform:scale(1.07)}
.topitem-title{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:22px 12px 10px;
    font-size:13px;
    line-height:1.5;
    color:#fff;
    background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* 文章列表 */
.post{padding:22px 0;border-bottom:1px solid var(--border)}
.post:last-of-type{border-bottom:0}
.post-title{font-size:18px;line-height:1.55;margin:0 0 8px;font-weight:700}
.post-title a{color:var(--text-strong)}
.post-title a:hover{color:var(--accent)}
.sticky{color:var(--accent);font-weight:400;font-size:.85em}

.meta{overflow:hidden;font-size:13px;color:var(--text-muted);margin:0 0 12px}
.meta li{display:inline;padding-right:12px;position:relative}
.meta li+li::before{content:"·";position:absolute;left:-7px;color:var(--border-strong)}
.meta a{color:var(--text-muted)}
.meta a:hover{color:var(--accent)}

.post-excerpt{line-height:2em;color:var(--text);text-indent:0;word-break:break-word}
.post-excerpt.indent .post-excerpt-txt{text-indent:2em}
.post-excerpt-txt{
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    max-height:6.2em;
}
.post-thumb-link{display:block;float:right;margin:4px 0 4px 18px}
.post-thumb{
    position:relative;
    width:150px;
    height:104px;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--surface-soft);
    box-shadow:0 0 0 1px rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.05);
}
.post-thumb .thumb-cover,
.post-thumb img{
    display:block;
    width:100%;
    height:100%;
    margin:0;
    object-fit:cover;
    object-position:center;
    transition:transform .5s ease;
}
.post-thumb-link:hover .thumb-cover,
.post-thumb-link:hover img{transform:scale(1.08)}

/* 缩略图在左 */
html[data-thumb="left"] .post-thumb-link{float:left;margin:4px 18px 4px 0}

/* 分页：页码数量固定，任何一页都是一行 */
.page-navigator{
    text-align:center;
    font-size:.9375em;
    padding:26px 0 0;
    display:flex;
    justify-content:center;
    flex-wrap:nowrap;
    gap:6px;
    max-width:100%;
}
.page-navigator li{display:inline-block;margin:0;padding:0;flex:0 0 auto}
.page-navigator li a,.page-navigator li span{
    display:inline-block;
    min-width:32px;
    height:32px;
    line-height:30px;
    padding:0 6px;
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--text);
    font-size:14px;
    text-align:center;
    transition:all .2s ease;
}
.page-navigator li.prev a,.page-navigator li.next a{padding:0 2px;font-size:15px}
.page-navigator li.is-off span{color:var(--text-muted);opacity:.42;cursor:default}
.page-navigator li a:hover{border-color:var(--accent);color:var(--accent)}
.page-navigator li.current a,
.page-navigator li.current span{background:var(--accent);border-color:var(--accent);color:#fff}
/* 中间省略号：纯文本占位，不套页码盒子 */
.page-navigator li.rz-more{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:14px;
    color:var(--text-muted);
    letter-spacing:1px;
    cursor:default;
}

.place{padding:6px 0 18px;text-align:center;font-size:.95em;color:var(--text-muted)}
.place span{color:var(--accent);font-weight:600}

/* ============================================================
 * 4. 正文排版
 * ============================================================ */
.post-single{padding-bottom:24px}
.post-content{line-height:2em;font-size:1em;color:var(--text)}
.post-content.indent p{text-indent:2em}
.post-content p{margin:12px 0}
.post-content a{color:var(--accent);border-bottom:1px solid rgba(var(--accent-rgb),.25)}
.post-content a:hover{color:var(--accent-dark);border-bottom-color:var(--accent-dark)}
.post-content img{border-radius:var(--radius);max-width:100%;height:auto;cursor:zoom-in}

/* B 站视频（[bilibili ...] 短代码）→ 16:9 自适应播放器 */
.rz-bili{
    display:block;
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.25%;
    margin:18px 0;
    background:#000;
    border-radius:var(--radius);
    overflow:hidden;
}
.rz-bili iframe{
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    border:0;
}
.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{
    background:rgba(0,0,0,.022);
    padding:4px 0 4px 12px;
    margin:18px 0 10px;
    text-indent:0;
    line-height:1.6;
    border-radius:0 4px 4px 0;
}
.post-content h1{font-size:1.3em;border-left:4px solid #bd19da}
.post-content h2{font-size:1.18em;border-left:4px solid var(--accent)}
.post-content h3{font-size:1.08em;border-left:4px solid #f77b83;font-weight:700}
.post-content h4{font-size:1.02em;border-left:4px solid #bb1717}
.post-content h5{font-size:1em;border-left:4px solid #daba19}
.post-content h6{font-size:1em;border-left:4px solid #1998da}

.post-content ul li,.post-content ol li{padding:2px 0}
.post-content ul li::before{
    display:inline-block;
    content:"";
    background-color:rgba(var(--accent-rgb),.45);
    height:6px;width:6px;
    border-radius:100%;
    margin-right:10px;
    margin-bottom:2px;
}
.post-content ul li ul li::before{height:4px;width:4px;opacity:.75}
.post-content ul li ul li{padding-left:1em}
.post-content ul li p{display:inline}
.post-content ol{padding-left:22px;list-style:decimal}

blockquote{
    background:var(--surface-soft);
    border-left:.25em solid var(--accent);
    border-radius:0 var(--radius) var(--radius) 0;
    margin:16px 0;
    padding:12px 18px 12px 18px;
    color:#54646e;
    text-indent:0;
    font-weight:400;
}
blockquote p{margin:6px 0}

code,pre{background:#20293a;color:#8ee6c0;font-family:Consolas,Monaco,"Courier New",monospace;font-size:14px}
code{padding:3px 8px;border-radius:4px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
pre{
    padding:0 18px;
    border-left:.25em solid var(--accent);
    border-radius:var(--radius);
    margin:20px 0;
    overflow:auto;
    line-height:2em;
}
pre:before,pre:after{display:block;padding:10px 0;color:rgba(255,255,255,.35);font-size:12px}
pre:before{content:"-- CODE --"}
pre:after{content:"-- EOF --";text-align:right}
pre code{padding:0;background:transparent;color:inherit}

table{border-collapse:collapse;border-spacing:0;width:100%;max-width:65em;font-size:14px;margin:16px auto;text-indent:0}
table th,table td{border:1px solid var(--border);padding:8px 10px;text-align:center;vertical-align:middle}
table thead tr,table thead th{background:#2c3a42;color:#eef2f5;font-weight:400}
table tbody tr:nth-child(odd){background:var(--surface-soft)}
caption,caption,th{font-weight:400}

.tags{font-size:13px;color:var(--text-muted);margin-top:14px;line-height:2}
.tags a{color:var(--text-muted)}
.tags a:hover{color:var(--accent)}
.post-near{line-height:2.2;font-size:.9375em;margin-top:14px;color:var(--text-muted)}
.post-near a{color:var(--text)}
.post-near a:hover{color:var(--accent)}
.more{
    border-left:.25em solid var(--accent);
    padding:0 0 0 .75em;
    margin:28px 0 12px;
    font-size:16px;
    font-weight:700;
}
.more-list{display:flex;flex-wrap:wrap;gap:4px 0}
.more-list li{width:49%;display:inline-block;padding:5px 0;padding-right:2%}
.more-list li::before{
    display:inline-block;content:"";background:rgba(var(--accent-rgb),.4);
    height:6px;width:6px;border-radius:100%;margin-right:10px;margin-bottom:2px;
}
.more-list li,.tag-list,.widget-list li{word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
 * 5. 评论
 * ============================================================ */
#comments{margin-top:16px}
#comments h2,#response{
    border-left:.25em solid var(--accent);
    padding:0 0 0 .7em;
    margin:20px 0 14px;
    font-size:16px;
    font-weight:700;
}
.respond{margin-bottom:8px}
.cancel-comment-reply{float:right;font-size:.875em;margin-top:20px}
.cancel-comment-reply a{color:var(--accent)}

/* 表单两列 */
#comment-form .rz-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:0 0 10px;
}
#comment-form .rz-field{position:relative;margin:0 0 12px}
#comment-form .rz-form-grid .rz-field{margin:0}
#comment-form .rz-field input.text,
#comment-form .rz-field textarea.textarea{
    width:100%;
    border:1px solid var(--border-strong);
    border-radius:var(--radius);
    background:var(--surface);
    color:var(--text);
    font-size:1em;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
/* 输入框：上下内边距对称，文字由浏览器垂直居中，光标正好落在提示语的位置 */
#comment-form .rz-field input.text{height:42px;padding:0 12px;line-height:normal}
/* 文本域：改用原生 placeholder，提示语与光标共用同一行坐标，点击即对齐 */
#comment-form .rz-field--textarea textarea.textarea{
    display:block;
    height:116px;
    min-height:116px;
    padding:12px 48px 12px 12px;
    line-height:1.7;
    resize:vertical;
}
#comment-form .rz-field textarea.textarea::placeholder{color:var(--text-muted);opacity:1}
#comment-form .rz-field input.text:focus,
#comment-form .rz-field textarea.textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10)}
/* 字段前置图标：常驻左侧，聚焦时随强调色亮起 */
#comment-form .rz-field--icon input.text{padding-left:40px}
#comment-form .rz-fi{
    position:absolute;
    left:13px;
    top:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:16px;
    margin-top:-8px;
    color:var(--text-muted);
    pointer-events:none;
    transition:color .2s ease,opacity .2s ease;
}
#comment-form .rz-fi svg{display:block;width:16px;height:16px}
#comment-form .rz-field--icon input.text:focus~.rz-fi{color:var(--accent)}
#comment-form .rz-field.rz-field--icon label{left:40px}
#comment-form .rz-field label{
    position:absolute;
    left:13px;
    top:13px;
    margin:0;
    color:var(--text-muted);
    font-size:.95em;
    line-height:1;
    pointer-events:none;
    transition:top .16s ease-out,font-size .16s ease-out,color .16s ease-out,opacity .12s ease-out,visibility .12s ease-out;
}
/* 文本域提示语交给原生 placeholder，label 只留给读屏 */
#comment-form .rz-field--textarea label{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
    top:auto;
}
/* 称呼/邮箱/网址/验证码：聚焦或已填写时提示语直接隐藏，不做缩小变形 */
#comment-form .rz-field input.text:focus~label,
#comment-form .rz-field input.text:not(:placeholder-shown)~label{opacity:0;visibility:hidden}
/* 算术验证码：右侧算式牌 + 左侧输入 */
#comment-form .rz-field--captcha input.text{padding-right:126px;letter-spacing:.18em;font-weight:600}
.rz-capcode{
    position:absolute;
    right:8px;
    top:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:1px;
    height:30px;
    padding:0 9px;
    margin-top:-15px;
    background:var(--accent-soft);
    border:1px solid rgba(var(--accent-rgb),.22);
    border-radius:var(--radius);
    font-family:Georgia,"Times New Roman",Times,serif;
    font-size:17px;
    font-weight:700;
    font-style:italic;
    line-height:1;
    color:var(--accent-dark);
    letter-spacing:1px;
    text-indent:1px;
    user-select:none;
    -webkit-user-select:none;
    cursor:default;
}
.rz-capcode i{display:inline-block;position:relative;font-style:inherit;opacity:.9}
.rz-capcode i:nth-child(even){opacity:.72}
.rz-capcode .rz-capop{font-style:normal;font-weight:600;opacity:.62;margin:0 1px}
.rz-capcode .rz-capask{font-style:normal;opacity:.55;margin-left:1px}

/* 评论微信表情面板 */
.rz-faces{position:absolute;right:10px;bottom:10px;z-index:5}
.rz-faces-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    border-radius:50%;
    background:none;
    color:var(--text-muted);
    cursor:pointer;
    transition:color .2s ease,background .2s ease;
}
.rz-faces-btn:hover,.rz-faces.is-open .rz-faces-btn{color:var(--accent);background:var(--accent-soft)}
.rz-faces-panel{
    position:absolute;
    right:0;
    bottom:calc(100% + 8px);
    width:336px;
    max-width:calc(100vw - 44px);
    max-height:236px;
    padding:10px;
    overflow-y:auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:0 16px 34px rgba(0,0,0,.14);
    text-align:left;
}
.rz-faces-panel[hidden]{display:none}
.rz-faces-loading{display:block;padding:14px 0;text-align:center;color:var(--text-muted);font-size:.9em}
.rz-face-item{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin:0 4px 4px 0;
    padding:4px;
    border:0;
    border-radius:var(--radius);
    background:var(--surface-soft);
    cursor:pointer;
    transition:background .15s ease,transform .15s ease;
}
.rz-face-item:hover{background:var(--accent-soft);transform:translateY(-1px)}
.rz-face-item img{display:block;width:24px;height:24px}
#comment-form button.submit,
#comment-form #misubmit{
    display:block;
    width:100%;
    height:40px;
    border:0;
    border-radius:var(--radius);
    background:var(--accent);
    color:#fff;
    font-size:1em;
    letter-spacing:.04em;
    cursor:pointer;
    margin-top:4px;
    transition:background .2s ease,transform .12s ease;
}
#comment-form #misubmit:hover{background:var(--accent-dark)}
#comment-form #misubmit:active{transform:translateY(1px)}
.rz-logged{margin:0 0 14px;color:var(--text-muted);font-size:.9em}
.rz-logged a{color:var(--accent)}

/* 评论列表 */
.comment-list,.comment-list ol{list-style:none;margin:0;padding:0}
/* 昵称、时间、正文共用一条左基线：头像宽度 + 头像与昵称的间距 */
.comment-list{--cmt-indent:50px}
.comment-children{padding-left:var(--cmt-indent)}
/* 三级及以后不再继续缩进，与二级保持同一条线 */
.comment-children .comment-children{padding-left:0}
.comment-list li{margin:.5em 0}
/* 头像在左，昵称与时间两行合成一块，整体与头像垂直居中对齐 */
.comment-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:1.2em;
    border-top:1px dashed var(--border);
    padding-top:1em;
    color:var(--text-strong);
}
.comment-head .avatar{
    float:none;
    width:40px;height:40px;
    border-radius:50%;
    margin:0;
    flex:0 0 auto;
    object-fit:cover;
    background:var(--surface-soft);
}
.comment-info{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1px;
}
.comment-info .fn{font-weight:700;font-size:.95em;font-style:normal;line-height:1.5}
.comment-by-author::after{
    content:"博主";
    background:var(--accent);
    color:#fff;
    font-size:.68em;
    font-weight:400;
    border-radius:3px;
    padding:1px 6px;
    margin-left:6px;
    vertical-align:1px;
}
.comment-meta{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    min-height:17px;
    font-size:.8em;
    line-height:1.5;
    color:var(--text-muted);
}
.comment-meta a{color:var(--text-muted);font-size:1em}
.comment-meta a:hover{color:var(--accent)}
.comment-meta .comment-reply{margin-left:auto;flex:0 0 auto}
.comment-reply a{
    display:inline-block;
    padding:1px 10px;
    border-radius:10px;
    border:1px solid var(--border-strong);
    color:var(--text-muted);
    font-size:.85em;
    line-height:1.6;
    transition:all .2s ease;
}
.comment-reply a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.comment-content{padding-left:var(--cmt-indent);font-size:.9375em;line-height:1.8;margin-top:6px;color:var(--text)}
.comment-content .comment-a{display:inline;margin:0}
.comment-content .comment-a a{color:var(--accent);margin-right:2px;font-size:.9em}
.comment-at{display:inline}
.comment-at a{color:var(--accent);margin-right:2px}
.comment-content>p:first-child{margin-top:0}
.comment-content>p:last-child{margin-bottom:0}
/* 兼容旧评论模板（jiguweiyu.php 等仍在用 .comment-author 结构） */
.comment-author{display:flex;align-items:center;gap:10px;color:var(--text-strong)}
.comment-author .avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.comment-author cite{font-weight:700;font-size:.95em;font-style:normal}
.comment-waiting,.commentReview{
    display:inline-block;
    margin-left:6px;
    padding:1px 7px;
    border-radius:4px;
    background:#fff4e5;
    color:#b26a00;
    font-size:12px;
    line-height:1.6;
    vertical-align:middle;
}
.comment-list .respond{border-top:1px dashed var(--border);margin-top:16px}
.comment-content img{max-width:100%;border-radius:4px;margin:6px 0}
.comment-content img.rz-face{display:inline-block;vertical-align:-6px;width:24px;height:24px;margin:0 2px;border-radius:0;cursor:default}

/* ============================================================
 * 6. 页脚
 * ============================================================ */
#footer{
    padding:34px 35px 26px;
    text-align:center;
    font-size:13px;
    background:transparent;
    color:var(--text-muted);
    border-top:1px solid var(--border);
}
#footer a{color:var(--text)}
#footer a:hover{color:var(--accent)}
#footer p{line-height:2em}
#footer .sep{margin:0 6px;opacity:.5}
#footer img{max-height:30px;display:inline}

/* ============================================================
 * 7. 右下角工具 / 文章目录
 * ============================================================ */
#catalog-col,#cornertool{position:fixed;bottom:16px;z-index:999}
#cornertool{right:50%;margin-right:calc(var(--container-width) / 2 * -1 - 46px)}
#cornertool ul{list-style:none;padding:0;margin:0;text-align:center}
#cornertool li{
    position:relative;
    display:block;
    width:40px;height:40px;line-height:40px;
    margin-top:8px;
    color:#fff;
    background:rgba(28,38,44,.72);
    border-radius:10px;
    cursor:pointer;
    backdrop-filter:blur(6px);
    transition:all .2s ease;
    font-size:13px;
}
#cornertool li:hover{background:var(--accent)}
#cornertool .hidden{visibility:hidden;opacity:0;transform:translateY(6px)}
#catalog-col,#catalog-col.catalog{transition:.2s ease}
#catalog-col{
    right:50%;
    margin-right:calc(var(--container-width) / 2 * -1 - 14px);
    min-width:150px;
    max-width:50%;
    max-height:52vh;
    padding:14px 16px;
    color:#e8edf0;
    background:rgba(28,38,44,.88);
    border-radius:10px;
    font-size:13px;
    overflow:auto;
    backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
}
#catalog-col.catalog{opacity:1;visibility:visible;transform:translateY(0)}
#catalog-col b{display:block;font-size:1em;margin-bottom:8px;color:#fff}
#catalog-col ul{padding-left:12px}
#catalog-col li{margin:5px 0;line-height:1.6}
#catalog-col a{color:rgba(255,255,255,.78);border:0}
#catalog-col a:hover{color:#7ee2b0}
#catalog-col::-webkit-scrollbar{width:4px}
#catalog-col::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:2px}
#catalog{position:relative}
#catalog span,#catalog::before,#catalog::after{
    position:absolute;display:block;top:50%;left:50%;
    margin:-1px 0 0 -6px;width:12px;height:1px;background:currentColor;
}
#catalog::before{content:"";margin-top:-5px}
#catalog::after{content:"";margin-top:3px}
#catalog.catalog span{transform:rotate(90deg)}
#catalog.catalog::before{margin:-4px 0 0 -11px;transform:rotate(-30deg)}
#catalog.catalog::after{margin:2px 0 0 -11px;transform:rotate(30deg)}

/* pjax 进度条 */
.rz-pjax-bar{
    position:fixed;left:0;top:0;z-index:100001;width:0;height:2px;
    background:var(--accent);opacity:0;transition:width .15s ease,opacity .15s ease;
}
.rz-pjax-bar.is-on{width:72%;opacity:1}
.rz-pjax-bar.is-done{width:100%;opacity:0}

/* ============================================================
 * 8. 内容块（编辑器按钮插入的组件）
 * ============================================================ */
#teamnewslist ol{list-style:none;margin-left:8px;padding-left:16px;border-left:2px solid var(--border)}
#teamnewslist b{font-size:14px;font-weight:400;display:block;position:relative;margin-bottom:10px;padding-left:1px;text-indent:0}
#teamnewslist b::after{
    position:absolute;top:6px;left:-24px;content:"";
    width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong);
}
#teamnewslist li{list-style:none;margin:0 0 20px;line-height:180%}
#teamnewslist li:hover b::after{border-color:var(--accent)}
#teamnewslist li:hover b{color:var(--accent)}

#bddownload a,#download a,#lzdownload a{
    display:inline-block;
    color:#fff;
    background-color:var(--accent);
    padding:7px 14px 7px 40px;
    border-radius:var(--radius);
    background-size:18px;
    background-repeat:no-repeat;
    background-position:12px center;
    text-indent:0!important;
    transition:background-color .2s ease;
}
#bddownload a:hover,#download a:hover,#lzdownload a:hover{background-color:var(--accent-dark);color:#fff}
#download a{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='M8 10.5l4 4 4-4'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E")}
#bddownload a{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8.5 10.5l3.5 3.5 3.5-3.5'/%3E%3Cpath d='M5 18h14'/%3E%3Cpath d='M7 7h10'/%3E%3C/svg%3E")}
#lzdownload a{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17a4.5 4.5 0 0 1 .6-9A6 6 0 0 1 18 9.5a3.5 3.5 0 0 1 .3 7z'/%3E%3Cpath d='M12 12v6'/%3E%3Cpath d='M9.5 15.5L12 18l2.5-2.5'/%3E%3C/svg%3E")}
#bddownload,#download,#lzdownload{display:inline-block;text-indent:0!important;margin:10px 14px 10px 0}

#tips-red,#tips-green,#tips-orange{padding:10px 14px;margin:12px 0;border:1px solid var(--border);border-left:3px solid var(--border-strong);border-radius:0 var(--radius) var(--radius) 0;text-indent:0}
#tips-red{border-left-color:#e05b5b;background:#fdf3f3}
#tips-green{border-left-color:#4aa87c;background:#f2faf6}
#tips-orange{border-left-color:#e8a33d;background:#fdf8ef}

input.done_checkbox,input.todo_checkbox{
    -webkit-appearance:none;appearance:none;position:relative;
    border-radius:3px;width:15px;height:15px;border:2px solid var(--accent);vertical-align:-5px;
}
input.done_checkbox:checked{border:none;background:var(--accent)}
input.done_checkbox:checked::after{
    content:"";width:3px;height:7px;position:absolute;top:2px;left:5px;
    border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg);
}

.photos{display:flex;gap:10px;width:100%;height:clamp(160px,26vw,280px);align-items:stretch}
.photos p,.photos .photoview{margin:0;display:contents}
.photos img,.photos .photoview img{flex:1 1 0;min-width:0;width:auto;height:100%;object-fit:cover;border-radius:4px;margin:0}
.photo{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:18px;align-items:stretch}
.photo-list{
    width:100%;margin:0;text-align:center;border-radius:var(--radius);overflow:hidden;
    position:relative;font-size:.875em;background:var(--surface);box-shadow:var(--shadow-card);
    transition:box-shadow .3s ease;
}
.photo-list img{border-radius:0;margin:0;width:100%;aspect-ratio:4 / 3;height:auto;object-fit:cover;display:block}
.photo-list a{display:block;text-indent:0}
.photo-list-title{display:block;padding:8px 10px 10px;line-height:1.5;color:var(--text);font-size:.95em}
.photo-list:hover{box-shadow:0 14px 34px rgba(0,0,0,.16)}

/* 归档 / 专题 / 404 */
#archives{padding:6px 0 20px}
#archives h2{border-bottom:1px solid var(--border);padding-bottom:8px;font-size:1.1em;margin:26px 0 10px}
#archives ul{padding:6px 0 6px 4px}
#archives ul li{padding:4px 0}
#archives ul li::before{display:none}
#archives ul li em{color:var(--text-muted);font-style:normal;font-size:.85em}
.widgetbox{display:flex;flex-wrap:wrap;gap:0;margin:0 -1%}
.widget{width:48%;margin:0 1%;padding:0;display:block;list-style:none;overflow:hidden;margin-bottom:26px}
.widget-title{border-bottom:1px solid var(--border);padding:0 0 8px;font-size:1em}
.widget-list li{padding:6px 0;font-size:.9375em}
.widget-list li::before{display:inline-block;content:"";background:rgba(var(--accent-rgb),.4);height:6px;width:6px;border-radius:100%;margin-right:10px;margin-bottom:2px}
.tagcloud li{list-style:none;width:25%;display:table-cell;float:left;padding:8px 0}
.tag-list{width:100%;float:none}

.page404{text-align:center;padding:40px 0 60px}
.page404 img{width:200px;height:auto;margin:0 auto 18px;opacity:.9}
.page404 h2{font-size:1.4em;margin:0 0 8px}
.page404>p{color:var(--text-muted);font-size:.9375em;margin:0 0 18px}
.page404-search{max-width:400px;margin:0 auto 16px}
.page404-search input.text{flex:1 1 auto;min-width:0;width:auto}
.page404-search button.submit{width:auto;padding:0 18px;border-radius:0 17px 17px 0;line-height:32px;height:34px;font-size:14px}
.page404-back{font-size:.9375em;margin:0}
.page404-back a{color:var(--accent)}

/* ============================================================
 * 9. 响应式
 * ============================================================ */
@media (max-width:1180px){
    #catalog-col{margin-right:0;right:64px}
    #cornertool{margin-right:0;right:8px}
}

@media (max-width:1024px){
    .container{margin:0 auto;border:0;border-radius:0;box-shadow:none;max-width:100%}
    #header{padding:44px 30px;min-height:calc(var(--header-h) * .82)}
    #main{padding:18px 30px 34px}
}

@media (max-width:868px){
    #header{padding:28px 22px;min-height:calc(var(--header-h) * .62)}
    .site-title{font-size:22px}
    .site-title img{height:48px}
    .menubar{padding:0 14px;min-height:48px;line-height:48px}
    #menu{
        display:none;
        width:100%;
        padding:0;
        margin:0;
        border-top:1px solid var(--border);
        background:var(--surface);
    }
    .menubar.menu-open #menu{
        display:block;
        position:absolute;
        top:100%;
        left:0;right:0;
        border-bottom:1px solid var(--border);
        box-shadow:0 12px 24px rgba(0,0,0,.08);
        z-index:60;
        padding:4px 0;
    }
    #menu li{float:none;width:100%;display:block;text-align:left;line-height:46px;border-bottom:1px solid var(--border)}
    #menu li:last-child{border-bottom:0}
    .menu-row{display:flex;align-items:center;width:100%}
    #menu li>a,#menu .menu-row>a{display:block;flex:1 1 auto;padding:0 16px;text-align:left}
    .has-sub> .menu-row>a::after{display:none}
    .sub-toggle{display:inline-flex;flex:0 0 46px;width:46px;height:46px;align-items:center;justify-content:center}
    .has-sub ul{
        position:static;
        display:none;
        width:100%;
        border:0;
        border-radius:0;
        box-shadow:none;
        background:var(--surface-soft);
        padding:0;
    }
    .has-sub.open ul{display:block}
    .has-sub ul li{border-bottom:1px solid var(--border)}
    .has-sub ul li a{padding-left:34px;font-size:.95em}
    #menu li.current>a,#menu li.current .menu-row>a{background:var(--accent-soft);box-shadow:inset 3px 0 var(--accent)}
    #menu li>a:hover{background:var(--surface-soft)}

    .search-panel{left:0;right:0;box-sizing:border-box;padding:10px 14px;border-left:0;border-right:0;border-radius:0;box-shadow:0 12px 24px rgba(0,0,0,.08)}
    .menubar.search-open .rz-searchbar{width:100%}
    .menubar.search-open .rz-searchbar input.text{width:auto;flex:1 1 auto}
    #searchbutton,#menubutton{display:inline-block}
    .mhome{display:inline-flex}
    .menu-tools{margin-left:auto}

    #main{padding:16px 18px 30px}
    .toppic{gap:8px}
    .topitem-title{display:none}
    .post-thumb-link{margin-left:12px}
    .post-thumb{width:118px;height:84px}
    html[data-thumb="left"] .post-thumb-link{margin-right:12px;margin-left:0}
    .post-title{font-size:16.5px}
    .more-list li{width:100%}
    .widget{width:100%;margin:0 0 24px}
    #comment-form .rz-form-grid{grid-template-columns:1fr}
    .comment-content{margin-top:8px}
    .comment-head{gap:8px}
    .comment-head .avatar{width:34px;height:34px}
    .comment-list{--cmt-indent:42px}
    #footer{padding:32px 18px 24px}
    #cornertool{bottom:10px;right:10px}
    #catalog-col{right:60px;bottom:10px;max-height:50vh}
    .photo{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:12px}
}

@media (max-width:480px){
    .post-thumb{width:96px;height:72px}
    .post-excerpt-txt{-webkit-line-clamp:3;max-height:5.4em;line-height:1.8em}
    .tagcloud li{width:50%}
    .page-navigator li a,.page-navigator li span{min-width:28px;height:28px;line-height:26px;font-size:13px}
    .site-title{font-size:20px}
}

/* ============================================================
 * 10. 卡片样式
 *
 * 由后台「外观风格 → 卡片样式」开关驱动，标记在 <html data-card>：
 *   soft  轻卡片：白底 + 圆角 + 细边框
 *   float 悬浮卡片：额外加阴影，鼠标悬停上浮
 * 颜色全部走变量，夜间模式自动跟随深色底。
 * ============================================================ */
html[data-card="soft"] .post,
html[data-card="float"] .post{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:18px 20px;
    margin:14px 0;
}
html[data-card="soft"] .post:last-of-type,
html[data-card="float"] .post:last-of-type{border-bottom:1px solid var(--border)}
html[data-card="soft"] .post{box-shadow:0 1px 2px rgba(20,40,30,.04)}
html[data-card="float"] .post{
    box-shadow:0 8px 22px rgba(20,40,30,.06);
    transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
html[data-card="float"] .post:hover{
    box-shadow:0 14px 34px rgba(20,40,30,.13);
    border-color:rgba(var(--accent-rgb),.30);
    transform:translateY(-2px);
}
/* 正文页那一整篇文章不做上浮，避免跳动 */
html[data-card="float"] .post-single:hover{transform:none;box-shadow:0 8px 22px rgba(20,40,30,.06)}
html[data-card="soft"] .post-single,
html[data-card="float"] .post-single{padding:22px 24px 18px}

/* 卡片模式下内容区左右留白与菜单栏对齐，列表卡片与正文页卡片同宽：
 *   左 = 菜单栏内边距 20 + 「首页」链接内边距 12 = 32 → 卡片左边缘落在「首页」文字上
 *   右 = 菜单栏内边距 20 + 搜索按钮内边距 7  = 27 → 卡片右边缘落在放大镜图标右边缘
 * 只覆盖左右，上下留白沿用 #main 原有取值 */
html[data-card="soft"] #main,
html[data-card="float"] #main{padding-left:32px;padding-right:27px}

/* 评论：每条一张浅底卡片 */
html[data-card="soft"] .comment-body>div[id],
html[data-card="float"] .comment-body>div[id]{
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:10px;
    padding:0 14px 12px;
}
html[data-card="soft"] .comment-head,
html[data-card="float"] .comment-head{
    border-top:0;
    margin-top:0;
    padding-top:12px;
}
html[data-card="float"] .comment-body>div[id]{
    transition:border-color .2s ease,box-shadow .2s ease;
}
html[data-card="float"] .comment-body>div[id]:hover{
    border-color:rgba(var(--accent-rgb),.26);
    box-shadow:0 6px 16px rgba(20,40,30,.07);
}

/* 评论框 */
html[data-card="soft"] .respond,
html[data-card="float"] .respond{
    background:var(--surface-soft);
    border:1px solid var(--border);
    border-radius:12px;
    padding:4px 18px 16px;
}
html[data-card="soft"] #comment-form .rz-field input.text,
html[data-card="soft"] #comment-form .rz-field textarea.textarea,
html[data-card="float"] #comment-form .rz-field input.text,
html[data-card="float"] #comment-form .rz-field textarea.textarea{background:var(--surface)}
/* 卡片模式下评论框上方那条虚线由卡片边框负责 */
html[data-card="soft"] .comment-list .respond,
html[data-card="float"] .comment-list .respond{border-top:1px solid var(--border)}

/* 顶部推荐三图也跟着同步圆角 */
html[data-card="soft"] .topitem,
html[data-card="float"] .topitem{border-radius:12px}

@media (max-width:768px){
    html[data-card="soft"] .post,
    html[data-card="float"] .post{padding:15px 15px;margin:12px 0;border-radius:10px}
    html[data-card="soft"] .post-single,
    html[data-card="float"] .post-single{padding:16px 15px 14px}
    html[data-card="soft"] .comment-body>div[id],
    html[data-card="float"] .comment-body>div[id]{padding:0 12px 10px;border-radius:9px}
    html[data-card="soft"] .respond,
    html[data-card="float"] .respond{padding:2px 14px 14px;border-radius:10px}
}

/* 窄屏菜单栏内边距收成 14px，卡片留白跟着回到 26 / 21 */
@media (max-width:868px){
    html[data-card="soft"] #main,
    html[data-card="float"] #main{padding-left:26px;padding-right:21px}
}