/* ============================================================
   教程页(快速上手)专属样式
   ============================================================ */

/* ---- 页首 ---- */
.tut-hero{padding-top:56px;padding-bottom:40px}
.tut-hero h1{margin-top:16px;max-width:16em}
.tut-lead{
  font-size:17px;line-height:1.85;color:var(--text-muted);
  max-width:46em;margin-top:18px;
}
.tut-lead a{color:var(--accent-dark);font-weight:600}
.tut-lead a:hover{text-decoration:underline}
.tut-callout{margin-top:24px;max-width:52em}

/* ---- 步骤区块(只声明纵向节奏) ---- */
.tut-step{padding-top:56px;padding-bottom:10px}
.step-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.step-badge{
  flex:none;width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--grad-sunrise);color:var(--bg-panel);
  font-family:var(--font-mono);font-weight:700;font-size:15px;
  box-shadow:var(--shadow-cta);
}
.step-head h2{font-size:28px}
.tut-step p{margin-bottom:12px;max-width:56em}
.tut-step p a{color:var(--accent-dark);font-weight:600}
.tut-step p a:hover{text-decoration:underline}
.step-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.step-cta .hint{font-size:13.5px;color:var(--text-muted)}
.step-cta .hint a{color:var(--accent-dark);font-weight:600}

/* ---- 平台小节面板 ---- */
.plat-block{
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:20px 22px;box-shadow:var(--shadow-card);
  max-width:56em;
}
.plat-block + .plat-block{margin-top:14px}
.plat-block h3{
  display:flex;align-items:center;gap:10px;
  margin-bottom:8px;
}
.plat-block h3 svg{width:20px;height:20px;color:var(--accent-dark);flex:none}
.plat-block p{margin-bottom:0}
.plat-note{margin-top:18px;max-width:56em}
.plat-note-text{margin-top:12px}
.platform-grid.tut-grid{grid-template-columns:repeat(4,1fr)}

/* ---- 延伸阅读 ---- */
.tut-end{padding-top:60px;padding-bottom:48px}
.more-h{margin-top:34px;margin-bottom:4px}
.tut-links{
  list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:16px;
}
.tut-link-card{
  display:flex;flex-direction:column;gap:6px;min-width:0;
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:16px 18px;box-shadow:var(--shadow-card);
  transition:border-color .15s ease,transform .15s ease;
}
.tut-link-card:hover{border-color:var(--accent-line);transform:translateY(-2px)}
.tut-link-card .lc-title{font-weight:700;font-size:15px}
.tut-link-card .lc-desc{font-size:13px;color:var(--text-muted);line-height:1.65}
.tut-end .ticker{margin-top:34px}

/* ---- 响应式 ---- */
@media (max-width:960px){
  .tut-links{grid-template-columns:1fr}
  .platform-grid.tut-grid{grid-template-columns:repeat(2,1fr)}
  .tut-hero{padding-top:40px;padding-bottom:28px}
}
@media (max-width:640px){
  .step-head{gap:10px}
  .step-badge{width:36px;height:36px;font-size:13px}
  .step-head h2{font-size:22px}
  .tut-step{padding-top:44px}
}