/**
 * 网盘下载教程页（page-download-tutorial.php）样式 · 方向A 现代简约卡片流
 * - 语义色 Token + 8px 间距节奏
 * - 网盘 Tab 为简洁文字标签，整排可横向滚动
 * - 步骤时间线沿用教程详情页同款观感
 */

.xu5-dlg-wrap{
  /* ---- 语义色 Token ---- */
  --dlg-accent:#409eff;
  --dlg-accent-strong:#337ecc;
  --dlg-accent-weak:#ecf5ff;
  --dlg-note-bg:#e6f7ff;
  --dlg-text:#1f2937;
  --dlg-text-2:#374151;
  --dlg-text-3:#6b7280;
  --dlg-surface:#ffffff;
  --dlg-surface-2:#f9fafb;
  --dlg-surface-3:#f8f9fa;
  --dlg-border:#e5e7eb;
  --dlg-border-2:#dcdfe6;
  --dlg-shadow:0 2px 12px rgba(0,0,0,.06);
  --dlg-shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --dlg-radius:12px;
  --dlg-radius-sm:8px;

  /* 与站点其它内容页（.xu5-page-wrapper）一致：白色面板盖住 html 的黑色底 */
  width:calc(100% - 30px);
  max-width:1100px;
  margin:16px auto 32px;
  padding:24px 28px 32px;
  box-sizing:border-box;
  color:var(--dlg-text-2);
  background:var(--dlg-surface);
  border-radius:var(--dlg-radius);
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.xu5-dlg-wrap *{box-sizing:border-box;}

/* ---- 头部：左对齐、去渐变、干净留白 ---- */
.xu5-dlg-head{
  margin-bottom:24px;
  padding:0 0 20px;
  border-bottom:1px solid var(--dlg-border);
}
.xu5-dlg-title{
  font-size:28px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 8px;
  color:var(--dlg-text);
}
.xu5-dlg-sub{
  color:var(--dlg-text-3);
  font-size:14.5px;
  line-height:1.6;
  margin:0;
}

/* ---- 简介（页面正文 the_content） ---- */
.xu5-dlg-intro{
  margin:0 0 20px;
  color:var(--dlg-text-2);
  font-size:14.5px;
  line-height:1.85;
  background:var(--dlg-surface);
  border:1px solid var(--dlg-border);
  border-radius:var(--dlg-radius);
  padding:16px 20px;
  box-shadow:var(--dlg-shadow-sm);
}
.xu5-dlg-intro p{margin:0 0 10px;}
.xu5-dlg-intro p:last-child{margin-bottom:0;}
.xu5-dlg-intro img{max-width:100%;height:auto;border-radius:var(--dlg-radius-sm);}

/* ---- Tab：横向可滚动的分段控件（简洁文字标签） ---- */
.xu5-dlg-tabs{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  margin:0 0 20px;
  padding:2px 2px 8px;
  scrollbar-width:thin;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.xu5-dlg-tabs::-webkit-scrollbar{height:6px;}
.xu5-dlg-tabs::-webkit-scrollbar-track{background:transparent;}
.xu5-dlg-tabs::-webkit-scrollbar-thumb{background:var(--dlg-border-2);border-radius:3px;}
.xu5-dlg-tab{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:inline-flex;
  align-items:center;
  gap:8px;
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--dlg-border-2);
  background:var(--dlg-surface);
  color:var(--dlg-text-2);
  padding:8px 16px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease;
}
.xu5-dlg-tab:hover{border-color:#a0cfff;color:var(--dlg-accent);}
.xu5-dlg-tab:focus-visible{outline:2px solid var(--dlg-accent);outline-offset:2px;}
.xu5-dlg-tab.is-active{
  background:var(--dlg-accent);
  border-color:var(--dlg-accent);
  color:#fff;
  box-shadow:0 4px 12px rgba(64,158,255,.25);
}

/* ---- 内容卡片 ---- */
.xu5-dlg-panel{
  position:relative;
  overflow:hidden;
  display:none;
  background:var(--dlg-surface);
  border:1px solid var(--dlg-border);
  border-radius:var(--dlg-radius);
  padding:24px 28px;
  box-shadow:var(--dlg-shadow);
}
.xu5-dlg-panel.is-active{display:block;animation:xu5dlgfade .25s ease;}
@keyframes xu5dlgfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 面板头：网盘名 */
.xu5-dlg-panel-head{
  margin:2px 0 18px;
}
.xu5-dlg-panel-title{
  margin:0;font-size:19px;font-weight:700;color:var(--dlg-text);line-height:1.3;
}

/* ---- 正文排版 ---- */
.xu5-dlg-body{font-size:14.5px;line-height:1.85;color:var(--dlg-text-2);}
.xu5-dlg-body p{margin:0 0 12px;}
.xu5-dlg-body h2,.xu5-dlg-body h3,.xu5-dlg-body h4{color:var(--dlg-text);margin:20px 0 10px;line-height:1.4;}
.xu5-dlg-body h2{font-size:18px;}
.xu5-dlg-body h3{font-size:17px;}
.xu5-dlg-body h4{font-size:15px;}
.xu5-dlg-body ul{margin:0 0 14px;padding-left:22px;}
.xu5-dlg-body ul li{margin:0 0 7px;}
.xu5-dlg-body img{max-width:100%;height:auto;display:block;margin:16px auto;border-radius:var(--dlg-radius-sm);border:1px solid var(--dlg-border);box-shadow:var(--dlg-shadow-sm);}
.xu5-dlg-body figure{margin:16px 0;text-align:center;}
.xu5-dlg-body figcaption{color:var(--dlg-text-3);font-size:13px;margin-top:6px;}
.xu5-dlg-body a{color:var(--dlg-accent);text-decoration:none;font-weight:600;}
.xu5-dlg-body a:hover{color:var(--dlg-accent-strong);text-decoration:underline;}

/* ---- 步骤：数字徽标 + 时间线（默认 .xu5-dlg-steps 与编辑器有序列表 ol 共用） ---- */
.xu5-dlg-steps,.xu5-dlg-body ol{margin:0;padding:0;list-style:none;counter-reset:xu5dlgstep;}
.xu5-dlg-steps>li,.xu5-dlg-body ol>li{position:relative;margin:0;padding:3px 0 20px 48px;line-height:1.8;color:var(--dlg-text-2);font-size:14.5px;}
.xu5-dlg-steps>li:last-child,.xu5-dlg-body ol>li:last-child{padding-bottom:0;}
.xu5-dlg-steps>li::before,.xu5-dlg-body ol>li::before{
  counter-increment:xu5dlgstep;content:counter(xu5dlgstep);
  position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;
  background:var(--dlg-accent);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(64,158,255,.3);
}
.xu5-dlg-steps>li:not(:last-child)::after,.xu5-dlg-body ol>li:not(:last-child)::after{
  content:"";position:absolute;left:15px;top:34px;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--dlg-accent),var(--dlg-border));border-radius:1px;
}
.xu5-dlg-steps b,.xu5-dlg-body ol>li b{color:var(--dlg-accent);}
.xu5-dlg-steps img,.xu5-dlg-body ol>li img{max-width:100%;height:auto;display:block;margin:12px 0;border-radius:var(--dlg-radius-sm);border:1px solid var(--dlg-border);}

