/* ===== 下载教程弹窗专属样式 (xiazai.css) =====
 * 仅文章页加载,与主 style.css 隔离,避免影响生产环境稳定性。
 * 配套 xiazai.js 使用。4 种视觉模板: glass / aurora / solid / neat
 * 主色 --dl-accent 默认品牌蓝,可由 JS 按模板覆盖。
 */

/* ===== 下载教程弹窗(4 种视觉模板) ===== */
.dl-tut-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);animation:dlTutIn .25s ease;}
@keyframes dlTutIn{from{opacity:0}to{opacity:1}}
.dl-tut-box{width:100%;max-width:440px;max-height:90vh;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;animation:dlTutBoxIn .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 24px 70px rgba(0,0,0,.4);}
@keyframes dlTutBoxIn{from{transform:scale(.88) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.dl-tut-head{display:flex;align-items:center;gap:10px;padding:18px 20px;font-size:16px;font-weight:700;color:#fff;}
.dl-tut-ico{display:inline-flex;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.2);align-items:center;justify-content:center;flex-shrink:0;}
.dl-tut-icsg{width:18px;height:18px;flex:none;}
.dl-tut-title{flex:1;min-width:0;}
.dl-tut-x{background:none;border:none;color:rgba(255,255,255,.8);font-size:26px;line-height:1;cursor:pointer;padding:0 4px;transition:.15s;}
.dl-tut-x:hover{color:#fff;transform:rotate(90deg);}
.dl-tut-body{padding:18px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.dl-tut-tip{font-size:13px;color:#888;margin-bottom:14px;line-height:1.6;}
.dl-tut-steps{list-style:none;counter-reset:dlStep;margin:0;padding:0;}
.dl-tut-steps li{position:relative;padding:0 0 14px 34px;font-size:14px;line-height:1.7;color:#333;}
.dl-tut-steps li:last-child{padding-bottom:0;}
.dl-tut-steps li::before{counter-increment:dlStep;content:counter(dlStep);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;background:var(--dl-accent,#4f7cff);flex-shrink:0;}
.dl-tut-steps a{color:var(--dl-accent,#4f7cff);text-decoration:none;font-weight:600;}
.dl-tut-steps a:hover{text-decoration:underline;}
.dl-tut-hl{color:#e53935;font-weight:600;}
.dl-tut-img{display:block;max-width:180px;height:auto;border-radius:8px;margin:8px 0;}
.dl-tut-code{display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:11px;background:#f7f8fa;border:1px dashed var(--dl-accent,#4f7cff);}
.dl-tut-code span{font-size:12px;color:#888;flex-shrink:0;}
.dl-tut-code code{font-size:13px;color:#333;word-break:break-all;font-family:ui-monospace,monospace;}
.dl-tut-foot{display:flex;gap:10px;padding:16px 20px;border-top:1px solid #eee;}
.dl-tut-cancel{flex:0 0 auto;padding:12px 18px;border-radius:11px;border:1px solid #ddd;background:#fff;color:#888;font-size:14px;cursor:pointer;transition:.15s;}
.dl-tut-cancel:hover{background:#f7f8fa;}
.dl-tut-ok{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:11px;border:none;background:linear-gradient(135deg,var(--dl-accent,#4f7cff),color-mix(in srgb,var(--dl-accent,#4f7cff) 70%,#000));color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:.18s;box-shadow:0 5px 16px color-mix(in srgb,var(--dl-accent,#4f7cff) 38%,transparent);}
.dl-tut-ok:hover{transform:translateY(-2px);box-shadow:0 9px 22px color-mix(in srgb,var(--dl-accent,#4f7cff) 52%,transparent);}
.dl-tut-ok .dl-tut-icsg{width:18px;height:18px;}

/* --- 模板1:glass 玻璃(默认,柔和渐变) --- */
.dl-tut--glass .dl-tut-box{background:#fff;border:1px solid #eee;}
.dl-tut--glass .dl-tut-head{background:linear-gradient(135deg,var(--dl-accent,#4f7cff),color-mix(in srgb,var(--dl-accent,#4f7cff) 60%,#9b5cff));}

/* --- 模板2:aurora 极光(流动光效,最炫) --- */
.dl-tut--aurora .dl-tut-box{background:#fff;border:1px solid #eee;position:relative;}
.dl-tut--aurora .dl-tut-head{background:linear-gradient(120deg,#667eea,#764ba2,#f093fb,#4facfe);background-size:300% 100%;animation:auroraMove 5s ease infinite;}
@keyframes auroraMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.dl-tut--aurora .dl-tut-title{background:linear-gradient(90deg,#fff,#ffe4f3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* --- 模板3:solid 实色(深色填充,强冲击) --- */
.dl-tut--solid .dl-tut-box{background:#fff;}
.dl-tut--solid .dl-tut-head{background:var(--dl-accent,#4f7cff);}
.dl-tut--solid .dl-tut-ok{background:var(--dl-accent,#4f7cff);box-shadow:0 5px 16px color-mix(in srgb,var(--dl-accent,#4f7cff) 50%,transparent);}

/* --- 模板4:neat 简约(白底+左色条) --- */
.dl-tut--neat .dl-tut-box{background:#fff;border:1px solid #eee;border-left:5px solid var(--dl-accent,#4f7cff);}
.dl-tut--neat .dl-tut-head{background:#f7f8fa;color:#333;border-bottom:1px solid #eee;}
.dl-tut--neat .dl-tut-head .dl-tut-ico{background:color-mix(in srgb,var(--dl-accent,#4f7cff) 12%,#fff);color:var(--dl-accent,#4f7cff);}
.dl-tut--neat .dl-tut-x{color:#888;}
.dl-tut--neat .dl-tut-ok{background:var(--dl-accent,#4f7cff);color:#fff;}