/* ==========================================================================
   VPNFL — tutorial.css(教程页专属样式)
   首屏准备卡 / 步骤编号 / 步骤导航落点 / 常用入口卡
   ========================================================================== */

/* --------------------------------------------------------------------------
   首屏:左文案右准备卡
   -------------------------------------------------------------------------- */

.tut-hero{
  position:relative;
  background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 58%,var(--bg-bottom) 100%);
}
.tut-hero::before,
.tut-hero::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}
.tut-hero::before{
  inset:-20% -8% auto 48%;
  height:76%;
  background:radial-gradient(closest-side,var(--aqua-06) 0%,var(--accent-06) 46%,transparent 100%);
}
.tut-hero::after{
  inset:auto 56% -22% -10%;
  height:62%;
  background:radial-gradient(closest-side,var(--peri-10) 0%,var(--peri-05) 46%,transparent 100%);
}
.tut-hero .wrap{position:relative;z-index:1}
.tut-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,52fr) minmax(0,44fr);
  column-gap:4%;
  align-items:center;
  padding-top:56px;
  padding-bottom:64px;
}
.tut-hero-grid .copy{
  display:flex;
  flex-direction:column;
  gap:22px;
  min-width:0;
}
.tut-hero-grid .lede{max-width:32em}

/* 准备卡 */
.tut-prep{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px 22px;
  border-radius:var(--r-lg);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-win), inset 0 1px 0 var(--white);
  min-width:0;
}
.tut-prep .prep-title{
  font-family:var(--font-display);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.tut-prep ul{display:flex;flex-direction:column;gap:12px}
.tut-prep li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  color:var(--text);
  min-width:0;
}
.tut-prep li svg{
  width:16px;
  height:16px;
  color:var(--accent);
  flex:none;
  margin-top:4px;
}
.tut-prep .prep-foot{
  padding-top:14px;
  border-top:1px dashed var(--border);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  overflow-wrap:anywhere;
}

/* --------------------------------------------------------------------------
   正文容器与步骤
   -------------------------------------------------------------------------- */

.tut-body{padding-top:48px;padding-bottom:24px}

.tut-step{
  padding-top:44px;
  scroll-margin-top:calc(var(--toc-h) + 20px);
}
.tut-step + .tut-step{border-top:1px solid var(--border-soft);margin-top:44px}
.tut-step-head{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:20px;
  min-width:0;
}
.tut-num{
  font-family:var(--font-mono);
  font-size:15px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.02em;
  flex:none;
}
.tut-step-head .sec-title{margin:0}
.tut-step .prose > p:first-child{margin-top:0}
.tut-step .prose pre{font-size:13px}

/* 步骤内小标题与列表节奏 */
.tut-step .prose ol li{color:var(--muted)}
.tut-step .prose .table-scroll{margin-top:22px}

/* --------------------------------------------------------------------------
   常用入口卡
   -------------------------------------------------------------------------- */

.tut-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:18px;
}
.tut-link-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:24px 22px;
  border-radius:var(--r-md);
  background:var(--bg-panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card), inset 0 1px 0 var(--white);
  min-width:0;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.tut-link-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float);border-color:var(--accent)}
.tut-link-card .tl-title{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text);
}
.tut-link-card .tl-desc{
  font-size:13.5px;
  color:var(--muted);
  flex:1;
}
.tut-link-card .tl-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13.5px;
  font-weight:700;
  color:var(--accent-dark);
}
.tut-link-card .tl-more svg{width:14px;height:14px;transition:transform .18s}
.tut-link-card:hover .tl-more svg{transform:translateX(3px)}

/* --------------------------------------------------------------------------
   响应式
   -------------------------------------------------------------------------- */

@media (max-width:1024px){
  .tut-hero-grid{
    grid-template-columns:minmax(0,1fr);
    row-gap:34px;
    padding-top:40px;
    padding-bottom:52px;
  }
  .tut-hero-grid .copy{max-width:660px}
  .tut-prep{max-width:660px}
}

@media (max-width:768px){
  .tut-body{padding-top:36px}
  .tut-step{padding-top:36px}
  .tut-step + .tut-step{margin-top:36px}
  .tut-step-head{gap:12px;margin-bottom:16px}
  .tut-num{font-size:14px}
}

@media (max-width:640px){
  .tut-hero-grid{padding-top:32px;padding-bottom:40px;row-gap:26px}
  .tut-prep{padding:20px 18px}
  .tut-links{grid-template-columns:minmax(0,1fr)}
  .tut-link-card{padding:20px 18px}
  .tut-step .prose pre{font-size:12px}
}