/* ---- 提示条 ---- */
.xu5-dlg-note{
  margin-top:18px;padding:10px 16px;
  background:var(--dlg-note-bg);
  border-left:4px solid var(--dlg-accent);
  border-radius:var(--dlg-radius-sm);
  font-size:13.5px;color:var(--dlg-accent-strong);line-height:1.7;
}

/* ---- 通用说明 ---- */
.xu5-dlg-common{
  margin-top:22px;
  background:var(--dlg-surface-3);
  border:1px solid var(--dlg-border);
  border-radius:var(--dlg-radius);
  padding:22px 26px;
}
.xu5-dlg-common-head{margin:0 0 14px;}
.xu5-dlg-common-title{margin:0;font-size:17px;font-weight:700;color:var(--dlg-text);}
.xu5-dlg-common ul{margin:0;padding-left:22px;color:var(--dlg-text-2);font-size:14.5px;line-height:1.95;}
.xu5-dlg-common li{margin-bottom:4px;}
.xu5-dlg-common b{color:var(--dlg-text);}
.xu5-dlg-common .xu5-dlg-body{font-size:14.5px;}

/* ---- 引用块步骤（与教程详情页一致）：JS 把每个 blockquote 解析为一个步骤 ---- */
.xu5-dlg-body blockquote{margin:0 0 14px;padding:12px 18px;background:var(--dlg-surface-2);border-left:4px solid var(--dlg-accent);border-radius:var(--dlg-radius-sm);color:var(--dlg-text-2);font-style:normal;}
.xu5-dlg-body blockquote p{margin:0;}
.xu5-dlg-body .xu5-tut-intro{font-size:14.5px;line-height:1.85;color:var(--dlg-text-2);margin-bottom:16px;}
.xu5-dlg-body .xu5-tut-intro p{margin:0 0 12px;}
.xu5-dlg-body .xu5-tut-intro p:last-child{margin-bottom:0;}
.xu5-dlg-body .xu5-tut-steps{padding:0;}
.xu5-dlg-body .xu5-tut-step{display:flex;gap:16px;margin-bottom:24px;position:relative;}
.xu5-dlg-body .xu5-tut-step:last-child{margin-bottom:0;}
.xu5-dlg-body .xu5-tut-step:last-child .xu5-step-line::after{display:none;}
.xu5-dlg-body .xu5-step-line{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:40px;}
.xu5-dlg-body .xu5-step-num{width:40px;height:40px;border-radius:50%;background:var(--dlg-accent);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;box-shadow:0 3px 10px rgba(64,158,255,.3);}
.xu5-dlg-body .xu5-step-line::after{content:'';flex:1;width:2px;background:linear-gradient(180deg,var(--dlg-accent),var(--dlg-border));margin-top:8px;border-radius:1px;min-height:20px;}
.xu5-dlg-body .xu5-step-body{flex:1;min-width:0;}
.xu5-dlg-body .xu5-step-text{padding:14px 18px;background:var(--dlg-surface-2);border:1px solid var(--dlg-border);border-radius:10px;font-size:14px;line-height:1.7;color:var(--dlg-text-2);position:relative;transition:border-color .2s,box-shadow .2s;}
.xu5-dlg-body .xu5-step-text::before{content:'';position:absolute;left:-7px;top:14px;width:12px;height:12px;background:var(--dlg-surface-2);border-left:1px solid var(--dlg-border);border-bottom:1px solid var(--dlg-border);transform:rotate(45deg);}
.xu5-dlg-body .xu5-step-text p{margin:0;}
.xu5-dlg-body .xu5-step-text strong,.xu5-dlg-body .xu5-step-text b{color:var(--dlg-accent);}
.xu5-dlg-body .xu5-tut-step:hover .xu5-step-text{border-color:#a0cfff;box-shadow:0 2px 8px rgba(64,158,255,.08);}
.xu5-dlg-body .xu5-step-img{margin-top:12px;border-radius:10px;overflow:hidden;border:1px solid var(--dlg-border);background:var(--dlg-surface-2);}
.xu5-dlg-body .xu5-step-img img{display:block;width:100%;height:auto;margin:0;border:0;border-radius:0;}

/* ---- 响应式 ---- */
@media (max-width:768px){
  .xu5-dlg-wrap{width:calc(100% - 20px);padding:18px 16px 24px;}
}
@media (max-width:600px){
  .xu5-dlg-title{font-size:22px;}
  .xu5-dlg-panel{padding:20px 16px;}
  .xu5-dlg-common{padding:18px 16px;}
  .xu5-dlg-tab{padding:7px 14px;font-size:13px;}
  .xu5-dlg-body,.xu5-dlg-steps>li{font-size:14px;}
  .xu5-dlg-steps>li{padding-left:44px;}
  .xu5-dlg-body .xu5-tut-step{gap:10px;margin-bottom:18px;}
  .xu5-dlg-body .xu5-step-line{width:32px;}
  .xu5-dlg-body .xu5-step-num{width:32px;height:32px;font-size:12px;}
  .xu5-dlg-body .xu5-step-text{padding:10px 14px;font-size:13px;}
  .xu5-dlg-body .xu5-step-text::before{display:none;}
}

/* ---- 动效降级 ---- */
@media (prefers-reduced-motion:reduce){
  .xu5-dlg-panel.is-active{animation:none;}
  .xu5-dlg-tab{transition:none;}
}