:root{--bg:#f7f7f8;--card:#fff;--text:#111827;--muted:#6b7280;--border:#e5e7eb;--shadow:0 10px 20px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.04)}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.nav{position:sticky;top:0;background:rgba(247,247,248,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border);z-index:20}
.nav-inner{display:flex;align-items:center;gap:18px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700}
.logo-badge{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#ffeaa7;color:#d35400;box-shadow:var(--shadow)}
.nav-links{display:flex;gap:8px;margin-left:auto}
.nav-links a{padding:8px 12px;border-radius:10px;color:var(--muted)}
.nav-links a.active{color:var(--text);background:#fff;box-shadow:var(--shadow)}
.card{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}
.section{padding:22px}
.center{text-align:center}
.btn{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:#111827;color:#fff;cursor:pointer}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}
.footer{margin:28px 0;color:var(--muted);font-size:14px;text-align:center}

/* Home */
.hero h1{margin:0 0 8px;font-size:28px}
.ver{color:var(--muted);font-size:14px}
.tabs{display:flex;gap:12px;overflow:auto;padding:10px 16px;border-top:1px solid var(--border);background:#fafafa;border-radius:12px;justify-content:center}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border:1px solid var(--border);border-radius:12px;color:#111827;cursor:pointer}

/* Tutorial common */
.title{font-size:28px;margin:6px 0 0}
.meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:16px}
.step{display:grid;grid-template-columns:1fr;gap:14px;padding:18px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.step h3{margin:0 0 6px}
.step p{margin:.3em 0;color:#374151}
.step .imgbox{width:100%;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fafafa;display:grid;place-items:center}
.step img{width:100%;height:auto;display:block}
@media(min-width:960px){
  .grid2{grid-template-columns:repeat(2,1fr)}
  .step{grid-template-columns:1fr 1fr;align-items:center}
}
.tip{background:#fef3c7;border:1px solid #fde68a;color:#92400e;padding:12px;border-radius:12px}
.warn{background:#fee2e2;border:1px solid #fecaca;color:#7f1d1d;padding:12px;border-radius:12px}

/* iOS screenshot blocks */
.block{border:1px solid var(--border);border-radius:16px;padding:14px;background:#fff;box-shadow:var(--shadow);margin:16px 0}
.block h3{margin:0 0 10px;font-size:18px}
.block .tip{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:10px;border-radius:10px;margin:10px 0}
.block .warn{background:#fee2e2;border:1px solid #fecaca;color:#7f1d1d;padding:10px;border-radius:10px;margin:10px 0}
.block .imgwrap{border:1px solid var(--border);border-radius:12px;background:#fafafa;display:grid;place-items:center;overflow:hidden}
.block img{width:100%;height:auto;display:block}
.urlbox{border:1px dashed #d1d5db;padding:10px;border-radius:10px;background:#f9fafb;word-break:break-all}
/* 样式控制二维码的显示 */
.qr-section {
  text-align: center;
  margin-top: 50px;
}

.qr-code img {
  width: 250px; /* 控制二维码的宽度 */
  height: 250px; /* 控制二维码的高度 */
  max-width: 100%; /* 限制二维码不超过容器的宽度 */
  max-height: 100%; /* 限制二维码不超过容器的高度 */
}

.qr-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}
/* 视频容器居中 */
.video-box {
  text-align: center;  /* 使容器内的内容居中 */
  margin-top: 30px;    /* 给视频顶部添加间距 */
}

/* 视频大小调整 */
.video-box video {
  width: 80%;  /* 设置视频宽度为页面宽度的 80% */
  max-width: 600px;  /* 设置最大宽度为 600px，确保不会过大 */
  height: auto;  /* 自动调整高度，保持视频比例 */
  margin: 0 auto; /* 确保视频在容器内水平居中 */
}

/* 视频标题样式 */
.video-box h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}
/* 按钮容器居中 */
.download-button-container {
  text-align: center;
  margin-top: 20px;
}

/* 按钮样式 */
.download-btn {
  display: inline-block;
  text-decoration: none;
  background-color: #f39c12; /* 黄色背景色 */
  border-radius: 5px; /* 圆角效果 */
  padding: 10px 20px;
  color: #fff; /* 白色文字 */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  transition: background-color 0.3s ease;
}

/* 悬停效果 */
.download-btn:hover {
  background-color: #e67e22; /* 悬停时改变背景色 */
  cursor: pointer;
}

/* 按钮内的图片 */
.download-btn img {
  width: 20px; /* 控制图片宽度 */
  vertical-align: middle; /* 使图标与文字垂直居中 */
  margin-right: 10px; /* 图片和文字之间的间隔 */
}

/* 按钮文字样式 */
.download-btn span {
  vertical-align: middle; /* 确保文字垂直居中 */
}
.contact-support {
    margin-top: 40px;
    text-align: center;
    color: #444;
    font-size: 16px;
}

.support-text {
    margin-bottom: 15px;
    font-weight: 500;
}

.qrcode-box {
    display: flex;
    justify-content: center;
}

.qrcode-img {
    width: 160px;      /* 调整二维码大小 */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}