:root {
  --bg:#F7F9FC; --surface:#FFFFFF; --surface-2:#EEF2F7;
  --text:#0F172A; --text-2:#475569; --text-3:#94A3B8;
  --primary:#1D4ED8; --primary-soft:#E0EAFF; --primary-2:#3B82F6;
  --accent:#0E9F6E; --warn:#F59E0B; --danger:#DC2626;
  --border:#E2E8F0; --ring:rgba(29,78,216,.35);
  --shadow-card:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
  --shadow-hover:0 1px 2px rgba(15,23,42,.08),0 12px 32px rgba(15,23,42,.1);
  --font:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
[data-theme="dark"] {
  --bg:#0B1220; --surface:#111A2E; --surface-2:#16223B;
  --text:#E5EDFF; --text-2:#9FB2D0; --text-3:#718096;
  --primary:#3B82F6; --primary-soft:#1E3A5F; --primary-2:#60A5FA;
  --accent:#34D399; --warn:#FBBF24; --danger:#F87171;
  --border:#22304D; --ring:rgba(59,130,246,.35);
  --shadow-card:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.25);
  --shadow-hover:0 1px 2px rgba(0,0,0,.25),0 12px 32px rgba(0,0,0,.35);
}
* { box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg); color:var(--text); margin:0; -webkit-font-smoothing:antialiased; transition:background .35s,color .35s; }
a { text-decoration:none; color:inherit; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-card); transition:box-shadow .35s,transform .35s,border-color .35s; }
.card:hover { box-shadow:var(--shadow-hover); }
.surface-2 { background:var(--surface-2); }
.text-2 { color:var(--text-2); } .text-3 { color:var(--text-3); }
.text-primary { color:var(--primary); } .text-accent { color:var(--accent); } .text-warn { color:var(--warn); } .text-danger { color:var(--danger); }
.reveal { opacity:0; transform:translateY(16px); transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1); }
.reveal.in { opacity:1; transform:translateY(0); }
@keyframes pulse-ring { 0%{box-shadow:0 0 0 0 rgba(245,158,11,.4)} 70%{box-shadow:0 0 0 8px rgba(245,158,11,0)} 100%{box-shadow:0 0 0 0 rgba(245,158,11,0)} }
.pulse { animation:pulse-ring 2s infinite; }
.progress-bar { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,var(--primary),var(--primary-2)); z-index:100; transition:width .1s; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:16px; }
.col-7 { grid-column:span 7; } .col-5 { grid-column:span 5; } .col-6 { grid-column:span 6; } .col-12 { grid-column:span 12; }
@media(max-width:1024px){ .col-7,.col-5,.col-6{grid-column:span 12;} }
.task-check { width:20px; height:20px; border:2px solid var(--border); border-radius:6px; cursor:pointer; flex-shrink:0; transition:all .25s; display:flex; align-items:center; justify-content:center; }
.task-check.checked { background:var(--primary); border-color:var(--primary); }
.task-check.checked svg { display:block; }
.task-check svg { display:none; width:14px; height:14px; stroke:#fff; fill:none; stroke-width:3; }
.task-item.done .task-text { text-decoration:line-through; color:var(--text-3); }
.tag { display:inline-flex; align-items:center; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:600; letter-spacing:.02em; }
.tag-primary { background:var(--primary-soft); color:var(--primary); }
.tag-accent { background:rgba(14,159,110,.1); color:var(--accent); }
.tag-warn { background:rgba(245,158,11,.1); color:var(--warn); }
.tag-danger { background:rgba(220,38,38,.1); color:var(--danger); }
.theme-btn { width:40px; height:40px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-2); transition:all .3s; }
.theme-btn:hover { color:var(--primary); border-color:var(--primary); }
.to-top { position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-hover); opacity:0; visibility:hidden; transition:all .35s; z-index:40; }
.to-top.show { opacity:1; visibility:visible; }
.to-top:hover { transform:translateY(-4px); }
/* 文章页 */
.article-wrap { max-width:780px; margin:0 auto; padding:48px 24px 80px; }
.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--text-3); font-size:14px; font-weight:500; margin-bottom:28px; padding:8px 16px; border-radius:99px; background:var(--surface); border:1px solid var(--border); transition:all .35s; }
.back-link:hover { color:var(--primary); border-color:var(--primary); }
.article-header { margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.article-header h1 { font-size:32px; font-weight:700; line-height:1.3; color:var(--text); margin-bottom:18px; }
.article-header .article-meta { font-size:14px; color:var(--text-3); display:flex; gap:16px; margin-top:16px; }
.article-body { font-size:16px; line-height:1.85; color:var(--text-2); }
.article-body h1 { font-size:26px; font-weight:600; margin:40px 0 16px; color:var(--text); }
.article-body h2 { font-size:22px; font-weight:600; margin:36px 0 14px; color:var(--text); padding-left:14px; border-left:4px solid var(--primary); }
.article-body h3 { font-size:18px; font-weight:600; margin:28px 0 10px; color:var(--text); }
.article-body p { margin-bottom:18px; }
.article-body ul, .article-body ol { margin:0 0 18px 24px; }
.article-body li { margin-bottom:8px; }
.article-body ul li::marker { color:var(--primary); }
.article-body ol li::marker { color:var(--primary); font-weight:700; }
.article-body blockquote { margin:20px 0; padding:16px 24px; border-left:4px solid var(--primary); background:var(--surface-2); border-radius:0 10px 10px 0; color:var(--text-2); }
.article-body pre { margin:20px 0; padding:20px; background:#0B1220; border-radius:10px; overflow-x:auto; }
.article-body pre code { font-family:"JetBrains Mono","Consolas",monospace; font-size:14px; color:#e2e8f0; }
.article-body code { font-family:"JetBrains Mono","Consolas",monospace; font-size:15px; }
.article-body p code { padding:2px 8px; background:var(--surface-2); border-radius:4px; color:var(--primary); font-size:14px; }
.article-body a { color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
.article-body strong { color:var(--text); font-weight:600; }
.article-body table { width:100%; margin:20px 0; border-collapse:collapse; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.article-body th, .article-body td { padding:12px 16px; text-align:left; border:1px solid var(--border); }
.article-body th { background:var(--surface-2); font-weight:600; color:var(--text); }
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.tag-item { padding:5px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:6px; color:var(--text-2); font-size:13px; font-weight:500; }
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:opacity .2s;} .pulse{animation:none;} }