:root{--bg:#faf5f0;--fg:#2d2a27;--mute:#8a9690;--line:#e5dbd0;--acc:#b3382c;--soft:rgba(255,255,255,.55);--err:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#1c1b19;--fg:#e6e1da;--mute:#9aa49f;--line:#36332f;--acc:#e0786c;--soft:rgba(255,255,255,.06);--err:#ff8a80}}
*{box-sizing:border-box}
[hidden],input[type=hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--fg);background-color:var(--bg);
  /* 纸张颗粒噪点叠层 */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.055' numOctaves='5' seed='3' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' surfaceScale='.4' diffuseConstant='1.1' lighting-color='%23faf5f0'%3E%3CfeDistantLight azimuth='225' elevation='62'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.86'/%3E%3C/svg%3E");
  background-size:480px 480px;
  font:16px/1.9 "Noto Serif SC","Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSong","Georgia","SimSun",serif}
::selection {
  background: rgba(255,250,205,.9);
  color: black;
}
::-moz-selection {
  background: rgba(255,250,205,.9);
  color: #333;
}
@media (prefers-color-scheme:dark){
  body{background-image:none}}

a{color:inherit;text-decoration:none}a:hover{color:var(--acc)}
/* 悬停/聚焦时的颜色渐变（按钮、链接、输入框、表情） */
a{transition:color .2s ease,text-decoration-color .2s ease}
button,.btn,input,textarea{transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease,transform .18s ease}
header.top,main,footer{width:min(45rem,calc(100% - 2.5rem));margin-left:auto;margin-right:auto}   /* 分隔线与正文等宽 */
header.top{display:flex;align-items:baseline;gap:1.5rem;padding-top:1.8rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}
.brand{font-size:1.05rem;font-weight:700;letter-spacing:.02em}
.topnav{margin-left:auto;font-size:.85rem;color:var(--mute)}.topnav a{color:var(--mute)}.topnav a:hover{color:var(--acc)}
main{padding-top:2.5rem;padding-bottom:3rem}
footer{color:var(--mute);font-size:.82rem;padding-top:1.2rem;padding-bottom:2.5rem;border-top:1px solid var(--line);text-align:center}
h1{font-size:2rem;line-height:1.4;margin:.2em 0 .35em;letter-spacing:.01em}
h2{font-size:1.2rem;line-height:1.5}
h2.sec{margin:2.4rem 0 .2rem}
/* 分隔线：细线、两端淡出，替代浏览器默认的 3D 凹槽样式 */
hr{border:0;height:1px;margin:2.4rem 0;background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.meta,.hint,small{color:var(--mute);font-size:.85rem;margin:.1em 0;line-height:1.7}
.meta a{color:var(--mute)}.meta a:hover{color:var(--acc)}
.empty{color:var(--mute);padding:2rem 0}
input,textarea,button{font:inherit;color:inherit}
input,textarea{width:100%;padding:.5rem .1rem;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;outline:0;-webkit-appearance:none;appearance:none}
input:focus,textarea:focus{border-bottom-color:var(--acc);box-shadow:0 1px 0 var(--acc)}
::placeholder{color:var(--mute);opacity:.8}
textarea{resize:vertical;line-height:1.7}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
button,.btn{display:inline-block;padding:.4rem 1.1rem;border:1px solid var(--fg);border-radius:999px;background:var(--fg);color:var(--bg);cursor:pointer;font-size:.9rem;line-height:1.6}
button:hover,.btn:hover{opacity:.85}
.btn:hover{color:var(--bg)}   /* 盖过 a:hover 的强调色，保持文字颜色不变 */
.btn{text-decoration:none!important;font-weight:400;margin:0 .5rem;vertical-align:middle}
/* 次要按钮：浅底、深色文字、细边框。用法：<button class="btn-sub"> 或 <a class="btn btn-sub"> */
.btn-sub{background:var(--soft);color:var(--fg);border-color:var(--line);vertical-align:middle}
.btn.btn-sub:hover{color:var(--fg)}
button.link{background:none;border:0;padding:0;color:var(--acc);border-radius:0}button.link:hover{opacity:1;background:none;text-decoration:underline;color:var(--acc)}
button:disabled{opacity:.55;cursor:default}
.row{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}.row>*{flex:1 1 11rem}.row>button,.row>span,.row>a{flex:0 0 auto}
/* 首页 */
.search{display:flex;gap:.8rem;margin-bottom:1.1rem}.search input{flex:1}
.cats{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:0 0 1.2rem;font-size:.9rem;color:var(--mute)}.cats a.on{color:var(--fg);font-weight:700}
.item{display:flex;gap:1.1rem;padding:1.35rem 0;border-bottom:1px solid var(--line)}
.item h2{margin:0 0 .1em;font-size:1.3rem}.item .sum{margin:.45em 0 0;color:#5f5a54;font-size:.95rem;line-height:1.8}
@media (prefers-color-scheme:dark){.item .sum{color:var(--mute)}}
.item .cv{flex:0 0 7.5rem}.item .cv img{width:7.5rem;height:5.2rem;object-fit:cover;border-radius:6px;display:block}
.pager{display:flex;gap:1.4rem;justify-content:center;align-items:center;padding-top:20rem;color:var(--mute);font-size:.9rem}
.pager .btn{margin:0}
/* 文章页 */
.post{padding-top:.8rem}
.post .content{margin:1.6rem 0 3rem;overflow-wrap:break-word}
.content p{margin:0 0 1rem}
.content a{color:var(--acc);text-decoration:underline;text-decoration-color:rgba(179,56,44,.3);text-underline-offset:.2em}
.content h2,.content h3{margin:2rem 0 .8rem;line-height:1.5}
.content img{max-width:100%;height:auto;border-radius:6px;cursor:zoom-in}.content a img{cursor:pointer}
.content figure{margin:1.6rem 0}.content figure img{display:block;width:100%}
.content figcaption{margin-top:.55rem;font-size:.8rem;color:var(--mute);line-height:1.6}
/* 文章 / 首页无标题短讯的图片加载占位：图片加载完成前显示默认大小的框，中间是加载动画（lightbox.js 添加 .img-box） */
.img-box{position:relative;display:block}
.img-box.loading,.img-box.failed{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;border-radius:6px;background:var(--soft);border:1px solid var(--line)}   /* 默认 4:3，想改比例改这里 */
.img-box.loading img,.img-box.failed img{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.img-box:not(.loading):not(.failed) img{animation:img-fade .3s ease}
@keyframes img-fade{from{opacity:0}to{opacity:1}}
/* 加载动画：一个深色点沿着 3×3 圆点的外圈跑 */
.px-loader{display:none;flex-direction:column;align-items:center;gap:14px;color:var(--mute);font-size:.8rem;line-height:1}
.img-box.loading .px-loader,.img-box.failed .px-loader{display:flex}
.img-box.failed .px-loader i{display:none}
.px-loader i{--d:12px;--g:3px;--s:calc(var(--d) + var(--g));position:relative;display:block;width:calc(var(--d) + var(--s)*2);height:calc(var(--d) + var(--s)*2)}
.px-loader i::before{content:"";position:absolute;left:0;top:0;width:var(--d);height:var(--d);border-radius:50%;background:var(--line);
  box-shadow:var(--s) 0 var(--line),calc(var(--s)*2) 0 var(--line),calc(var(--s)*2) var(--s) var(--line),calc(var(--s)*2) calc(var(--s)*2) var(--line),var(--s) calc(var(--s)*2) var(--line),0 calc(var(--s)*2) var(--line),0 var(--s) var(--line)}
.px-loader i::after{content:"";position:absolute;left:0;top:0;width:var(--d);height:var(--d);border-radius:50%;background:var(--fg);animation:px-run .8s steps(1) infinite}
@keyframes px-run{0%{transform:translate(0,0)}12.5%{transform:translate(var(--s),0)}25%{transform:translate(calc(var(--s)*2),0)}37.5%{transform:translate(calc(var(--s)*2),var(--s))}50%{transform:translate(calc(var(--s)*2),calc(var(--s)*2))}62.5%{transform:translate(var(--s),calc(var(--s)*2))}75%{transform:translate(0,calc(var(--s)*2))}87.5%{transform:translate(0,var(--s))}}
.content pre{background:var(--soft);padding:.9rem 1.1rem;border-radius:8px;overflow-x:auto;font-size:.86rem;line-height:1.6}
.content code{background:var(--soft);padding:.1em .35em;border-radius:4px;font-size:.88em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.content pre code{background:none;padding:0}
.content blockquote{margin:1.2em 0;padding:.1em 1.1em;border-left:3px solid var(--line);color:var(--mute)}
.content table{border-collapse:collapse;display:block;overflow-x:auto}.content th,.content td{border:1px solid var(--line);padding:.35rem .7rem}
/* 评论 */
#comments{border-top:1px solid var(--line);padding-top:1.2rem}
.clist{list-style:none;margin:0;padding:0}
.clist .clist{margin-left:1.4rem;padding-left:.9rem;border-left:2px solid var(--line)}
.clist .clist .clist .clist{margin-left:0}
.c-item{padding:1rem 0;border-bottom:1px dashed var(--line)}
#c-list>.c-item:last-child{border-bottom:0}
.c-head{display:flex;gap:.8rem;align-items:center}
.c-av{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;overflow:hidden;background:linear-gradient(#b5bbc6,#8a92a0);color:#fff;font-size:1.15rem;font-weight:600;line-height:1;user-select:none;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--line)}
.c-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.c-av.has-img .c-ch{visibility:hidden}
.c-meta{display:grid;gap:.1rem;min-width:0}
.c-line{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;line-height:1.4}
.c-name{font-weight:700;font-size:1rem}
a.c-name{color:var(--acc)}a.c-name:hover{color:var(--acc)}   /* 留了网站的访客：名字用强调色 */
.c-tag{font-size:.72rem;color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:0 .4em;line-height:1.55}
.c-ua.iconfont{font-size:1.05rem;color:var(--mute);line-height:1;cursor:default}
.c-sub{font-size:.8rem;color:var(--mute);line-height:1.5}
.c-reply{background:none;border:0;padding:0;color:inherit;font-size:.8rem;cursor:pointer;border-radius:0}.c-reply:hover{opacity:1;background:none;color:var(--acc);text-decoration:none}
.c-body{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:.55rem;line-height:1.8}
.owo{vertical-align:text-bottom}.owo-s{height:1.7em;width:auto;margin:0 .06em}.owo-b{width:2.8rem;height:auto;margin:0 .1em;vertical-align:bottom}   /* 大表情：宽 45px，想再小就改这里的 width */
#c-form{display:grid;gap:.7rem;margin:.75rem 0 1.25rem}
#comments hr{margin:1.7rem 0}
.c-item #c-form{margin:.8rem 0 .2rem}
#c-form textarea{padding:.65rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
#c-form textarea:focus{box-shadow:none}
#c-who{margin:0;color:var(--mute)}
#c-replying{justify-self:start}
#c-msg{color:var(--mute);font-size:.88rem}#c-msg.bad{color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* 表情 */
.c-bar{display:block}
/* 表情按钮走 .btn-sub（浅底、细边框）。旧静态文章页还没重新生成、没有该 class 时，
   用 :not(.btn-sub) 兜底同样的外观，避免变成浏览器默认按钮；重新生成后自动交回 .btn-sub */
#owo-toggle{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;vertical-align:middle}
#owo-toggle:not(.btn-sub){padding:.4rem 1.1rem;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--fg);cursor:pointer;line-height:1.6}
#owo-toggle[aria-expanded=true]{border-color:var(--acc);color:var(--acc)}
#owo-panel{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;visibility:hidden;
  transition:grid-template-rows .32s ease,margin-top .32s ease,opacity .25s ease,visibility 0s .32s}
#owo-panel.open{grid-template-rows:1fr;margin-top:.6rem;opacity:1;visibility:visible;
  transition:grid-template-rows .32s ease,margin-top .32s ease,opacity .25s ease .05s,visibility 0s}
.owo-inner{min-height:0;overflow:hidden}
.owo-scroll{max-height:17rem;overflow-y:auto;padding:.8rem 1rem .5rem;border-radius:10px;background:var(--soft);border:1px solid var(--line)}
.owo-grid{display:flex;flex-wrap:wrap;gap:.1rem .35rem}.owo-grid+.owo-grid{margin-top:.4rem}
.owo-item{padding:.15rem;border:0;border-radius:6px;background:none;line-height:0;cursor:pointer}
.owo-item:hover{background:rgba(0,0,0,.06);transform:scale(1.12);opacity:1}
.owo-item img{height:1.9rem;width:auto;display:block}.owo-item.big img{height:auto;width:2.8rem}
.owo-credit{margin:.5rem 0 0;font-size:.72rem;line-height:1.4;color:var(--mute);opacity:.6}
/* 图片放大（lightbox.js）：背景模糊，图片下方一行图注 */
.lb{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem 1rem;cursor:zoom-out;
  background:rgba(250,245,240,.85);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lb{background:rgba(250,245,240,.45);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}
.lb.open{opacity:1;visibility:visible;transition:opacity .25s ease}
.lb-fig{margin:0;max-width:100%;display:flex;flex-direction:column;align-items:center;transform:scale(.96);transition:transform .28s ease}
.lb.open .lb-fig{transform:none}
.lb-img{display:block;max-width:min(94vw,1280px);max-height:calc(100vh - 7.5rem);width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 10px 40px rgba(60,40,20,.25)}
.lb-cap{margin-top:.8rem;max-width:min(92vw,46rem);text-align:center;font-size:.92rem;line-height:1.7;color:var(--fg);min-height:1.7em}
.lb-cap:empty{display:none}
.lb button{position:absolute;width:2.5rem;height:2.5rem;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--soft);color:var(--fg);font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center}
.lb-close{top:1rem;right:1rem}
html.lb-lock{overflow:hidden}
@media (prefers-color-scheme:dark){.lb{background:rgba(28,27,25,.88)}@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lb{background:rgba(28,27,25,.55)}}}
/* 后台 */
nav.adm{display:flex;gap:1.1rem;align-items:baseline;margin-left:auto;font-size:.92rem;flex-wrap:wrap}form.inline{display:inline}
/* 后台评论列表分页 */
nav.cpager{display:flex;gap:1.1rem;align-items:center;margin:1.4rem 0 .4rem;font-size:.9rem;color:var(--mute)}
nav.cpager .btn{margin:0}
.badge{font-style:normal;font-size:.72rem;background:var(--err);color:#fff;border-radius:9px;padding:0 .45em;margin-left:.25em}
.flash{background:var(--soft);padding:.5rem .8rem;border-radius:6px}.err{color:var(--err)}
.login{max-width:20rem;margin:3rem auto;display:grid;gap:.9rem}
.edit{display:grid;gap:.9rem}.edit label{display:grid;gap:.25rem;font-size:.9rem;color:var(--mute)}.edit label.chk{display:flex;gap:.4rem;align-items:center;color:var(--fg)}
.edit label.chk input{width:auto}.mono{font:.9rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.edit input,.edit textarea,.crow textarea,.acts textarea{padding:.5rem .65rem;border:1px solid var(--line);border-radius:6px;background:var(--soft)}
.edit input:focus,.edit textarea:focus,.crow textarea:focus,.acts textarea:focus{box-shadow:none}
.edit label.chk input{padding:0}
/* 全站 input 关掉了原生外观，后台的“发布”复选框要单独恢复，否则只剩一个看不见的空框 */
.edit label.chk input[type=checkbox]{-webkit-appearance:checkbox;appearance:auto;width:1.05rem;height:1.05rem;min-width:1.05rem;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;accent-color:var(--acc);cursor:pointer;flex:0 0 auto}
.edit label.chk input[type=checkbox]:focus{box-shadow:none}
.edit label.chk input[type=checkbox]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}.tbl th,.tbl td{text-align:left;padding:.55rem .4rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl .acts form{margin-left:.6rem}
.crow{padding:.9rem 0;border-bottom:1px solid var(--line)}.acts{display:flex;gap:.9rem;flex-wrap:wrap;align-items:flex-start;margin-top:.4rem;font-size:.9rem}
.tbl td.acts{display:table-cell;margin-top:0;white-space:nowrap}
.acts details{flex:1 1 100%}.acts details form{display:grid;gap:.5rem;margin-top:.5rem}
@media (max-width:34rem){h1{font-size:1.65rem}.item.has-cover{flex-direction:column}.item .cv img{width:100%;height:9rem}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important}.px-loader i::after{animation:none!important}}