/* ============ 教程页面专用样式 ============ */

.tutorial-main{
  padding:0 20px 60px;
  max-width:1280px;
  margin:0 auto;
}

/* Hero 区 */
.tutorial-hero{
  background:linear-gradient(135deg,#eff6ff 0%,#e9d5ff 100%);
  border-radius:20px;
  padding:50px 40px 44px;
  text-align:center;
  margin:24px 0 32px;
  position:relative;
  overflow:hidden;
}
.tutorial-hero::before{
  content:"";
  position:absolute;top:-50%;right:-10%;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(255,255,255,.5) 0%,transparent 70%);
  border-radius:50%;
}
.tutorial-hero-inner{position:relative;z-index:1}
.tutorial-hero-icon{font-size:56px;line-height:1;margin-bottom:14px}
.tutorial-hero-title{font-size:32px;font-weight:800;color:#0f172a;margin-bottom:12px;letter-spacing:-.5px}
.tutorial-hero-sub{font-size:15px;color:#64748b;margin-bottom:22px}
.tutorial-hero-stats{display:flex;justify-content:center;gap:32px}
.th-stat{display:flex;flex-direction:column;align-items:center}
.th-stat b{font-size:24px;font-weight:800;color:#3b82f6;line-height:1.2}
.th-stat span{font-size:12px;color:#94a3b8;margin-top:2px}

/* 容器 */
.tutorial-container{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}

/* 侧边导航 */
.tutorial-nav{
  position:sticky;top:100px;
  background:#fff;border-radius:14px;border:1px solid #eaeef4;
  padding:18px 14px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.tutorial-nav-title{font-size:12px;color:#94a3b8;font-weight:700;letter-spacing:.5px;padding:0 10px 12px;text-transform:uppercase;border-bottom:1px solid #f1f5f9;margin-bottom:10px}
.tutorial-nav-item{
  display:block;padding:8px 12px;border-radius:8px;
  font-size:13px;color:#64748b;font-weight:500;
  transition:.2s;margin-bottom:2px;text-decoration:none;
}
.tutorial-nav-item:hover{background:#f1f5f9;color:#0f172a}
.tutorial-nav-item.active{background:#eff6ff;color:#3b82f6;font-weight:600}

/* 内容区 */
.tutorial-content{min-width:0}
.tutorial-section{
  background:#fff;border-radius:16px;border:1px solid #eaeef4;
  padding:28px 32px;
  margin-bottom:24px;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  scroll-margin-top:80px;
}
.tutorial-section-title{display:flex;align-items:center;gap:14px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f1f5f9}
.ts-num{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);color:#fff;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.tutorial-section-title h2{font-size:22px;font-weight:700;color:#0f172a}

.tutorial-p{font-size:14.5px;color:#475569;line-height:1.8;margin-bottom:16px}
.tutorial-list{font-size:14px;color:#475569;line-height:2;padding-left:22px;margin-bottom:16px}
.tutorial-list li{margin-bottom:6px}
.tutorial-list b{color:#0f172a}

/* 步骤 */
.tutorial-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.tutorial-step{display:flex;gap:16px;align-items:flex-start;padding:16px;background:linear-gradient(180deg,#fbfcfe 0%,#f7f9fc 100%);border-radius:12px;border:1px solid #eaeef4}
.tstep-icon{font-size:28px;line-height:1;flex-shrink:0}
.tstep-body{flex:1;min-width:0}
.tstep-title{font-size:15px;font-weight:700;color:#0f172a;margin-bottom:6px}
.tstep-desc{font-size:13.5px;color:#64748b;line-height:1.7}
.tstep-desc b{color:#3b82f6}
.tstep-desc kbd{display:inline-block;padding:1px 6px;background:#fff;border:1px solid #dde3ec;border-radius:4px;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:#334155;margin:0 2px}

/* 提示条 */
.tutorial-tip{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 18px;
  background:#fffbeb;
  border-left:4px solid #f59e0b;
  border-radius:0 10px 10px 0;
  font-size:13.5px;color:#78350f;line-height:1.7;
  margin-top:16px;
}
.tt-ico{font-size:18px;line-height:1;flex-shrink:0;margin-top:1px}

/* 语法块 */
.tutorial-block{background:#f8fafc;border-radius:12px;padding:16px 18px;margin-bottom:16px;border:1px solid #eaeef4}
.tb-head{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.tb-body{padding-top:4px}
.tb-code{background:#fff;border:1px solid #eaeef4;border-radius:8px;padding:10px 14px;margin-bottom:8px;font-size:13px;overflow-x:auto}
.tb-code code{font-family:ui-monospace,Consolas,monospace;color:#db2777;font-size:12.5px;background:transparent;padding:0;border:none}
.tb-desc{font-size:13px;color:#64748b;line-height:1.7;padding-top:4px}
.tb-preview{background:#fff;border:1px dashed #dde3ec;border-radius:8px;padding:14px;margin-top:10px}

/* 语法表格 */
.tutorial-table{width:100%;border-collapse:collapse;font-size:13.5px;background:#fff;border-radius:8px;overflow:hidden}
.tutorial-table th{text-align:left;padding:10px 14px;background:#fafbfd;color:#64748b;font-weight:600;font-size:12px;letter-spacing:.3px;text-transform:uppercase;border-bottom:1px solid #eaeef4}
.tutorial-table td{padding:11px 14px;border-bottom:1px solid #f1f5f9;color:#475569;line-height:1.6}
.tutorial-table tr:last-child td{border-bottom:none}
.tutorial-table td code{background:#fef3c7;color:#92400e;padding:2px 7px;border-radius:5px;font-family:ui-monospace,Consolas,monospace;font-size:12px}

/* 速查表 */
.tutorial-cheatsheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cheat-item{display:flex;flex-direction:column;gap:6px;padding:12px 14px;background:#f8fafc;border:1px solid #eaeef4;border-radius:10px;transition:.2s}
.cheat-item:hover{background:#eff6ff;border-color:#bfdbfe}
.cheat-item code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:#db2777;font-weight:600}
.cheat-item span{font-size:12px;color:#64748b}

/* FAQ */
.tutorial-faq{display:flex;flex-direction:column;gap:10px}
.faq-item{background:#f8fafc;border-radius:10px;border:1px solid #eaeef4;overflow:hidden}
.faq-item summary{
  padding:14px 18px;font-size:14px;font-weight:600;color:#0f172a;
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;
  transition:.2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"＋";font-size:18px;color:#94a3b8;transition:.2s}
.faq-item[open] summary::after{transform:rotate(45deg);color:#3b82f6}
.faq-item summary:hover{background:#eff6ff}
.faq-a{padding:0 18px 16px;font-size:13.5px;color:#64748b;line-height:1.8}
.faq-a code{background:#fef3c7;color:#92400e;padding:2px 6px;border-radius:4px;font-family:ui-monospace,Consolas,monospace;font-size:12px}
.faq-a b{color:#0f172a}

/* 快捷键 */
.tutorial-kbd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.kbd-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;background:#f8fafc;border-radius:10px;border:1px solid #eaeef4}
.kbd-item span{font-size:13px;color:#64748b;font-weight:500}
.kbd-item kbd{display:inline-block;padding:3px 9px;background:#fff;border:1px solid #dde3ec;border-radius:5px;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#334155;box-shadow:0 1px 0 #dde3ec;margin:0 1px}

/* 结束块 */
.tutorial-end{
  margin-top:32px;padding:32px 24px;text-align:center;
  background:linear-gradient(135deg,#eff6ff 0%,#e9d5ff 100%);
  border-radius:14px;
}
.te-icon{font-size:48px;line-height:1;margin-bottom:12px}
.te-title{font-size:20px;font-weight:800;color:#0f172a;margin-bottom:8px}
.te-desc{font-size:14px;color:#475569;line-height:1.7}
.te-desc a{color:#3b82f6;font-weight:600;text-decoration:none;border-bottom:1px dashed #3b82f6}
.te-desc a:hover{color:#2563eb;border-bottom-style:solid}

/* 响应式 */
@media (max-width:900px){
  .tutorial-container{grid-template-columns:1fr}
  .tutorial-nav{position:static;margin-bottom:20px}
  .tutorial-hero{padding:32px 24px}
  .tutorial-hero-title{font-size:24px}
  .tutorial-section{padding:22px 20px}
  .tutorial-section-title h2{font-size:19px}
}