/* MippoLab Blog — 暗色工具站延续风设计系统
 * 与 mippolab.com 主站（Nuxt + Tailwind，gray-900 底 / brand-500 绿）视觉一致：
 * 深灰蓝底、品牌绿点缀、圆角卡片；仅暗色（主站定位），覆盖与博客渲染器共用的类名（article/post-card 等）
 * 上线位置：/opt/msm/static/mippolab/assets/style.css（Caddy 对 /blog/assets/* 直出）
 */

:root{
  color-scheme:dark;
  --bg:#0f172a;        /* gray-900 系，主站 app 背景 */
  --surface:#1e293b;   /* gray-800 系卡片 */
  --surface-soft:#17233b;
  --border:#334155;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --faint:#64748b;
  --accent:#22c55e;         /* brand-500 */
  --accent-strong:#4ade80;  /* brand-400 */
  --accent-soft:rgba(34,197,94,.12);
  --accent-border:rgba(34,197,94,.35);
  --code-bg:#0b1220; --code-text:#e2e8f0;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.7}
a{color:inherit;text-decoration:none}
.wrap{max-width:800px;margin:0 auto;padding:0 20px}
::selection{background:var(--accent-soft)}

/* ---------- Header ---------- */
header.site{background:rgba(15,23,42,.92);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;backdrop-filter:blur(8px)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.01em;color:#fff}
.logo-mark{width:32px;height:32px;border-radius:8px}
.logo span{color:var(--accent-strong)}
nav.main{display:flex;gap:16px;font-size:14px;color:var(--muted)}
nav.main a:hover{color:var(--accent-strong)}

/* ---------- 博客列表 / 卡片 ---------- */
main.wrap{padding:36px 20px 64px}
h1{font-size:30px;letter-spacing:-.01em;color:#fff}
.sub{color:var(--muted);margin:8px 0 28px;font-size:15px}
.post-list{display:flex;flex-direction:column;gap:14px}
.post-card{position:relative;display:flex;gap:18px;padding:20px 22px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);transition:border-color .15s,background .15s}
.post-card:hover{border-color:var(--accent-border);background:var(--surface)}
.pc-body{min-width:0;flex:1}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 6px}
.cats a{position:relative;z-index:1;font-size:12px;color:var(--accent-strong);background:var(--accent-soft);border-radius:6px;padding:2px 9px}
.cats a:hover{background:var(--accent-border)}
.pc-title{margin:0 0 6px;font-size:18px;line-height:1.4;font-weight:700}
.pc-title a{color:inherit}
.pc-title a::after{content:"";position:absolute;inset:0}
.post-card p{font-size:13.5px;color:var(--muted);margin:0 0 8px}
.pc-cover{width:150px;height:100px;object-fit:cover;border-radius:10px;border:1px solid var(--border);flex-shrink:0;align-self:center}
.pc-date{font-size:12.5px;color:var(--faint)}

/* ---------- 文章页 ---------- */
.article{max-width:760px;margin:0 auto}
.crumb{font-size:12.5px;color:var(--faint);margin:0 0 18px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--accent-strong)}
.article h1{font-size:32px;line-height:1.3;margin-bottom:10px}
.article .meta{font-size:13px;color:var(--faint);margin-bottom:14px}
.post-body{margin-top:18px;font-size:16px;line-height:1.8}
.post-body p{margin:0 0 16px}
.post-body h2{font-size:23px;margin:34px 0 12px;color:#fff}
.post-body h3{font-size:18px;margin:24px 0 8px;color:#fff}
.post-body ul,.post-body ol{margin:0 0 16px;padding-left:24px}
.post-body li{margin-bottom:7px}
.post-body a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-border)}
.post-body code{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:1px 6px;font-size:.85em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.post-body pre{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:16px 18px;overflow-x:auto;font-size:13.5px;margin:0 0 16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.post-body pre code{background:none;padding:0;color:var(--code-text);border:0}
.post-body blockquote{border-left:2px solid var(--accent);margin:0 0 16px;padding:2px 0 2px 18px;color:var(--muted)}
.post-body img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--border)}
.post-body table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px}
.post-body th,.post-body td{border:1px solid var(--border);padding:8px 12px;text-align:left}
.post-body th{background:var(--surface);color:#fff}

.pager{display:flex;justify-content:space-between;gap:12px;margin-top:36px;padding-top:22px;border-top:1px solid var(--border)}
.pager a{font-size:14.5px;color:var(--accent-strong);line-height:1.5}
.pager a:hover{color:var(--accent)}
.pager .prev{max-width:48%}.pager .next{max-width:48%;text-align:right;margin-left:auto}

/* ---------- 分类页 ---------- */
.post-list + .crumb{margin-top:8px}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--border);padding:24px 0;font-size:13px;color:var(--faint)}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
footer.site a:hover{color:var(--accent-strong)}

@media(max-width:640px){
  h1{font-size:25px}
  .article h1{font-size:26px}
  .post-card{flex-direction:column;padding:16px}
  .pc-cover{width:100%;height:150px}
}