/* ============================================================
   Clash客户端 · tutorial.css（教程页专属）
   教程页头氛围 / 步骤卡与连接线 / 平台界面差异面板 / 延伸阅读卡
   ============================================================ */

/* ---------- 1. 教程页头 ---------- */
.tut-hero{
  position:relative;
  overflow:hidden;
  padding-top:56px;
  padding-bottom:52px;
  background:var(--bg);
}
.tut-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hero-halo);
  pointer-events:none;
}
.tut-hero::after{
  content:"";
  position:absolute;
  inset:-24% -8% -18% -8%;
  background-image:var(--grid-tex);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(66% 72% at 20% 24%,#000 0%,rgba(0,0,0,0) 76%);
  mask-image:radial-gradient(66% 72% at 20% 24%,#000 0%,rgba(0,0,0,0) 76%);
  pointer-events:none;
}
.tut-inner{
  position:relative;
  z-index:2;
  max-width:880px;
  min-width:0;
}
.tut-chips{margin-top:24px}
.tut-note{margin-top:26px}
.tut-note .callout{margin:0}
.tut-toc{position:relative;z-index:2;margin-top:30px}

/* ---------- 2. 步骤卡与连接线 ---------- */
.tut-flow{display:grid;gap:26px;min-width:0;margin-top:24px}
.tut-step{
  position:relative;
  min-width:0;
  padding:30px 32px 30px 38px;
  border:1px solid var(--line-light);
  border-radius:var(--r-l);
  background:linear-gradient(180deg,rgba(79,109,255,.05) 0%,rgba(79,109,255,0) 46%),var(--bg-panel-2);
  color:var(--ink);
}
.tut-step::after{
  content:"";
  position:absolute;
  left:-1px;
  top:22px;
  height:calc(100% - 44px);
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--grad-accent);
}
.tut-step + .tut-step::before{
  content:"";
  position:absolute;
  left:60px;
  top:-26px;
  height:26px;
  border-left:1px dashed var(--stroke-accent);
}
.tut-step-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.tut-step-no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  flex:none;
  border-radius:var(--r-m);
  background:var(--grad-accent);
  color:var(--bg-panel);
  font-family:var(--font-mono);
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
}
.tut-step-title{
  flex:1 1 auto;
  min-width:0;
  font-size:clamp(20px,2.1vw,27px);
  line-height:1.28;
  color:var(--ink);
}
.tut-step-tag{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  overflow:hidden;
  padding:3px 10px;
  border:1px solid var(--line-light);
  border-radius:var(--r-pill);
  background:rgba(0,42,107,.04);
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-muted);
  white-space:nowrap;
}
.tut-step-body{
  margin-top:18px;
  min-width:0;
  font-size:15.5px;
  line-height:1.82;
  color:var(--ink-muted);
}
.tut-step-body p{margin:14px 0}
.tut-step-body p:first-child{margin-top:0}
.tut-step-body strong{color:var(--ink);font-weight:700}
.tut-step-body ul,.tut-step-body ol{margin:14px 0;padding-left:1.35em;list-style:disc}
.tut-step-body ol{list-style:decimal}
.tut-step-body li{margin:8px 0}
.tut-step-body li::marker{color:var(--accent-dark)}
.tut-step-body pre{margin:16px 0;border-color:var(--line-soft)}

/* ---------- 3. 平台界面差异面板 ---------- */
.tut-tabs{margin-top:30px}
.tut-tabs .tabpanel{
  padding:24px 26px;
  border:1px solid var(--stroke-soft);
  border-radius:var(--r-l);
  background:var(--glass);
  color:var(--text);
}
.tut-panel-title{font-size:clamp(18px,1.8vw,22px);line-height:1.3;color:var(--text)}
.tut-panel-text{margin-top:12px;font-size:15px;line-height:1.78;color:var(--text-muted)}
.ui-rows{
  margin-top:18px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-m);
  background:var(--bg-panel);
  overflow:hidden;
}
.ui-row{
  display:grid;
  grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:14px;
  padding:11px 16px;
  border-bottom:1px solid var(--line-soft);
}
.ui-row:last-child{border-bottom:0}
.ui-k{font-family:var(--font-mono);font-size:12px;color:var(--text-dim)}
.ui-v{min-width:0;font-size:13.5px;line-height:1.7;color:var(--text-muted);overflow-wrap:anywhere}

/* ---------- 4. 延伸阅读卡 ---------- */
.tut-next{margin-top:30px}
.tut-next-card{
  display:flex;
  flex-direction:column;
  transition:border-color .18s ease,transform .18s ease;
}
.tut-next-card:hover{border-color:var(--stroke-accent);transform:translateY(-2px)}
.tut-next-k{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--text-dim)}
.tut-next-t{margin-top:10px;font-size:17px;line-height:1.4;color:var(--text)}
.tut-next-d{margin-top:8px;font-size:14px;line-height:1.72;color:var(--text-muted)}
.tut-next-go{margin-top:auto;padding-top:16px;font-family:var(--font-mono);font-size:12.5px;color:var(--cyan)}

/* ---------- 5. 锚点偏移与窄屏 ---------- */
.tut-anchor{scroll-margin-top:88px}

@media (max-width:900px){
  .tut-hero{padding-top:44px;padding-bottom:40px}
}
@media (max-width:720px){
  .tut-step-title{font-size:clamp(19px,5.4vw,23px)}
}
@media (max-width:640px){
  .tut-step{padding:22px 18px 24px 20px}
  .tut-step::after{top:16px;height:calc(100% - 32px)}
  .tut-step-no{min-width:38px;height:38px;font-size:14px}
  .tut-step + .tut-step::before{left:39px}
  .tut-step-body{font-size:15px}
  .tut-tabs .tabpanel{padding:18px}
  .ui-row{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .tut-next-card{transition:none}
}