:root{
  --bg:#fbfaf8; --fg:#25231f; --muted:#7a756c; --line:#e6e2da;
  --card:#ffffff; --accent:#c2410c; --accent-soft:#fdece3;
  --radius:14px; --maxw:820px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14130f; --fg:#eceae4; --muted:#9b968b; --line:#2c2a24;
         --card:#1c1a15; --accent:#f59e6b; --accent-soft:#2a1f18; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.75 ui-sans-serif,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.site-head{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 22px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(8px);
}
.brand{font-weight:700; color:var(--fg); font-size:17px}
.site-head nav{display:flex; gap:18px; font-size:15px}
.site-head nav a{color:var(--muted)}
.site-head nav a:hover{color:var(--fg); text-decoration:none}
main{max-width:var(--maxw); margin:0 auto; padding:38px 22px 64px}
h1{font-size:32px; line-height:1.3; margin:0 0 10px}
h2{font-size:21px; margin:36px 0 12px}
p{margin:0 0 14px}
.lead{color:var(--muted); font-size:17px; margin-bottom:30px}
.grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card{
  display:block; padding:16px 18px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); color:var(--fg); transition:transform .12s ease, border-color .12s ease;
}
a.card:hover{transform:translateY(-2px); border-color:var(--accent); text-decoration:none}
.card h3{margin:0 0 6px; font-size:16px}
.card .meta{color:var(--muted); font-size:13px}
.card p{margin:6px 0 0; color:var(--muted); font-size:14px}
.tag{display:inline-block; padding:1px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:12px}
.note-body{font-size:16.5px}
.note-body h1{font-size:27px}
.note-body h2{font-size:20px; margin-top:30px}
.note-body h3{font-size:17px; margin:24px 0 8px}
.note-body ul,.note-body ol{padding-left:22px; margin:0 0 14px}
.note-body li{margin:4px 0}
.note-body blockquote{
  margin:0 0 14px; padding:10px 16px; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 8px 8px 0; color:var(--fg)
}
.note-body code{background:var(--accent-soft); padding:1px 5px; border-radius:5px; font-size:.9em}
.note-body pre{background:var(--card); border:1px solid var(--line); padding:14px; border-radius:10px; overflow:auto}
.note-body pre code{background:none; padding:0}
.note-body img{max-width:100%; border-radius:10px}
.note-body hr{border:0; border-top:1px solid var(--line); margin:26px 0}
.tool{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.tool h3{margin:0 0 4px; font-size:16px}
.tool .meta{color:var(--muted); font-size:13px; margin-bottom:12px}
.tool-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
input,button,select,textarea{font:inherit}
input[type=text],input[type=number],textarea{
  padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--bg); color:var(--fg); min-width:0
}
button{
  padding:8px 14px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--fg); cursor:pointer
}
button:hover{border-color:var(--accent); color:var(--accent)}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff}
button.primary:hover{filter:brightness(1.06); color:#fff}
.out{margin-top:12px; font-size:15px; min-height:1.3em}
.mono{font-variant-numeric:tabular-nums; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.clock{font-size:34px; font-variant-numeric:tabular-nums; letter-spacing:1px}
.slot{color:var(--muted); font-size:13.5px; border-style:dashed}
.site-foot{
  max-width:var(--maxw); margin:0 auto; padding:20px 22px 40px; color:var(--muted); font-size:13px;
  display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line)
}
.dot{opacity:.5}
.back{display:inline-block; margin-bottom:18px; font-size:14px}
@media (max-width:520px){
  h1{font-size:26px} main{padding-top:26px}
  .site-head{padding:12px 16px} .site-head nav{gap:14px}
}

/* ---- 玩玩页 ---- */
.play-card{display:flex; flex-direction:column; gap:10px}
.play-card h3{margin:0}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{padding:6px 12px; border-radius:999px; font-size:14px}
.chip.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.big-line{
  font-size:19px; line-height:1.6; min-height:2.2em; padding:14px 16px;
  border-radius:12px; background:var(--accent-soft); color:var(--fg)
}
.pop{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.97); opacity:.5}100%{transform:scale(1); opacity:1}}
.capsules{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.capsule{border:1px dashed var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:4px}
.capsule.open{border-style:solid; border-color:var(--accent)}
.cap-text{font-size:15px}
button.link{background:none; border:0; padding:0; color:var(--muted); font-size:13px; align-self:flex-start; cursor:pointer}
button.link:hover{color:var(--accent)}
.sticker-wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px; margin-top:4px}
.sticker-wall img{
  width:100%; aspect-ratio:1; object-fit:contain; padding:6px; cursor:zoom-in;
  border:1px solid var(--line); border-radius:12px; background:var(--bg); transition:transform .12s ease
}
.sticker-wall img:hover{transform:translateY(-2px) scale(1.03); border-color:var(--accent)}
.lightbox{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); cursor:zoom-out; padding:24px
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(90vw,760px); max-height:86vh; border-radius:12px; background:#fff}

