/* ============================================================
   VPNTea · tutorial.css
   快速上手页：单线步骤流、平台导入说明与完成状态检查
   ============================================================ */

.tutorial-page{
  background:var(--bg);
}

.tutorial-shell{
  padding-top:clamp(52px,7vw,88px);
  padding-bottom:clamp(64px,9vw,112px);
}

.tutorial-hero{
  max-width:860px;
  margin-bottom:34px;
}

.tutorial-hero h1{
  font-size:clamp(38px,5.4vw,64px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.018em;
}

.tutorial-lead{
  max-width:720px;
  margin-top:18px;
  color:var(--muted);
  font-size:17px;
  line-height:1.85;
}

.guide-facts{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:26px;
}

.tutorial-toc{
  margin-bottom:28px;
}

.tutorial-callout{
  max-width:920px;
  margin-top:0;
  margin-bottom:20px;
}

.tutorial-callout svg{
  color:var(--accent-dark);
}

.tutorial-steps{
  gap:0;
}

.tutorial-steps>.guide-step{
  padding-top:52px;
  padding-bottom:52px;
  padding-left:76px;
  border-bottom:1px solid var(--border);
}

.tutorial-steps>.guide-step::before{
  top:54px;
  width:42px;
  height:42px;
  background:var(--bg);
}

.guide-step h2{
  margin-bottom:20px;
  font-size:clamp(25px,3vw,36px);
  font-weight:900;
}

.guide-step>p{
  max-width:820px;
  margin-bottom:16px;
  color:var(--ink);
  font-size:15.5px;
  line-height:1.95;
}

.guide-step>p:last-of-type{
  margin-bottom:0;
}

.step-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 20px;
  margin-top:24px;
}

.text-link{
  color:var(--accent-dark);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}

.text-link:hover{
  color:var(--ink);
}

.guide-step pre{
  max-width:760px;
  margin-top:18px;
  margin-bottom:18px;
}

.platform-guide{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:28px;
}

.platform-guide section{
  min-width:0;
  padding:24px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
}

.platform-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--border);
}

.platform-head h3{
  font-size:19px;
}

.platform-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:4px 8px;
  border:1px solid var(--accent);
  border-radius:var(--r-s);
  color:var(--accent-dark);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}

.platform-guide p{
  margin-bottom:14px;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.9;
}

.platform-guide p:last-child{
  margin-bottom:0;
}

.verify-panel{
  max-width:760px;
  margin-top:26px;
  padding:24px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
}

.verify-panel h3{
  margin-bottom:16px;
}

.verify-panel .check-list{
  margin-bottom:0;
}

.guide-next{
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:52px;
  padding:34px;
  background:var(--bg-panel-2);
  border:1px solid var(--border);
  border-radius:calc(var(--r) + 2px);
}

.guide-next-copy{
  flex:1 1 560px;
  min-width:0;
}

.guide-next h2{
  margin-bottom:14px;
  font-size:clamp(24px,3vw,34px);
}

.guide-next p:not(.kicker){
  max-width:780px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:15px;
  line-height:1.9;
}

.guide-next p:last-child{
  margin-bottom:0;
}

.guide-next>.btn-plans{
  flex-shrink:0;
  background:var(--bg);
}

@media (max-width:768px){
  .tutorial-shell{
    padding-top:40px;
  }

  .tutorial-hero h1{
    font-size:clamp(32px,9vw,40px);
  }

  .tutorial-lead{
    font-size:15.5px;
  }

  .tutorial-steps>.guide-step{
    padding-top:42px;
    padding-bottom:42px;
    padding-left:54px;
  }

  .tutorial-steps>.guide-step::before{
    top:44px;
  }

  .platform-guide{
    grid-template-columns:1fr;
  }

  .guide-next{
    align-items:flex-start;
    flex-direction:column;
    padding:26px 22px;
  }
}

@media (max-width:480px){
  .guide-facts{
    align-items:flex-start;
  }

  .tutorial-steps>.guide-step{
    padding-left:48px;
  }

  .tutorial-steps>.guide-step::before{
    width:36px;
    height:36px;
  }

  .guide-step h2{
    font-size:25px;
  }

  .platform-guide section{
    padding:20px 16px;
  }

  .step-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .step-actions .btn-main,
  .step-actions .btn-plans{
    justify-content:center;
    width:100%;
  }

  .verify-panel{
    padding:20px 16px;
  }
}