/* 千里 · 学习笔记 —— 索引页样式
   配色与站内文章保持一致：冷调石板灰 + 暖琥珀强调色 */

:root{
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#EFF1F4;
  --ink:#171A1F; --ink-2:#4A5260; --muted:#767E8C;
  --line:#DFE3E9; --line-2:#C9CFD8;
  --accent:#A8620A; --accent-soft:#F5E9D8;
  --tool:#2E6F8E; --tool-bg:#E4EEF3;
  --note:#4A7C59; --note-bg:#E7F0EA;
  --deck:#6B4E7D; --deck-bg:#EEE9F2;
  --shadow:0 1px 2px rgba(20,26,38,.05), 0 6px 20px -10px rgba(20,26,38,.14);
  --shadow-h:0 2px 4px rgba(20,26,38,.06), 0 14px 34px -14px rgba(20,26,38,.24);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#101318; --surface:#181C23; --surface-2:#1F242C;
    --ink:#E7EAEF; --ink-2:#B3BAC6; --muted:#868E9C;
    --line:#272D36; --line-2:#333B46;
    --accent:#D9A055; --accent-soft:#33291B;
    --tool:#6BA8C4; --tool-bg:#1A252B;
    --note:#84B894; --note-bg:#1A241D;
    --deck:#A98BBC; --deck-bg:#241C29;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-h:0 2px 6px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.75);
  }
}
:root[data-theme="light"]{
  --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#EFF1F4;
  --ink:#171A1F; --ink-2:#4A5260; --muted:#767E8C;
  --line:#DFE3E9; --line-2:#C9CFD8; --accent:#A8620A; --accent-soft:#F5E9D8;
  --tool:#2E6F8E; --tool-bg:#E4EEF3; --note:#4A7C59; --note-bg:#E7F0EA;
  --deck:#6B4E7D; --deck-bg:#EEE9F2;
}
:root[data-theme="dark"]{
  --bg:#101318; --surface:#181C23; --surface-2:#1F242C;
  --ink:#E7EAEF; --ink-2:#B3BAC6; --muted:#868E9C;
  --line:#272D36; --line-2:#333B46; --accent:#D9A055; --accent-soft:#33291B;
  --tool:#6BA8C4; --tool-bg:#1A252B; --note:#84B894; --note-bg:#1A241D;
  --deck:#A98BBC; --deck-bg:#241C29;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:15.5px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

.wrap{max-width:780px;margin:0 auto;padding:0 22px}

header{padding:56px 0 34px}
.back{
  display:inline-block;font-size:13px;color:var(--muted);margin-bottom:22px;
  padding:4px 11px;border-radius:999px;border:1px solid var(--line);
  transition:color .15s,border-color .15s;
}
.back:hover{color:var(--accent);border-color:var(--accent)}
h1{font-size:clamp(26px,4.4vw,36px);line-height:1.2;margin:0 0 10px;
  letter-spacing:-.022em;font-weight:700;text-wrap:balance}
.tagline{margin:0;color:var(--muted);font-size:16px}

/* ── 文章卡 ── */
.list{display:flex;flex-direction:column;gap:14px;padding-bottom:8px}

.card{
  position:relative;display:block;padding:20px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-h);
  border-color:var(--line-2);
}
.card:hover .go{opacity:1;transform:translateX(0)}

.card-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.kind{
  font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:2px 9px;border-radius:999px;
}
.kind-tool{background:var(--tool-bg);color:var(--tool)}
.kind-note{background:var(--note-bg);color:var(--note)}
.kind-deck{background:var(--deck-bg);color:var(--deck)}
.card-top time{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.card h2{
  font-size:19px;margin:0 0 7px;letter-spacing:-.012em;font-weight:700;
  line-height:1.4;padding-right:26px;text-wrap:balance;
}
.card p{margin:0 0 14px;color:var(--ink-2);font-size:14.5px;line-height:1.72}

.card-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.stats{display:flex;gap:7px;flex-wrap:wrap}
.stat{
  font-size:12px;padding:2px 9px;border-radius:6px;
  background:var(--surface-2);color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.tag{font-size:12px;color:var(--muted)}
.tag::before{content:"#";opacity:.55;margin-right:1px}

.go{
  position:absolute;right:20px;top:20px;color:var(--accent);
  font-size:17px;opacity:0;transform:translateX(-5px);
  transition:opacity .16s ease,transform .16s ease;
}

footer{
  border-top:1px solid var(--line);margin-top:34px;
  padding:22px 0 56px;color:var(--muted);font-size:13px;
  font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  .card{padding:17px 18px}
  .tags{margin-left:0;width:100%}
  .go{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .card:hover{transform:none}
}