:root {
  --green: #3f8f55;
  --green-dark: #2d6d40;
  --green-light: #eaf5ed;
  --text: #202522;
  --muted: #68716b;
  --line: #dfe5e0;
  --surface: #ffffff;
  --surface-soft: #f5f7f5;
  --dark: #202522;
  --shadow: 0 8px 24px rgba(25, 35, 28, .06);
  --radius: 14px;
  --container: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--surface-soft);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, select { font: inherit; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.nav-wrap { min-height: 66px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; }
.brand-mark {
  width: 30px; height:30px; display:grid; place-items:center;
  color:#fff; background:var(--green); border-radius:7px; font-size:13px;
}
.nav { display:flex; align-items:center; gap:6px; }
.nav a { padding:8px 12px; border-radius:8px; color:#4d554f; font-size:14px; transition:background .18s ease,color .18s ease; }
.nav a:hover, .nav a.active { background:var(--green-light); color:var(--green-dark); }
.menu-button { display:none; border:0; background:none; font-size:22px; cursor:pointer; }

.hero { padding:88px 0 76px; background:var(--surface); border-bottom:1px solid var(--line); }
.hero-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:center; }
.eyebrow { color:var(--green-dark); font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.hero h1 { max-width:760px; margin:12px 0 18px; font-size:clamp(40px,6vw,72px); line-height:1.06; letter-spacing:-.055em; }
.hero p { max-width:650px; color:var(--muted); font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.hero-art {
  aspect-ratio:1; background:var(--green-light); border:1px solid #d3e7d7;
  border-radius:24px; display:grid; place-items:center; position:relative; overflow:hidden;
}
.hero-art::before, .hero-art::after {
  content:""; position:absolute; width:180px; height:180px; border:1px solid #c4dec9; transform:rotate(45deg);
}
.hero-art::before { top:-55px; right:-55px; }
.hero-art::after { bottom:-65px; left:-65px; }
.hero-cube { font-size:100px; color:var(--green); opacity:.9; }

.section { padding:72px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:26px; }
.section h2 { margin:0; font-size:30px; letter-spacing:-.03em; }
.section-intro { margin:5px 0 0; color:var(--muted); }
.text-link { color:var(--green-dark); font-weight:700; font-size:14px; }

.category-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.category-card {
  min-height:145px; padding:20px; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.category-card:hover { transform:translateY(-2px); border-color:#b8d3bd; box-shadow:var(--shadow); }
.category-icon { color:var(--green); font-size:26px; }
.category-card strong { display:block; margin-top:10px; font-size:17px; }
.category-card small { display:block; margin-top:4px; color:var(--muted); line-height:1.5; }
.arrow { align-self:flex-end; color:var(--green); }

.resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.resource-card {
  overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(25,35,28,.02);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.resource-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:#bfd4c3; }
.card-image, .detail-image { width:100%; aspect-ratio:16/9; object-fit:cover; background:#e9eee9; }
.placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; color:var(--green-dark); font-weight:800; letter-spacing:.04em;
  background:linear-gradient(135deg,#edf6ef,#dceee0);
}
.placeholder-cube { font-size:44px; opacity:.85; }
.card-body { padding:20px; }
.card-body h3 { margin:4px 0 8px; font-size:20px; letter-spacing:-.025em; }
.card-body p { min-height:52px; margin:0; color:var(--muted); font-size:14px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tags span {
  padding:3px 8px; border-radius:999px; background:var(--surface-soft);
  color:#5d675f; font-size:11px; border:1px solid var(--line);
}
.card-actions, .detail-actions { display:flex; gap:8px; margin-top:18px; }

.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 16px;
  border-radius:8px; border:1px solid transparent; font-weight:750; font-size:14px;
  cursor:pointer; transition:transform .16s ease,background .16s ease,border-color .16s ease;
}
.button:hover { transform:translateY(-1px); }
.button.primary { color:#fff; background:var(--green); }
.button.primary:hover { background:var(--green-dark); }
.button.ghost { background:var(--surface); color:var(--green-dark); border-color:#cbd9ce; }
.button.small { min-height:36px; padding:0 13px; font-size:13px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.panel { background:var(--dark); color:#fff; border-radius:var(--radius); padding:34px; }
.panel h2 { margin:0 0 8px; }
.panel p { color:#c8d0ca; }
.panel .button.ghost { background:transparent; color:#fff; border-color:#5c665f; }
.panel.light { background:var(--surface); color:var(--text); border:1px solid var(--line); }
.panel.light p { color:var(--muted); }

.tutorial-list { display:grid; gap:10px; }
.tutorial-card {
  display:grid; grid-template-columns:52px 1fr; gap:16px; align-items:start;
  padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .2s ease,border-color .2s ease;
}
.tutorial-card:hover { transform:translateX(2px); border-color:#b9d1bd; }
.tutorial-icon { width:44px; height:44px; display:grid; place-items:center; background:var(--green-light); color:var(--green-dark); border-radius:10px; font-weight:900; }
.tutorial-card h3 { margin:3px 0 5px; font-size:17px; }
.tutorial-card p { margin:0; color:var(--muted); font-size:14px; }

.page-hero { padding:54px 0 36px; background:var(--surface); border-bottom:1px solid var(--line); }
.page-hero h1 { margin:5px 0 8px; font-size:44px; letter-spacing:-.04em; }
.page-hero p { color:var(--muted); max-width:680px; margin:0; }
.breadcrumb { margin-bottom:10px; font-size:13px; color:var(--muted); }
.breadcrumb a { color:var(--green-dark); }
.list-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; }
.filter {
  min-width:170px; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--text);
}
.empty-state { padding:60px 20px; text-align:center; color:var(--muted); background:#fff; border:1px dashed #cbd6cd; border-radius:var(--radius); }
.empty-state.large { padding:90px 20px; }
.empty-icon { font-size:40px; color:var(--green); }

.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:start; }
.detail-image { border-radius:var(--radius); border:1px solid var(--line); }
.detail-content h1 { margin:8px 0 10px; font-size:48px; line-height:1.1; letter-spacing:-.04em; }
.lead { color:var(--muted); font-size:18px; }
.notice { margin-top:28px; padding:18px; background:var(--green-light); border-left:4px solid var(--green); border-radius:8px; }
.notice p { margin:4px 0 0; color:#536058; font-size:14px; }

.article { max-width:820px; margin:auto; background:#fff; padding:42px; border:1px solid var(--line); border-radius:var(--radius); }
.article h1 { margin-top:0; font-size:42px; line-height:1.15; }
.article h2 { margin-top:36px; border-bottom:1px solid var(--line); padding-bottom:8px; }
.article h3 { margin-top:26px; }
.article p, .article li { color:#4f5852; }
.article code { padding:2px 5px; border-radius:4px; background:#eef1ee; }
.article .step { padding:18px; margin:14px 0; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.article .step strong { color:var(--green-dark); }

.site-footer { padding:45px 0 20px; background:#1f2421; color:#dbe1dc; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:50px; }
.footer-brand { color:#fff; }
.site-footer p { color:#aeb8b0; max-width:380px; }
.site-footer h4 { margin:0 0 12px; color:#fff; }
.site-footer a { display:block; width:max-content; margin:5px 0; color:#aeb8b0; }
.site-footer a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #39413c; margin-top:30px; padding-top:18px; color:#89948c; font-size:12px; }

.reveal { opacity:0; transform:translateY(7px); transition:opacity .25s ease,transform .25s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 900px) {
  .hero-grid, .detail-grid, .split { grid-template-columns:1fr; }
  .hero-art { max-width:420px; }
  .category-grid { grid-template-columns:repeat(2,1fr); }
  .resource-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 650px) {
  .container { width:min(var(--container), calc(100% - 28px)); }
  .nav-wrap { min-height:60px; }
  .menu-button { display:block; }
  .nav {
    display:none; position:absolute; left:14px; right:14px; top:58px;
    padding:8px; flex-direction:column; align-items:stretch;
    background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow);
  }
  .nav.open { display:flex; }
  .nav a { padding:11px 12px; }
  .hero { padding:58px 0 48px; }
  .hero h1 { font-size:43px; }
  .hero p { font-size:16px; }
  .section { padding:52px 0; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .category-grid, .resource-grid { grid-template-columns:1fr; }
  .page-hero { padding:40px 0 28px; }
  .page-hero h1, .detail-content h1 { font-size:36px; }
  .list-toolbar { align-items:stretch; flex-direction:column; }
  .filter { width:100%; }
  .article { padding:24px 18px; }
  .article h1 { font-size:34px; }
  .footer-grid { grid-template-columns:1fr; gap:25px; }
  .footer-bottom { flex-direction:column; }
}

/* ==========================================================================
   教程步骤卡片 - 左图右文（图片无缝贴边大卡片）
   ========================================================================== */

.tutorial-step-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1600px; /* 适当放宽容器宽度，容纳 800x500 大图 */
  margin: 0 auto;
}

.tutorial-step-card {
  display: grid;
  grid-template-columns: 720px 1fr; /* 左侧固定 800px 给大图 */
  gap: 0;                            /* 清除网格间距，实现无缝贴合 */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);      /* 卡片整体圆角 */
  overflow: hidden;                  /* 关键：裁切左侧图片的圆角，使图片与卡片完美重合 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* .tutorial-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #bfd4c3;
} */

/* 左侧图片区域：无内边距，完全填充 */
.tutorial-step-media {
  width: 100%;
  height: 100%;
  aspect-ratio: 8 / 5;               /* 对应 800 * 500 的比例 */
  background: var(--surface-soft);
  border: none;                      /* 移除原内边框 */
  border-radius: 0;                  /* 移除独立圆角 */
  overflow: hidden;
}

.tutorial-step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;                 /* 图片自适应填满区域 */
  display: block;
}

/* 右侧文本内容区域：留出舒适内边距 */
.tutorial-step-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;                     /* 右侧文案留白 */
}

.tutorial-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.step-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  letter-spacing: .05em;
}

.tutorial-step-header h3 {
  margin: 0;
  font-size: 24px;                  /* 放大标题，适配大卡片比例 */
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--text);
}

.tutorial-step-content p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;                  /* 放大正文字号 */
  line-height: 1.7;
}

.tutorial-step-action {
  margin-top: 24px;
}

/* 响应式适配：移动端及小屏幕自动转为上下单列布局 */
@media (max-width: 1100px) {
  .tutorial-step-card {
    grid-template-columns: 1fr;    /* 屏幕较小时转为上下结构 */
  }

  .tutorial-step-media {
    aspect-ratio: 8 / 5;
  }

  .tutorial-step-content {
    padding: 24px;
  }
}

/* ==========================================================================
   按钮通用样式补丁
   ========================================================================== */

/* 1. 基础按钮样式 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1.4;
}

/* 2. 主按钮（Primary）风格 */
.button.primary {
  background-color: var(--green, #2e7d32); /* 优先使用变量，没有则用绿色 */
  color: #ffffff !important;               /* 确保文字为白色，防止继承其他颜色变透明 */
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.2);
}

/* .button.primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
} */

/* 3. 小号按钮（Small）尺寸调整 */
.button.small {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 6px;
}