/* roybase blog theme — 与 www.roybase.top 主页共用视觉系统 v2 (Impeccable audit) */
:root {
  --bg:#0a0e14; --bg2:#0d131d; --bg-card:#111722; --bg-elevated:#1a2230;
  --accent:#6ee7ff; --accent-dim:rgba(110,231,255,.15); --accent-hover:rgba(110,231,255,.25);
  --accent-warm:#ffb86b; --accent-warm-dim:rgba(255,184,107,.12);
  --text:#e6edf3; --text-dim:#8b98a9; --text-muted:#6b7a8c;
  --border:#1e2a3a; --border-light:rgba(110,231,255,.16); --border-accent:rgba(110,231,255,.4);
  --shadow-sm:0 8px 16px rgba(0,0,0,.3); --shadow-md:0 12px 28px rgba(0,0,0,.38); --shadow-lg:0 24px 48px rgba(0,0,0,.5);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Consolas,monospace;
  --sans:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --radius:12px; --maxw:920px;
}
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  min-width:320px; background:var(--bg); color:var(--text);
  font-family:var(--sans); line-height:1.6; padding:0; overflow-x:hidden;

}
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(110,231,255,.09),transparent 42%),rgba(10,14,20,.84); }

/* === Browser surfaces themed from palette === */
::selection { background:rgba(110,231,255,.28); color:var(--text); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:5px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:rgba(110,231,255,.35); }
html { caret-color:var(--accent); }

a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:5px; }
.mono { font-family:var(--mono); }
.dim { color:var(--text-dim); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ===== 顶部导航（与主页一致） ===== */
#topnav { display:block; position:sticky; top:0; z-index:50; height:64px;
  border-bottom:1px solid var(--border-light); background:rgba(10,14,20,.9); backdrop-filter:blur(18px); }
#topnav .nav-inner { width:min(var(--maxw),calc(100% - 48px)); height:100%; margin:auto; padding:0;
  display:flex; align-items:center; gap:28px; }
#topnav .brand { color:var(--text); font:600 .92rem var(--mono); letter-spacing:.04em; white-space:nowrap; }
#topnav .brand b { color:var(--accent); }
#topnav .nav-links { display:flex; align-items:center; gap:4px; margin-left:auto; overflow:auto; scrollbar-width:none; }
#topnav .nav-links::-webkit-scrollbar { display:none; }
#topnav .nav-links a { position:relative; display:flex; align-items:center; height:40px; padding:0 14px;
  color:var(--text-dim); font:600 .76rem var(--mono); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
#topnav .nav-links a::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  transform:scaleX(0); transform-origin:center; background:var(--accent); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
#topnav .nav-links a:hover, #topnav .nav-links a.active { color:var(--text); }
#topnav .nav-links a:hover::after, #topnav .nav-links a.active::after { transform:scaleX(1); }

.container { width:min(var(--maxw),calc(100% - 48px)); max-width:none; margin:auto; padding:0 0 20px; overflow-x:hidden; }

/* ===== 终端窗口（通用外壳） ===== */
.terminal { width:100%; overflow:hidden; border:1px solid rgba(110,231,255,.24); border-radius:18px;
  background:linear-gradient(145deg,rgba(17,23,34,.94),rgba(10,14,20,.96)); box-shadow:var(--shadow-lg); }
.terminal-bar { display:flex; align-items:center; gap:8px; height:42px; padding:0 16px;
  border-bottom:1px solid var(--border); background:rgba(13,19,32,.82); }