/* ---- 账号 ---- */
.auth-card{max-width:460px}
.auth-tabs{display:flex; gap:8px; margin-bottom:16px}
.tab{padding:6px 16px; border-radius:999px}
.tab.on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.auth-form{display:flex; flex-direction:column; gap:12px}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted)}
.auth-form input{
  padding:9px 11px; border:1px solid var(--line); border-radius:9px;
  background:var(--bg); color:var(--fg); font-size:15px
}
.auth-form button{align-self:flex-start; margin-top:4px}
.who{display:flex; gap:12px; align-items:center; margin-bottom:18px}
.avatar{
  width:46px; height:46px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700
}
.who-mail{font-size:15px; font-weight:600}

/* ---- 上传 ---- */
.uploader{margin-top:18px}
.uploader h3{margin:0 0 6px; font-size:16px}
.uploader input[type=file]{
  font-size:14px; color:var(--muted); max-width:100%;
  padding:10px; border:1px dashed var(--line); border-radius:10px; width:100%; background:var(--bg)
}
.files{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; margin-top:14px}
.file-row{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg)}
.file-row img{width:100%; height:96px; object-fit:cover; display:block; cursor:zoom-in}
.file-name{display:block; padding:10px; font-size:13px; word-break:break-all}
.file-meta{display:flex; align-items:center; gap:8px; padding:6px 8px; font-size:12px; color:var(--muted); border-top:1px solid var(--line)}
.file-meta a{color:var(--accent)}
.file-meta span{margin-left:auto}
button.link{background:none; border:0; color:var(--muted); font-size:12px; padding:0 2px; cursor:pointer}
button.link:hover{color:#c0392b}

/* ---- 公开墙 ---- */
.wall-upload{margin-bottom:18px}
.wall-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lightbox{
  position:fixed; inset:0; z-index:99; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.82); cursor:zoom-out
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw; max-height:86vh; border-radius:8px}
.lb-tip{position:absolute; bottom:26px; color:#fff; opacity:.6; font-size:13px}

/* ---- 我的笔记 ---- */
.note-editor{margin-bottom:24px}
.ne-form{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.ne-form input,.ne-form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--fg); font-size:15px; font-family:inherit
}
.ne-form textarea{resize:vertical; line-height:1.7}
.my-note{border-top:1px solid var(--line); padding:14px 0}
.my-note:first-of-type{border-top:0}
.mn-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.mn-head .meta{margin-left:auto}
.mn-body{margin-top:10px}
.mn-tools{gap:14px; margin-top:6px}
.wall-notes-card{margin-top:20px}

/* ---- 墙墙搜索 ---- */
.wall-search{display:flex; align-items:center; gap:12px; margin:0 0 16px}
.wall-search input{
  flex:1; max-width:420px; padding:9px 13px; border:1px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--fg); font-size:15px; font-family:inherit
}
.wall-search input::-webkit-search-cancel-button{cursor:pointer}

