/* ============ 1. 设计变量：蓝为主，纸为底 ============ */
:root{
  --bg:#f3f6fc;
  --paper:#ffffff;
  --surface:#fff;
  --surface-alt:#f5f8fd;
  --text:#18202c;
  --text-soft:#5a6575;
  --text-mute: #67707f;
  --line: #e2e9f3;
  --line-soft:#eef2f9;
  --brand:#3f5bd9;
  --brand-deep:#2b3fa8;
  --brand-hover:#3349b8;
  --brand-soft:#e9eefd;
  --accent:#e0a33e;
  --accent-soft:#fbf3e3;
  --teal:#22a29a;
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:18px;
  --ring:0 0 0 3px rgba(63,91,217,.14);
  --shadow:0 1px 2px rgba(23,43,77,.04),0 6px 20px rgba(23,43,77,.06);
  --shadow-hover:0 2px 4px rgba(23,43,77,.05),0 12px 30px rgba(63,91,217,.13);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{padding:0;margin:0;font-family:ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;}
html{-webkit-text-size-adjust:100%}
body{
  line-height:1.75;
  max-width:800px;
  margin:0 auto;
  font-size:16px;
  padding:9px;
  color:var(--text);
  min-height:100vh;
  background:
    radial-gradient(900px 460px at 8% -10%, rgba(63,91,217,.10), transparent 62%),
    radial-gradient(760px 400px at 100% 0%, rgba(34,162,154,.07), transparent 60%),
    linear-gradient(180deg,#f6f9ff 0%, var(--bg) 46%, #f7f9fd 100%);
  background-attachment:fixed;
}
a{text-decoration:none;color:var(--brand);transition:color .2s var(--ease)}
a:hover{color:var(--brand-hover)}
a,h1{font-weight:600}
h1,h2,h3{color:var(--text);letter-spacing:.01em}
h1{font-size:1.5rem;line-height:1.45}
h2,h3{margin-bottom:15px}
h2,.zho,footer{text-align:center}
.sr-only {position: absolute;clip-path: inset(50%);}
/* ============ 2. 页头：玻璃拟态 + 渐显标题 ============ */
header{
  position:relative;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;margin-bottom:1.6em;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(10px) saturate(1.4);
  backdrop-filter:blur(10px) saturate(1.4);
  border:1px solid rgba(226,233,243,.9);
  border-radius:var(--radius-xl);
  box-shadow:0 1px 2px rgba(23,43,77,.04),0 10px 26px rgba(23,43,77,.05);
  animation:fadeDown .5s var(--ease) both;
}
header h1{
  position:relative;
  padding-left:14px;
  align-self:center;
  background:linear-gradient(100deg,var(--brand-deep) 0%,var(--brand) 52%,#5f7bf0 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:titleFade .9s var(--ease) both;
}
header h1::after{
  content:"";position:absolute;left:14px;bottom:-4px;height:2px;width:100%;border-radius:99px;
  background:linear-gradient(90deg,rgba(63,91,217,.55),rgba(63,91,217,0));
  transform-origin:left;transform:scaleX(0);
  animation:lineGrow .8s .3s var(--ease) forwards;
}

/* 返回首页按钮 */
.home-link{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:8px 16px;border-radius:999px;
  color:var(--brand);background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(23,43,77,.04);
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.home-link:hover,.home-link:active{
  background:linear-gradient(135deg,var(--brand),#5c74ee);
  border-color:transparent;color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(63,91,217,.26);
}

/* ============ 3. 导航：胶囊分组 ============ */
#nav{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.5rem;
  margin:1.2rem .5rem;padding:6px;
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  box-shadow:var(--shadow);
  animation:fadeUp .55s .05s var(--ease) both;
}
.nav-item{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:.5em .2em;border-radius:var(--radius);
  color:var(--text-soft);font-size:.9em;white-space:nowrap;
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.nav-item i{font-size:1.05em;transition:transform .25s var(--ease)}
.nav-item:hover{background:var(--brand-soft);color:var(--brand);transform:translateY(-1px)}
.nav-item:hover i{transform:translateY(-1px) scale(1.06)}
.nav-item.on{
  color:#fff;
  background:linear-gradient(135deg,var(--brand) 0%,#5c74ee 100%);
  box-shadow:0 6px 16px rgba(63,91,217,.28);
}
.nav-item.on:hover{color:#fff}

/* ============ 4. 随机箴言：便签条 ============ */
#geyan{
  position:relative;
  display:grid;gap:1.2rem;margin:1.2rem .5rem;
  padding:16px 18px 16px 40px;
  border-radius:var(--radius-lg);
  border:1px solid #f0e2c6;
  color:#6d5116;
  background:
    linear-gradient(135deg,var(--accent-soft),#fdf8ee 62%,#fffdf8);
  box-shadow:0 1px 2px rgba(122,90,23,.05),0 8px 22px rgba(190,150,70,.10);
  animation:fadeUp .55s .1s var(--ease) both;
}
#geyan::before{
  content:"\f10d";font-family:FontAwesome;font-style:normal;
  position:absolute;left:16px;top:16px;
  font-size:1em;color:var(--accent);opacity:.7;
}

/* ============ 5. 文本与正文 ============ */
p{text-indent:2em;margin-bottom:.6rem;word-break:break-all}
.p1{font-size:1.1em}
.p2{font-size:1.2em}
.p8,.ping,.time{font-size:.8em}
.p9{font-size:.9em}
.zho{
  margin:1.4rem 0 .6rem;font-size:.95em;color:var(--text-soft);letter-spacing:.04em;
}
.zho i{color:var(--brand);margin-right:.25em}

/* ============ 6. 卡片 ============ */
.grid1,.grid2{display:grid;gap:1.2rem;margin:1.2rem .5rem}
.grid2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid1{grid-template-columns:minmax(280px,1fr)}
.item{
  position:relative;
  border-radius:var(--radius-lg);
  padding:16px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:box-shadow .28s var(--ease),transform .28s var(--ease),border-color .28s var(--ease);
  animation:fadeUp .6s var(--ease) both;
}
.item:hover{
  transform:translateY(-3px);
  border-color:#d5e0f4;
  box-shadow:var(--shadow-hover);
}
/* 同一批卡片错开一点点，进页面有先后感 */
.grid1>.item:nth-child(2),.grid2>.item:nth-child(2){animation-delay:.04s}
.grid1>.item:nth-child(3),.grid2>.item:nth-child(3){animation-delay:.08s}
.grid1>.item:nth-child(4),.grid2>.item:nth-child(4){animation-delay:.12s}
.grid1>.item:nth-child(5),.grid2>.item:nth-child(5){animation-delay:.16s}
.grid1>.item:nth-child(6),.grid2>.item:nth-child(6){animation-delay:.2s}
.grid1>.item:nth-child(n+7),.grid2>.item:nth-child(n+7){animation-delay:.24s}

/* 文章标题：hover 划线从中间展开 */
.grid1>.item h3>a{
  position:relative;display:inline;
  background:linear-gradient(var(--brand),var(--brand)) no-repeat left 100%/0 1.5px;
  transition:background-size .3s var(--ease),color .2s var(--ease);
  padding-bottom:2px;
}
.grid1>.item h3>a:hover{background-size:100% 1.5px}

/* 时间 / 作者 / 地点：小胶囊标签 */
.time{
  display:flex;align-items:center;flex-wrap:wrap;gap:2px;
  margin:8px 0;color:var(--text-soft);font-size:.78em;
}
.time i{margin:0 6px 0 10px;color:var(--brand);opacity:.75;font-size:.95em}
.time i:first-child{margin-left:0}
.item>.time{flex-wrap:wrap;line-height:1.9}
.item>.time i{margin:0 5px 0 9px}
.item>.time i:first-child{margin-left:0}
.item>.time i.fa-calendar{margin-left:11px}

/* 上一篇 / 下一篇 */
.pn-card{display:flex;flex-direction:column;padding:6px 16px}
.pn-row{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 0;
  color:var(--text);transition:color .2s var(--ease);
}
.pn-row:hover{color:var(--brand)}
.pn-row:hover .fa{color:var(--brand)}
.pn-row:hover .pn-tag .fa:first-child{transform:translateX(-2px)}
.pn-row:hover .pn-tag .fa:last-child{transform:translateX(2px)}
.pn-tag{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  font-size:.78em;color:var(--text-mute);white-space:nowrap;
}
.pn-title{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.95em;font-weight:400;
}
.pn-split{flex:none;height:1px;background:var(--line)}
.pn-row.is-disabled{cursor:default}
.pn-row.is-disabled .pn-title{color:var(--text-mute)}
.pn-row.is-disabled:hover{color:var(--text)}
.pn-row.is-disabled:hover .fa{color:inherit;transform:none}
.pn-card .fa{transition:transform .2s var(--ease)}

/* ============ 7. 标签、表单、按钮 ============ */
.ping{
  border:1px solid #dbe4ff;border-radius:999px;padding:.16em .6em;
  color:var(--brand);background:var(--brand-soft);font-size:.78em;
}
textarea,input[type=text]{
  width:95%;margin:0 auto;
  border:1px solid var(--line);border-radius:8px;
  background:var(--paper);color:var(--text);
  padding:.45em .6em;font-size:1em;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
textarea:focus,input[type=text]:focus{
  outline:none;border-color:var(--brand);box-shadow:var(--ring);background:#fff;
}
input,button{font-size:.9em}
button{
  border-radius:8px;border:1px solid var(--line);
  background:var(--paper);color:var(--text);
  padding:.35em .8em;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
}
button:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
button:active{transform:scale(.97)}
.click,.page-btn{cursor:pointer}

table,textarea{width:95%;margin:0 auto;font-size:.9em;padding:.25em}
.item table{border:1px solid var(--line);border-radius:10px;border-collapse:separate;border-spacing:0;overflow:hidden}
.item td{border-color:var(--line)}

/* ============ 8. 分页 ============ */
.pagination{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px}
.page-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 16px;border:none;border-radius:999px;
  color:#fff;font-size:.85em;
  background:linear-gradient(135deg,var(--brand),#5c74ee);
  box-shadow:0 4px 12px rgba(63,91,217,.20);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),filter .2s var(--ease),opacity .2s var(--ease);
}
.page-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(63,91,217,.3);filter:saturate(1.1)}
.page-btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.page-btn:disabled{
  background:#dfe6f2;color:#f4f6fa;cursor:not-allowed;
  box-shadow:none;opacity:.9;
}
.page-info{font-size:.82rem;color:var(--text-soft);font-weight:600}

/* ============ 9. 代码块 ============ */
pre{
  position:relative;
  margin:12px 0;padding:12px 12px 12px 16px;
  border-radius:10px;
  border:1px solid var(--line);
  border-left:3px solid rgba(63,91,217,.55);
  background:linear-gradient(180deg,#f7f9fe,#f2f6fd);
  color:#22303f;line-height:1.6;font-size:.88rem;
  white-space:pre-wrap;word-break:break-all;
}

/* ============ 10. 评论 / 留言 ============ */
.cmt-form{padding:14px 16px}
.cmt-form-hd{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cmt-form-tt{
  font-size:.95em;font-weight:600;line-height:1.4;
  color:var(--brand-deep);
}
.cmt-form-hd button{margin-left:auto;font-size:.85em;padding:.32em .9em;border-radius:999px}
.cmt-form-hd button+button{margin-left:0}
.cmt-submit{
  background:linear-gradient(135deg,var(--brand),#5c74ee);
  border-color:transparent;color:#fff;
  box-shadow:0 4px 12px rgba(63,91,217,.22);
}
.cmt-submit:hover{
  background:linear-gradient(135deg,var(--brand-deep),var(--brand));
  border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(63,91,217,.3);
}
.cmt-form-bd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cmt-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.cmt-field>span{font-size:.76em;color:var(--text-mute)}
.cmt-field-full{grid-column:1/-1}
.cmt-field input,.cmt-field textarea{
  box-sizing:border-box;width:100%;
  border:1px solid var(--line);border-radius:9px;
  background:var(--surface-alt);color:var(--text);
  padding:.5em .65em;font-size:.9em;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.cmt-field textarea{min-height:96px;resize:vertical;line-height:1.65}
.cmt-field input:focus,.cmt-field textarea:focus{
  outline:none;background:#fff;border-color:var(--brand);box-shadow:var(--ring);
}

.cmt{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:12px;align-items:start;margin:7px;
}
.cmt-avatar{
  grid-column:1;grid-row:1/span 2;
  width:64px;height:64px;border-radius:12px;object-fit:cover;
  border:1px solid var(--line);background:var(--surface-alt);
  box-shadow:0 2px 8px rgba(23,43,77,.06);
}
.cmt-main{grid-column:2;grid-row:1/span 2;min-width:0}
.cmt .ping{
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:var(--surface-alt);
  color:var(--text);
  padding:.55em .75em;line-height:1.65;
}
.cmt .ping:empty{display:none}
.cmt .ping img,.grid1 .item div img{max-width:100%;height:auto;display:block;border-radius:8px;margin:6px 0}
.reply-mark{
  display:inline-flex;align-items:center;gap:.25em;
  margin-right:.35em;padding:0 .5em;border-radius:999px;
  font-size:.9em;line-height:1.7;vertical-align:.08em;
  color:var(--brand);
  background:linear-gradient(135deg,var(--brand-soft),#eef3ff);
}
.reply-mark::before{content:"\f1fa";font-family:FontAwesome;font-size:.9em;font-style:normal;font-weight:400}
.cmt .time{flex-wrap:wrap;gap:.15em 0;color:var(--text-soft)}
.cmt .time i{color:var(--text-soft);opacity:1}
.cmt .time .click{
  margin-left:auto;padding:0 .55em;border-radius:999px;font-style:normal;
  color:var(--brand);transition:background .2s var(--ease),color .2s var(--ease);
}
.cmt .time .click:hover{background:var(--brand-soft);color:var(--brand-deep)}
.cmt-kids{
  position:relative;
  margin:12px 0 0 22px;padding-left:14px;
  border-left:1px dashed transparent;
  background:linear-gradient(180deg,var(--line) 0%,var(--line) 100%) no-repeat left top/1px 100%;
}
.cmt-kids>.cmt{animation:fadeUp .45s var(--ease) both}
#article-view>.item>hr{border:none;height:1px;background:var(--line);margin:0}
.cmt+.cmt{border-top:1px solid var(--line-soft);padding-top:12px;margin-top:12px}

/* 留言板 */
.shuo>.item+.item{margin-top:1.2rem}
.shuo .cmt-box>.cmt+.cmt{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}

/* ============ 11. 页脚 ============ */
footer{
  margin-top:26px;padding:1.4em 0 .6em;
  border-top:1px solid var(--line);
  color:var(--text-mute);font-size:.75rem;line-height:2;
}
footer a{color:var(--text-soft);padding:0 3px;transition:color .2s var(--ease)}
footer a:hover{color:var(--brand)}
footer img,.badge,footer>img{opacity:.92;vertical-align:middle;height:18px;width:auto}
a img{vertical-align:middle}

hr{border:none;height:1px;background:var(--line);margin:1.2em 0}

/* ============ 12. 杂项内联样式收编（games / links / 时光轴 / 空态） ============ */
.item .game-title{font-size:1.15rem;margin-bottom:8px;line-height:1.5}
.item .game-description{color:var(--text-soft)!important;margin-bottom:14px!important;font-size:.88rem!important;text-indent:0}
.item .play-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:999px;
  color:#fff;font-size:.85rem;
  background:linear-gradient(135deg,var(--brand),#5c74ee);
  box-shadow:0 4px 12px rgba(63,91,217,.2);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease);
}
.item .play-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(63,91,217,.3)}
.link-icon{width:40px;height:40px;margin-right:15px;object-fit:contain;border-radius:8px}
.link-text{flex:1;min-width:0}
.link-title{font-weight:600;font-size:.98rem;margin-bottom:4px;color:var(--text)}
.link-desc{font-size:.84rem;color:var(--text-soft);line-height:1.5}
.grid2>a.item{display:flex;align-items:center}
.grid2>a.item:hover .link-title{color:var(--brand)}
.grid2>a.item:hover .link-icon{transform:scale(1.04)}
.grid2>a.item .link-icon{transition:transform .25s var(--ease)}

/* 时光轴：修掉原内联样式的无效值，视觉与主站一致 */
#sjx{
  max-width:100%!important;margin:1.2rem auto!important;
  padding:18px 16px!important;
  border-radius:var(--radius-lg)!important;
  border:1px solid var(--line);
  box-shadow:var(--shadow)!important;
  background:var(--paper)!important;
}
.timeline-item{position:relative;padding:10px 0 10px 30px!important}
.timeline-item::before{
  content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(63,91,217,.35),rgba(63,91,217,.12))!important;
  border-radius:99px;
}
.timeline-item:first-child::before{top:22px!important}
.timeline-item:last-child::before{bottom:calc(100% - 22px)!important}
.timeline-item::after{
  content:"";position:absolute;left:6px;top:20px;
  width:10px;height:10px;border-radius:50%;
  background:var(--brand)!important;
  box-shadow:0 0 0 3px var(--brand-soft);
  transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.timeline-item:hover::after{background:var(--teal)!important;box-shadow:0 0 0 4px rgba(34,162,154,.16)}
.timeline-text{margin-bottom:5px!important;line-height:1.6!important;font-size:.95em}
.timeline-time{font-size:.75rem!important;color:var(--text-mute)!important;letter-spacing:.02em}

/* 空态占位（各处内联的 #666 灰） */
.item div[style*="text-align:center"][style*="#666"],
.item div[style*="text-align: center"][style*="#666"]{color:var(--text-mute)!important;font-size:.88em}

/* ============ 13. 轻动效关键帧 ============ */
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes titleFade{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes lineGrow{to{transform:scaleX(1)}}

/* ============ 14. 响应式（沿用 520 / 768 两个断点） ============ */
@media (max-width:520px){
  #nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem;margin:1rem .25rem;padding:5px}
  .nav-item{flex-direction:column;gap:3px;padding:.6em .1em;font-size:.72em;min-height:46px}
  .nav-item i{font-size:1.3em}
  #geyan{padding:14px 14px 14px 36px;margin:1rem .25rem}
  #geyan::before{left:13px;top:14px}
  header{padding:11px 13px;margin-bottom:1.2rem;border-radius:var(--radius-lg)}
  header h1{font-size:1.25rem;padding-left:12px}
  header h1::after{left:12px}
  .item{padding:14px;border-radius:var(--radius)}
  .grid1,.grid2{gap:1rem;margin:1rem .25rem}
  .cmt{column-gap:9px}
  .cmt-avatar{width:40px;height:40px;border-radius:9px}
  .cmt-kids{margin-left:8px;padding-left:10px}
  .cmt-form{padding:12px}
  .cmt-form-bd{grid-template-columns:minmax(0,1fr)}
  .cmt .time{font-size:.76em}
  .time i{margin:0 5px 0 8px}
  .pn-card{padding:4px 14px}
  .pn-row{min-height:40px;gap:8px}
  .pn-title{font-size:.9em}
  pre{font-size:.82rem;padding:11px 11px 11px 13px}
  .page-btn{padding:8px 14px}
  footer{line-height:1.9}
}
@media (min-width:768px){body{font-size:19px}}

/* 尊重系统的减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}