.terminal-bar .dot { width:10px; height:10px; border-radius:50%; }
.terminal-bar .dot.r { background:#ff5f57; } .terminal-bar .dot.y { background:#febc2e; } .terminal-bar .dot.g { background:#28c840; }
.terminal-title { margin-left:8px; color:var(--text-dim); font:.72rem var(--mono); }
.terminal-body { padding:clamp(30px,6vw,64px); }

/* ===== 首页 hero ===== */
.hero { padding:clamp(40px,8vh,90px) 0 8px; }
.hero-body { display:block; }
.hero-copy { min-width:0; max-width:680px; }
.prompt-line { margin:0; color:var(--text); font:500 clamp(1.05rem,2.4vw,1.7rem)/1.55 var(--mono); letter-spacing:-.03em; }
.prompt { color:var(--accent); }
.hero-desc { margin-top:18px; color:var(--text-dim); font-size:.95rem; line-height:1.75; }
.hero-stats { margin-top:22px; display:flex; flex-wrap:wrap; gap:10px; }
.hero-stats .stat { padding:8px 14px; border:1px solid var(--border); border-radius:10px;
  background:rgba(17,23,34,.7); color:var(--text-dim); font:.74rem var(--mono); letter-spacing:.04em; }
.hero-links { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; }

/* ===== 按钮 ===== */
.btn { display:inline-block; padding:10px 20px; border:1px solid var(--border-accent); border-radius:10px;
  background:var(--accent-dim); color:var(--accent); font:600 .82rem var(--mono); letter-spacing:.04em;
  cursor:pointer; transition:background .25s,transform .25s,border-color .25s; }
.btn:hover { background:var(--accent-hover); transform:translateY(-2px); border-color:var(--accent); }
.btn.ghost { background:transparent; color:var(--text-dim); border-color:var(--border); }
.btn.ghost:hover { color:var(--text); border-color:var(--text-dim); background:rgba(139,152,169,.08); }

/* ===== 文章列表 ===== */
.feed { margin-top:34px; }
.feed-title { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; font-size:1.32rem; line-height:1.3; }
.eyebrow { color:var(--accent-warm); font:600 .68rem var(--mono); letter-spacing:.16em; text-transform:uppercase; }
.article-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px; }
.card { border:1px solid var(--border); border-radius:var(--radius); background:rgba(17,23,34,.82);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s,box-shadow .28s; will-change:transform; transform:translateZ(0); }
.card:hover { transform:translateY(-5px); border-color:var(--border-accent); box-shadow:var(--shadow-md); }
a.card { display:block; color:inherit; }
.cat-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 16px; margin-bottom:20px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; font-size:13px; }
.cat-chip { padding:4px 12px; border-radius:999px; background:rgba(17,23,34,.6); border:1px solid var(--border); color:var(--text); text-decoration:none; font-size:12px; transition:all .15s; }
.cat-chip:hover { border-color:var(--accent); color:var(--accent); }
.article-card { min-height:156px; padding:20px; min-height:44px; }
.article-card h4 { font-size:1rem; line-height:1.4; }
.article-date { display:block; margin:8px 0; color:var(--text-dim); font:.7rem var(--mono); }
.article-card p { color:var(--text-dim); font-size:.82rem; line-height:1.55; }
.empty { padding:30px; color:var(--text-dim); font-size:.9rem; }

