/* 布局：页头 / hero / 章节 / 栅格 / 页脚 */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(10, 10, 12, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle); }
.site-header .container { height: 100%; display: flex; align-items: center; gap: 22px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--text); font-size: 15.5px; letter-spacing: -.01em; white-space: nowrap; }
.brand .logo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #042f1e; font-weight: 700; font-size: 15px; }
.brand em { font-style: normal; color: var(--muted); font-weight: 400; }

.main-nav { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.main-nav::-webkit-scrollbar { display: none; }
.main-nav a { padding: 7px 12px; border-radius: 7px; color: var(--muted); font-size: 14px; white-space: nowrap; transition: color .15s var(--ease), background .15s var(--ease); }
.main-nav a:hover { color: var(--text); background: var(--surface); }
.main-nav a.active { color: var(--text); background: var(--surface); }
.main-nav .sep { color: var(--faint); padding: 0 2px; user-select: none; }

.cmd-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; white-space: nowrap; border: 1px solid var(--border); padding: 5px 12px; border-radius: 7px; background: var(--surface); font-family: var(--mono); cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); }
.cmd-hint:hover { border-color: #3E4250; color: var(--text); }
.cmd-hint b { color: var(--accent); font-weight: 600; }

/* hero */
.hero { padding: 96px 0 56px; }
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.hero h1 { font-size: clamp(38px, 6.6vw, 72px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin: 0 0 22px; }
.hero h1 .accent { color: var(--accent); }
.hero .lead { color: var(--muted); font-size: clamp(16px, 2vw, 18.5px); max-width: 62ch; margin: 0 0 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* 章节 */
.section { padding: 30px 0; }
.section-title { font-size: 21px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.section-title::before { content: ""; width: 3px; height: 20px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }

/* 栅格与卡片 */
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; transition: border-color .15s var(--ease), transform .15s var(--ease); }
.card:hover { border-color: #3E4250; transform: translateY(-2px); }
.card .icon { color: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.card .icon svg { width: 26px; height: 26px; }
.card .card-title { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; }
a.card { display: block; color: inherit; }

/* 页脚 */
.site-footer { margin-top: 80px; border-top: 1px solid var(--border-subtle); padding: 30px 0 48px; color: var(--faint); font-size: 13.5px; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer .pager { display: flex; gap: 16px; }

/* 上/下一站 */
.prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; }
.prevnext a { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 20px 24px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); transition: border-color .15s var(--ease), transform .15s var(--ease); }
.prevnext a:hover { border-color: #3E4250; transform: translateY(-2px); }
.prevnext .dir { font-size: 12px; color: var(--faint); font-family: var(--mono); }
.prevnext .title { color: var(--text); font-size: 16px; font-weight: 600; }
.prevnext a.next { text-align: right; }

@media (max-width: 920px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .cmd-hint { display: none; } .hero { padding-top: 60px; } }