/* ==========================================================================
   MeyeVPN — tutorial.css
   教程页专属样式:首屏、步骤卡、平台小节、面板位置示意、延伸阅读网格
   ========================================================================== */

/* ---------- 首屏 ---------- */
.tut-hero{
  position:relative;
  overflow-x:clip;
  max-width:100%;
  background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  padding-top:56px;
  padding-bottom:64px;
}
.tut-hero .wrap{position:relative;z-index:1}
.tut-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
}
.tut-glow-a{
  top:-120px;right:-80px;
  width:min(520px,88vw);height:min(420px,72vw);
  background:radial-gradient(closest-side,var(--glow-7),transparent 72%);
}
.tut-glow-b{
  bottom:-140px;left:-100px;
  width:min(560px,92vw);height:min(440px,76vw);
  background:radial-gradient(closest-side,var(--glow-5),transparent 72%);
}
.tut-hero-inner{max-width:840px;min-width:0}
.tut-hero h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(34px,4.6vw,60px);
  line-height:1.1;
  letter-spacing:-.03em;
  margin:18px 0 16px;
}
.tut-lead{
  font-size:18px;
  line-height:1.75;
  color:var(--muted);
  max-width:700px;
}
.tut-actions{
  display:flex;flex-wrap:wrap;gap:12px;
  margin:26px 0 22px;
}
.tut-hero .fact-strip{margin-top:4px}

/* ---------- 正文骨架 ---------- */
.tut-main{
  padding-top:24px;
  padding-bottom:84px;
}
.tut-article{max-width:900px;min-width:0}

/* ---------- 步骤卡 ---------- */
.tut-step{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft);
  padding:32px;
  margin-bottom:22px;
  min-width:0;
}
.tut-step-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 14px;
  margin-bottom:16px;
}
.tut-step-num{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 13px;
  border-radius:var(--r-pill);
  background:var(--tint-6);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  flex-shrink:0;
}
.tut-step h2{
  font-family:var(--font-display);
  font-size:clamp(22px,2.6vw,30px);
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.025em;
  min-width:0;
}
.tut-step p{
  font-size:16.5px;
  line-height:1.85;
  color:var(--muted);
}
.tut-step p + p{margin-top:14px}
.tut-step p strong{color:var(--text);font-weight:600}
.tut-step .callout{margin:0 0 20px}
.tut-step .check-list{margin-top:20px}
.tut-step .table-scroll{margin:20px 0 4px}
.tut-table table{min-width:640px}
.tut-actions-inline{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:24px;
}

/* ---------- 平台小节 ---------- */
.tut-sub{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--border);
}
.tut-sub-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.tut-sub-head .sq-ic{width:38px;height:38px}
.tut-sub-head h3{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
}
.tut-sub p{
  font-size:15.5px;
  line-height:1.85;
  color:var(--muted);
}

/* ---------- 面板位置示意(纯装饰) ---------- */
.tut-mock{
  margin-top:20px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:14px;
  max-width:100%;
}
.tut-mock-bar{display:flex;gap:6px;margin-bottom:12px}
.tut-mock-bar span{
  width:8px;height:8px;border-radius:50%;
  background:var(--ink-12);
  flex-shrink:0;
}
.tut-mock-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:10px 14px;
  margin-bottom:8px;
  font-size:13.5px;
  min-width:0;
}
.tut-mock-row:last-child{margin-bottom:0}
.tut-mock-row.is-on{
  background:var(--tint-6);
  border-color:var(--tint-18);
}
.tut-mock-label{font-weight:600;color:var(--text);min-width:0}
.tut-mock-pill{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--muted);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  padding:2px 10px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- 延伸阅读网格 ---------- */
.tut-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}
.tut-link{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  padding:18px;
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.tut-link:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.tut-link b{font-size:15.5px;font-weight:700}
.tut-link span{font-size:13.5px;line-height:1.65;color:var(--muted)}

/* ---------- 响应式 ---------- */
@media (max-width:768px){
  .tut-hero{padding-top:36px;padding-bottom:44px}
  .tut-lead{font-size:16.5px}
  .tut-main{padding-bottom:60px}
  .tut-step{padding:22px}
  .tut-step p{font-size:15.5px}
  .tut-sub p{font-size:15px}
  .tut-links{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tut-hero h1{font-size:32px}
  .tut-table table{min-width:520px}
}
@media (prefers-reduced-motion:reduce){
  .tut-link{transition:none}
  .tut-link:hover{transform:none}
}