/* ===== 分页 ===== */
.page-navigator { display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.page-navigator a, .page-navigator span { padding:8px 16px; border:1px solid var(--border); border-radius:10px;
  color:var(--text-dim); font:.78rem var(--mono); background:rgba(17,23,34,.6); }
.page-navigator a:hover { color:var(--accent); border-color:var(--border-accent); }
.page-navigator .page-number { display:flex; gap:6px; }
.page-navigator .page-number a { padding:8px 12px; }
.page-navigator .current { color:var(--accent); border-color:var(--border-accent); background:rgba(110,231,255,.08); }

/* ===== 文章页 ===== */
.post-terminal { margin-top:26px; }
.post-body { padding:clamp(28px,5vw,56px); }
.post-head { margin-bottom:28px; padding-bottom:22px; border-bottom:1px solid var(--border); }
.post-head h1 { font-size:clamp(1.5rem,4vw,2.1rem); line-height:1.3; letter-spacing:-.02em; }
.post-meta { margin-top:14px; color:var(--text); font:.8rem var(--mono); letter-spacing:.02em; }
.post-meta-dim { color:var(--text-dim); }

/* 正文排版 */
.post-content { font-size:1.02rem; line-height:1.85; color:var(--text); }
.post-content > * + * { margin-top:1.1em; }
.post-content h2 { margin-top:1.8em; font-size:1.4rem; line-height:1.35; padding-left:12px; border-left:3px solid var(--accent); }
.post-content h3 { margin-top:1.5em; font-size:1.18rem; line-height:1.4; }
.post-content h4 { margin-top:1.3em; font-size:1.05rem; }
.post-content p { margin:0; }
.post-content a { color:var(--accent); border-bottom:1px solid rgba(110,231,255,.3); }
.post-content a:hover { border-bottom-color:var(--accent); }
.post-content strong { color:var(--text); }
.post-content ul, .post-content ol { padding-left:1.6em; }
.post-content li { margin-top:.4em; }
.post-content blockquote { margin:0; padding:14px 20px; border-left:3px solid var(--accent-warm);
  background:rgba(255,184,107,.06); border-radius:0 10px 10px 0; color:var(--text-dim); }
.post-content img { max-width:100%; height:auto; border-radius:10px; border:1px solid var(--border); }
.post-content figure { margin:0; }
.post-content figcaption { margin-top:8px; color:var(--text-dim); font:.78rem var(--mono); text-align:center; }
.post-content code { padding:2px 7px; border-radius:6px; background:var(--accent-dim);
  color:var(--accent); font:.85em var(--mono); }
.post-content pre { padding:18px 20px; border:1px solid var(--border); border-radius:12px;
  background:rgba(10,14,20,.7); overflow-x:auto; }
.post-content pre code { padding:0; background:none; color:var(--text); font-size:.85rem; line-height:1.7; }
.post-content table { width:100%; border-collapse:collapse; font-size:.9rem; }
.post-content th, .post-content td { padding:10px 14px; border:1px solid var(--border); text-align:left; }
.post-content th { background:rgba(17,23,34,.9); color:var(--accent); font-weight:600; }
.post-content tr:nth-child(even) td { background:rgba(17,23,34,.4); }
.post-content hr { border:0; border-top:1px solid var(--border); margin:2em 0; }

/* 上一篇/下一篇 */
.post-nav { display:flex; justify-content:space-between; gap:16px; margin-top:34px; padding-top:22px;
  border-top:1px solid var(--border); font-size:.82rem; }
.post-nav-item { max-width:48%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); }
.post-nav-item a { color:var(--text-dim); }
.post-nav-item a:hover { color:var(--accent); }

/* ===== 评论 ===== */
.comments { margin-top:38px; padding-top:26px; border-top:1px solid var(--border); }
.comments-title { margin-bottom:20px; font-size:.95rem; color:var(--text); }
.comments-list { list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:14px; }
.comment { padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:rgba(17,23,34,.6); }
.comment-head { display:flex; align-items:baseline; gap:12px; margin-bottom:8px; font-size:.78rem; }
.comment-author { color:var(--accent); font-weight:600; }
.comment-date { font-size:.72rem; }
.comment-content { font-size:.92rem; line-height:1.7; color:var(--text); }
.comment-form { display:flex; flex-direction:column; gap:12px; }
.comment-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.comment-form input, .comment-form textarea { width:100%; padding:11px 14px; border:1px solid var(--border);
  border-radius:10px; background:rgba(10,14,20,.6); color:var(--text); font:.9rem var(--sans); }
.comment-form input:focus, .comment-form textarea:focus { outline:none; border-color:var(--border-accent); }
.comment-form textarea { resize:vertical; font-family:var(--sans); }
.comments-closed { margin-top:30px; font-size:.85rem; }

/* ===== 归档页 ===== */
.archive { margin-top:26px; }
.archive-sub { margin:14px 0 26px; color:var(--text-dim); font-size:.85rem; }
.archive-year { margin-bottom:28px; }
.archive-year-title { margin-bottom:14px; padding-left:12px; border-left:2px solid var(--accent);
  color:var(--text-dim); font:600 .95rem var(--mono); letter-spacing:.1em; }