/* 笔记卡片：墙墙 / 笔记 / 首页共用，跟站内文章统一 */
.note-card{padding:0; display:flex; flex-direction:column}
.note-card .card-link{display:block; padding:16px 18px 8px; color:inherit}
.note-card .card-link:hover{text-decoration:none}
.note-card:hover{transform:translateY(-2px); border-color:var(--accent)}
.note-card h3{line-height:1.35}
.note-card p{min-height:20px}
.note-card .note-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 18px 12px; margin-top:auto}
.note-card .note-foot .meta{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.note-card .note-actions{display:flex; align-items:center; gap:8px; padding:0; margin:0; flex:0 0 auto}
.note-card .note-actions .link{padding:2px 4px}
.note-card .note-actions .tag{font-size:11px}
/* 墙墙：文件选择 + 文字贴 */
.wall-post{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:8px}
.wall-post input[type=text]{width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); font-size:14px}
.wall-post textarea{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); font-size:14px; font-family:inherit; resize:vertical}
/* 「我的」：改名与换头像 */
.avatar-btn{padding:0; border:1px solid var(--line); background:var(--accent-soft); color:var(--accent); cursor:pointer; overflow:hidden; font:inherit; font-size:18px; font-weight:600}
.avatar-btn img{width:100%; height:100%; object-fit:cover; display:block}
.avatar-btn:hover{border-color:var(--accent)}
.who-name{font-size:17px; font-weight:600; margin-bottom:2px}
.profile-edit{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:14px 0 4px; padding-top:14px; border-top:1px dashed var(--line)}
.profile-edit input[type=text]{flex:1 1 180px; min-width:140px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); font-size:14px}
/* 评论区 */
.comments{margin-top:44px; padding-top:22px; border-top:1px dashed var(--line)}
.comments h2{font-size:19px; margin:0 0 14px}
.cm-item{padding:10px 0; border-bottom:1px solid var(--line)}
.cm-item:last-child{border-bottom:0}
.cm-head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.cm-head strong{font-size:14.5px}
.cm-head .meta{font-size:12.5px}
.cm-body{margin-top:4px; font-size:15px; line-height:1.7; white-space:pre-wrap}
.cm-form{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.cm-form textarea{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--fg); font-size:14px; font-family:inherit; resize:vertical}
/* 表情 / 表情包选择面板 */
.emoji-pop{position:absolute; z-index:50; top:calc(100% + 6px); left:0; width:320px; max-height:260px; overflow:auto; padding:10px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.12)}
.emoji-tabs{display:flex; gap:6px; margin-bottom:8px}
.emoji-pane{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:2px; overflow:hidden}
.emoji-pane[hidden]{display:none}
.emoji-pane[data-pane=sticker]{grid-template-columns:repeat(4,1fr); gap:6px}
.emoji-btn{font-size:18px; line-height:1.5; padding:0; border:0; background:none; cursor:pointer; border-radius:6px}
.emoji-btn:hover{background:var(--accent-soft)}
.sticker-btn{padding:0; border:1px solid var(--line); border-radius:8px; background:none; cursor:pointer; overflow:hidden; aspect-ratio:1}
.sticker-btn img{width:100%; height:100%; object-fit:cover; display:block}
.sticker-btn:hover{border-color:var(--accent)}
@media (max-width:520px){.emoji-pop{width:min(320px, 88vw)}}
#my-notes{margin-bottom:28px}
#note-editor h2{margin-top:0}
.cm-body img{max-width:180px; border-radius:8px; vertical-align:middle}
/* 反应力测试 */
.reaction-pad{display:flex; align-items:center; justify-content:center; min-height:190px; margin:4px 0 10px; border:1px solid var(--line); border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:20px; font-weight:600; cursor:pointer; user-select:none; transition:background .12s, color .12s, transform .06s}
.reaction-pad:hover{transform:translateY(-1px)}
.reaction-pad.waiting{background:var(--line); color:var(--muted); cursor:default}
.reaction-pad.ready{background:#41ba41; border-color:#41ba41; color:#fff; font-size:26px}
.reaction-pad.ready:hover{transform:none}
/* 用户主页 / 私信 / 图集 */
.user-hero{display:flex; gap:18px; align-items:flex-start; margin:6px 0 26px}
.avatar-lg,.avatar-sm{width:72px; height:72px; font-size:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto}
.avatar-sm{width:40px; height:40px; font-size:16px}
.avatar-lg img,.avatar-sm img{width:100%; height:100%; object-fit:cover; display:block}
.user-info h1{margin:0 0 4px; font-size:26px}
.user-info .meta{margin-bottom:10px}
.gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin-bottom:26px}
.gallery-cell{position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card); aspect-ratio:1}
.gallery-cell img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in}
.gallery-cell .link{position:absolute; right:6px; bottom:6px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:2px 8px}

