/* ============================================================
   39VPN · tutorial.css(教程页专属)
   导语区 / 步骤流程条 / 步骤标题 / 平台导入卡 / 相关链接
   ============================================================ */

/* ============ 导语区(亮区 + 细网格) ============ */
.tut-intro{position:relative;background:var(--bg);overflow:hidden}
.tut-intro::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.tut-intro .wrap{position:relative;z-index:2;padding-top:56px;padding-bottom:48px;text-align:center}
.tut-intro h1{margin:16px 0 0;font-size:clamp(30px,4vw,46px);font-weight:900;line-height:1.18;letter-spacing:-.02em}
.tut-sub{margin:14px auto 0;max-width:700px;font-size:15.5px;line-height:1.75;color:var(--muted)}
.tut-sub strong{color:var(--text)}
.tut-intro .callout{margin-top:26px;text-align:left}

/* ============ 步骤流程条 ============ */
.flow-rail{margin-top:26px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px}
.flow-item{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg);font-size:13px;font-weight:600;color:var(--muted)}
.flow-item b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:800;flex-shrink:0}
.flow-sep{color:var(--border-strong);font-size:14px;flex-shrink:0}

/* ============ 步骤正文排版 ============ */
.tut-doc{padding-top:8px;padding-bottom:72px}
.tut-doc section{margin-top:50px}
.tut-doc section:first-of-type{margin-top:4px}
.tut-doc p{margin-top:13px;font-size:15px;line-height:1.85;color:var(--text)}
.tut-doc p strong{color:var(--text);font-weight:700}
.tut-doc a{color:var(--accent);font-weight:600}
.tut-doc a:hover{color:var(--accent-dark)}
/* 按钮类链接夺回自己的配色(正文链接规则特异性更高,会把按钮染成 accent-on-accent) */
.tut-doc a.btn-main,.tut-doc a.btn-sub{color:var(--bg);font-weight:700}
.tut-doc a.btn-sub{color:var(--text);font-weight:600}
.tut-doc a.btn-main:hover{color:var(--bg)}
.tut-doc a.btn-sub:hover{color:var(--accent)}
.tut-plain-h{margin:0 0 4px}

/* 步骤标题(数字徽章 + 标题,标题本身不做 flex) */
.step-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--gold),var(--pink) 52%,var(--accent));color:var(--bg);font-family:var(--font-display);font-size:19px;font-weight:900;flex-shrink:0;box-shadow:var(--shadow-btn)}
.step-head h2{margin:0;font-size:clamp(22px,2.6vw,30px);line-height:1.25}

/* 操作按钮行 */
.tut-actions{margin-top:20px;display:flex;flex-wrap:wrap;gap:12px}

/* ============ 订阅示例行 ============ */
.sub-sample{margin-top:16px;display:flex;align-items:center;gap:12px;padding:13px 16px;border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--bg-panel);flex-wrap:wrap}
.sub-sample .tag{flex-shrink:0}
.sub-sample code{background:var(--bg);flex:1;min-width:180px}

/* ============ 提醒清单 ============ */
.tips-list{margin-top:14px;display:grid;gap:9px}
.tips-list li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;line-height:1.75;color:var(--muted)}
.tips-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:9px}

/* ============ 平台导入卡 ============ */
.platform-list{display:grid;gap:14px;margin-top:18px}
.platform-item{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);box-shadow:var(--shadow-card)}
.platform-icon{width:46px;height:46px;border-radius:var(--radius-md);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.platform-icon svg{display:block}
.platform-body{min-width:0}
.platform-body h3{margin:2px 0 6px;font-size:17px}
.platform-body p{margin:0;font-size:14.5px;line-height:1.78;color:var(--muted)}

/* ============ 相关链接卡 ============ */
.tut-links{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.tut-link-card{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);box-shadow:var(--shadow-card);transition:border-color .15s,transform .2s}
.tut-link-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.tut-link-card strong{font-size:15px;font-weight:800;color:var(--text)}
.tut-link-card span{font-size:13px;line-height:1.6;color:var(--muted)}

/* ============ 响应式 ============ */
@media (max-width:768px){
  .tut-links{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tut-intro .wrap{padding-top:44px;padding-bottom:36px}
  .flow-sep{display:none}
  .platform-item{flex-direction:column;gap:12px}
  .sub-sample code{min-width:0;flex-basis:100%}
}