.archive-months { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.month-card { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; }
.month-name { font-size:.9rem; color:var(--text); }
.month-count { font-size:.72rem; color:var(--text-dim); }

/* ===== 搜索 ===== */
.search { margin-top:26px; }
.search-form { display:flex; align-items:center; gap:12px; padding:16px 20px;
  border:1px solid var(--border); border-radius:14px; background:rgba(17,23,34,.8); }
.search-form .prompt { font-size:.9rem; }
.search-form input { flex:1; min-width:0; padding:10px 14px; border:1px solid var(--border); border-radius:10px;
  background:rgba(10,14,20,.6); color:var(--text); font:.9rem var(--mono); }
.search-form input:focus { outline:none; border-color:var(--border-accent); }
.search-form button { padding:10px 22px; border:1px solid var(--border-accent); border-radius:10px;
  background:var(--accent-dim); color:var(--accent); font:600 .82rem var(--mono); cursor:pointer; }
.search-form button:hover { background:var(--accent-hover); }


/* Error banner */
.error-banner {
  padding:12px 16px;border:1px solid rgba(255,95,87,.3);border-radius:10px;
  background:rgba(255,95,87,.08);color:#ff5f57;font:.82rem var(--mono);
  display:flex;align-items:center;gap:8px;margin-top:16px;
}
.error-banner button {
  margin-left:auto;padding:4px 12px;border:1px solid rgba(255,95,87,.4);
  border-radius:6px;background:transparent;color:#ff5f57;font:.72rem var(--mono);
  cursor:pointer;
}
.error-banner button:hover { background:rgba(255,95,87,.1); }
/* ===== 404 ===== */
.error { margin-top:16px; color:var(--accent-warm); font-size:.9rem; }

/* ===== 页脚 ===== */
footer { margin-top:54px; padding:28px 20px 46px; border-top:1px solid var(--border);
  color:var(--text-dim); font-size:.8rem; text-align:center; }
footer a { color:var(--text-dim); }
footer a:hover { color:var(--accent); }
.footer-prompt { margin-bottom:10px; font-size:.82rem; }
.footer-meta { font-size:.74rem; }

/* ===== 响应式 ===== */


[data-theme="light"] {
  --bg:#f5f7fa; --bg-card:#ffffff; --bg-elevated:#e8ecf1;
  --text:#1a1e26; --text-dim:#5a6b7d; --text-muted:#8a98a9;
  --border:#d1d5db; --border-light:rgba(110,231,255,.25); --border-accent:rgba(110,231,255,.5);
}
[data-theme="light"] #topnav {
  background:rgba(255,255,255,.9);
  border-bottom-color:rgba(0,0,0,.08);
}
[data-theme="light"] .card {
  background:rgba(255,255,255,.85);
  border-color:rgba(0,0,0,.08);
}
[data-theme="light"] .card:hover {
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
[data-theme="light"] .terminal {
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(245,247,250,.96));
  border-color:rgba(0,0,0,.08);
}
[data-theme="light"] .terminal-bar {
  background:rgba(230,235,240,.82);
}
[data-theme="light"] footer {
  border-top-color:rgba(0,0,0,.06);
}
[data-theme="light"] .post-content code {
  background:rgba(110,231,255,.1);
}
[data-theme="light"] .comment-form input,
[data-theme="light"] .comment-form textarea,
[data-theme="light"] .search-form input {
  background:rgba(255,255,255,.8);
}
@media (max-width:768px) and (min-width:701px) {
  .article-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .archive-months { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  #topnav { height:auto; min-height:60px; }
  #topnav .nav-inner { width:calc(100% - 32px); padding:10px 0; display:block; }
  .nav-links { margin-top:8px !important; justify-content:flex-start; }
  #topnav .nav-links a { height:44px; padding:0 12px; font-size:.7rem; display:flex; align-items:center; }
  .container { width:calc(100% - 32px); }
  .hero { padding:30px 0 6px; }
  .terminal-body { padding:26px 18px; }
  .post-body { padding:24px 18px; }
  .article-list { grid-template-columns:1fr; }
  .comment-row { grid-template-columns:1fr; }
  .post-nav { flex-direction:column; }
  .post-nav-item { max-width:100%; }
  .search-form { flex-wrap:wrap; }
  .search-form input { flex:1 1 100%; order:3; }
}
@media (max-width:430px) {
  .archive-months { grid-template-columns:1fr 1fr; }
  .hero-stats .stat { font-size:.68rem; padding:6px 10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}