.dm-head{display:flex; align-items:center; gap:12px; margin:8px 0 16px}
.dm-head h1{margin:0; font-size:22px}
.dm-list{display:flex; flex-direction:column; gap:10px; max-height:56vh; min-height:220px; overflow:auto; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--bg); margin-bottom:14px}
.dm-item{display:flex; flex-direction:column; align-items:flex-start; gap:2px; max-width:78%}
.dm-item.mine{align-self:flex-end; align-items:flex-end}
.dm-bubble{padding:8px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); overflow-wrap:anywhere}
.dm-item.mine .dm-bubble{background:var(--accent-soft); border-color:transparent}
.dm-bubble p{margin:0}
.dm-bubble img{max-width:200px; border-radius:8px; display:block; margin-top:4px}
.dm-peers{display:flex; flex-direction:column; gap:10px}
.dm-peer{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; color:inherit; text-decoration:none; background:var(--card)}
.dm-peer:hover{border-color:var(--accent)}
.dm-peer-main{flex:1; min-width:0}
.dm-peer-main .meta{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pic-tip{margin-left:6px}
.meta a{color:var(--accent); text-decoration:none}
.meta a:hover{text-decoration:underline}
.cm-head a{color:inherit; text-decoration:none}
.cm-head a:hover{color:var(--accent)}
.dm-head h1 a{color:inherit; text-decoration:none}
.dm-head h1 a:hover{color:var(--accent)}
.key-pad{border:1px dashed var(--line); border-radius:12px; padding:14px; background:var(--accent-soft, #f7f3ee); outline:none; cursor:text}
.key-pad:focus{border-color:var(--accent); background:var(--card)}
.key-big{font-size:30px; font-weight:600; line-height:1.2; margin-bottom:6px; overflow-wrap:anywhere}
.key-log{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; min-height:26px}
.key-chip{border:1px solid var(--line); border-radius:6px; padding:2px 6px; font-size:12px; text-align:center}
/* 键盘测试：两格宽 + 主键盘区 */
.tool.wide{grid-column:span 2}
.kb-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:10px}
.kb-big{font-size:22px; font-weight:600; min-width:36px; color:var(--accent)}
.kbd{display:flex; flex-direction:column; gap:6px; padding:10px; border:1px dashed var(--line); border-radius:12px; background:var(--accent-soft, #f7f3ee); outline:none}
.kbd:focus-within{border-color:var(--accent); background:var(--card)}
.kbd-row{display:flex; gap:6px}
.kbd-key{flex:1; min-width:0; height:36px; display:flex; align-items:center; justify-content:center; font-size:12px; border:1px solid var(--line); border-radius:7px; background:var(--card); color:inherit; user-select:none; transition:background .08s, color .08s, border-color .08s, transform .08s}
.kbd-key.on{background:#41ba41; border-color:#41ba41; color:#fff; transform:translateY(1px)}
.key-log{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; min-height:22px}
@media (max-width:560px){ .tool.wide{grid-column:span 1} .kbd-key{height:30px; font-size:11px} }
/* 站长标签 */
.owner-badge{display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; background:var(--accent); color:#fff; font-size:12px; line-height:18px; vertical-align:middle; font-weight:500}
/* 文章里的表格 */
.note-body table{width:100%; border-collapse:collapse; margin:18px 0; font-size:14px}
.note-body th, .note-body td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
.note-body th{background:var(--accent-soft); font-weight:600}
.note-body tr:nth-child(even) td{background:rgba(0,0,0,0.015)}
/* ---------- 动画 ---------- */
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* 页面进入：整块淡入上浮，子元素依次出现 */
#app > *{animation:rise .42s cubic-bezier(.2,.7,.3,1) backwards}
#app > *:nth-child(2){animation-delay:.04s}
#app > *:nth-child(3){animation-delay:.08s}
#app > *:nth-child(4){animation-delay:.12s}
#app > *:nth-child(5){animation-delay:.16s}
#app > *:nth-child(n+6){animation-delay:.2s}

/* 卡片网格：逐个浮上来 */
.grid > *{animation:rise .45s cubic-bezier(.2,.7,.3,1) backwards}
.grid > *:nth-child(1){animation-delay:.05s}
.grid > *:nth-child(2){animation-delay:.1s}
.grid > *:nth-child(3){animation-delay:.15s}
.grid > *:nth-child(4){animation-delay:.2s}
.grid > *:nth-child(5){animation-delay:.25s}
.grid > *:nth-child(n+6){animation-delay:.3s}

/* 卡片悬停：抬起 + 阴影 + 标题变色 */
.card{transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 26px -18px rgba(0,0,0,.45)}
.card:hover h3{color:var(--accent)}
.card h3{transition:color .18s ease}

/* 导航：下划线滑动 */
.site-head nav a{position:relative; transition:opacity .18s ease}
.site-head nav a::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .24s ease}
.site-head nav a:hover::after{transform:scaleX(1)}

/* 按钮：按下回弹 */
button{transition:transform .12s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease}
button:active{transform:scale(.96)}

/* 头像：悬停轻轻转一下 */
.avatar{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.user-hero:hover .avatar, .who:hover .avatar-btn{transform:rotate(-4deg) scale(1.03)}

/* 图片墙/图集：淡入 + 悬停放大 */
.gallery img, .files img, .stickers img{transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.gallery img:hover, .files img:hover, .stickers img:hover{transform:scale(1.04)}

/* 弹层：缩放淡入 */
.emoji-pop, .lightbox{animation:pop .18s ease both}
.lightbox img{animation:pop .22s cubic-bezier(.2,.7,.3,1) both}
.lightbox{animation:fade .16s ease both}

/* 表单提示/消息：出现时淡入 */
.out, .meta#ne-msg, #pf-msg, #cm-msg, .wall-post + .out{animation:fade .25s ease both}

/* 站长标签：微微呼吸 */
.owner-badge{animation:floaty 3.2s ease-in-out infinite}

/* 尊重系统「减少动态效果」 */
@media (prefers-reduced-motion: reduce){
  #app > *, .grid > *, .emoji-pop, .lightbox, .lightbox img, .out, .owner-badge{animation:none !important}
  .card, .avatar, button, .gallery img, .files img, .stickers img{transition:none !important}
  .card:hover{transform:none}
}