/* =============== 基础与主题 =============== */
:root {
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --card: #0b1329;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --brand: #60a5fa;
  --brand-2: #34d399;
  --radius: 16px;
  --transition: background-color .35s ease, color .35s ease;
}

:root.light {
  --bg: #f2f4f8;
  --bg-soft: #ffffff;
  --card: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --brand: #2563eb;
  --brand-2: #059669;
}

* { 
  box-sizing: border-box; 
  transition: var(--transition); 
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Microsoft YaHei", Arial;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(96,165,250,.12), transparent 40%),
              radial-gradient(1000px 500px at 110% 10%, rgba(52,211,153,.1), transparent 40%),
              var(--bg);
  line-height: 1.65;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  min-height: 100vh; 
}

a { 
  color: inherit; 
  text-decoration: none; 
}

.container { 
  width: min(1120px, 92vw); 
  margin-inline: auto; 
  padding-inline: 1rem; /* 防止文字贴边 */
}

/* 顶部 */
header.hero {
  padding: clamp(32px, 6vw, 64px) 0 28px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  background: var(--bg-soft);
  backdrop-filter: blur(6px);
}

.brand-row { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}

.logo { 
  font-weight: 800; 
  font-size: 20px; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

.actions { 
  display: flex; 
  gap: 10px; 
  align-items: center; 
}

.btn {
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgb(255, 255, 255);
  background: rgba(15, 23, 42, 0.123);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  backdrop-filter: blur(6px);
  transition: .25s ease;
}

.btn:hover { 
  transform: translateY(-1px); 
  box-shadow: 0 4px 12px rgba(0,0,0,.2); 
}

.btn.primary { 
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); 
  color: white; 
  border: none; 
}

/* 主题切换 */
.theme-toggle { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}

.theme-toggle .icon { 
  font-size: 16px; 
}

.theme-toggle .text { 
  font-weight: 600; 
}

.title { 
  font-size: clamp(28px, 4vw, 42px); 
  font-weight: 900; 
  margin: 20px 0 6px; 
}

.subtitle { 
  color: var(--muted); 
  max-width: 800px; 
}

/* 主体卡片 */
main { 
  padding: 30px 0 30px; 
}

.grid { 
  display: grid; 
  gap: 28px; /* 增加间距 */
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
}

.card {
  background: var(--card);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: var(--radius);
  padding: 20px; 
  min-height: 160px;
  transition: .3s ease;
  /* 移除 margin-bottom: 1.5rem; */
}

.card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 20px 40px rgba(0,0,0,.2); 
}

.card h3 { 
  margin: 0 0 8px; 
  font-size: 18px; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
}

.card p { 
  color: var(--muted); 
  margin: 0 0 12px; 
}

.link {
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  padding: 8px 12px;
  border: 1px solid rgba(148,163,184,.2); 
  border-radius: 8px;
  background: rgba(15,23,42,.35); 
  font-weight: 600; 
  font-size: 14px;
  backdrop-filter: blur(4px);
}

/* 页脚 */
footer { 
  border-top: 1px solid rgba(148,163,184,.12); 
  background: var(--bg-soft); 
}

.footer-inner { 
  padding: 18px 0; 
  font-size: 14px; 
  color: var(--muted); 
  display: flex; 
  justify-content: space-between; 
  flex-wrap: wrap; 
}