/* ===========================================================
   第4步·手动调整布局和样式（照哥飞教程逐项落实）
   ① Logo   ② 菜单栏   ③ 页头   ④ 按钮   ⑤ footer
   =========================================================== */

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#f4f4f8;
  color:#333;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- ③ 页头：白底、全宽、左对齐 ---------- */
header{
  width:100%;
  background:#fff;
  border-bottom:1px solid #e6e8ec;
  padding:14px 0 12px;
  overflow:hidden;
}
header nav{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

/* ---------- ① Logo：黑底白字圆角 ---------- */
.logo{
  font-size:22px;
  font-weight:700;
  line-height:34px;
  height:34px;
  background:#000;
  padding:0 10px;
  border-radius:6px;
  margin:0;
  flex-shrink:0;
}
.logo a{
  color:#fff;
  text-decoration:none;
}

/* ---------- ② 菜单栏：背景色 + 圆角 + curr 标识当前页 ---------- */
.lang-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.lang-list a{
  display:block;
  height:30px;
  line-height:30px;
  padding:0 11px;
  background:#e9ecf1;
  border-radius:5px;
  color:#333;
  text-decoration:none;
  font-size:13.5px;
  font-weight:500;
  transition:background-color .3s;
}
.lang-list a.curr{
  background:#1b4dff;
  color:#fff;
  font-weight:700;
}
.lang-list a:hover{
  background:#d6dae1;
}
.lang-list a.curr:hover{
  background:#1b4dff;
}

/* ---------- 主体 ---------- */
main{
  max-width:1000px;
  margin:0 auto;
  padding:34px 20px 50px;
}

.intro{text-align:center;padding:0 0 26px;}
h1{
  font-size:34px;
  letter-spacing:-.02em;
  line-height:1.2;
  font-weight:750;
  margin-bottom:12px;
}
.tagline{color:#5c6670;font-size:16px;}

.note{
  background:#eef2ff;
  border:1px solid #dbe4ff;
  border-radius:10px;
  padding:16px 20px;
  margin:0 0 26px;
  font-size:14.5px;
  color:#2a3a66;
}
.note b{color:#0f35c4;}

.card{
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:10px;
  padding:22px 24px;
  margin-bottom:14px;
}
.card h2{
  font-size:19px;
  letter-spacing:-.01em;
  margin-bottom:7px;
  font-weight:680;
}
.card p{
  color:#5c6670;
  font-size:15px;
  margin-bottom:14px;
}

/* ---------- ④ 按钮：白底 + 边框，不用整页实心色块 ---------- */
.btn{
  display:inline-block;
  color:#1b4dff;
  border:1px solid #1b4dff;
  background:#fff;
  text-decoration:none;
  padding:9px 18px;
  border-radius:5px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .3s,color .3s;
}
.btn:hover{
  background:#1b4dff;
  color:#fff;
}

/* 主 CTA 保持实心：这是转化按钮，全页只有一两个 */
.btn-solid{
  display:block;
  width:100%;
  text-align:center;
  background:#1b4dff;
  color:#fff;
  border:1px solid #1b4dff;
  text-decoration:none;
  padding:14px 20px;
  border-radius:7px;
  font-size:16px;
  font-weight:650;
  transition:background-color .2s;
}
.btn-solid:hover{background:#0f35c4;border-color:#0f35c4;}

/* ---------- 子页正文 ---------- */
article{max-width:780px;margin:0 auto;padding:38px 20px 20px;}
article .lede{font-size:18px;color:#404a55;margin-bottom:24px;}
article h1{font-size:30px;text-align:left;margin-bottom:14px;}
article h2{font-size:19px;margin:26px 0 10px;font-weight:680;}
article h3{font-size:16px;margin:18px 0 5px;font-weight:650;}
article p{color:#39424c;font-size:16px;margin-bottom:14px;}
article ul{margin:0 0 16px 22px;}
article li{color:#39424c;font-size:16px;margin-bottom:7px;}

.cta-box{
  background:#fff;
  border:1.5px solid #1b4dff;
  border-radius:10px;
  padding:24px;
  margin:28px 0;
}
.cta-box small{
  display:block;
  text-align:center;
  color:#7a8590;
  font-size:13px;
  margin-top:11px;
}

.back-link{
  display:inline-block;
  color:#1b4dff;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
}

/* ---------- ⑤ footer ---------- */
footer{
  width:100%;
  background:#fff;
  border-top:1px solid #e6e8ec;
  padding:24px 20px;
  text-align:center;
  color:#7a8590;
  font-size:13.5px;
}
footer a{color:#5c6670;text-decoration:none;}

@media(max-width:600px){
  h1{font-size:26px;}
  article h1{font-size:24px;}
  .logo{font-size:18px;height:30px;line-height:30px;}
  .card{padding:18px;}
}

/* ===========================================================
   第5步·内页功能模块（SRT 检查器）
   =========================================================== */
.tool-lead{
  font-size:15px;color:#5c6670;margin:0 0 16px;
}
#dropzone{
  background:#fff;border:2px dashed #c9cfd8;border-radius:10px;
  padding:30px 22px;text-align:center;cursor:pointer;
  transition:border-color .2s,background .2s;
}
#dropzone:hover{border-color:#1b4dff;background:#fbfcff;}
#dropzone.over{border-color:#1b4dff;background:#eef2ff;}
#dropzone.done{border-style:solid;border-color:#1b4dff;}
.dz-icon{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;
  background:#000;color:#fff;border-radius:5px;padding:3px 9px;margin-bottom:12px;
}
.dz-title{font-size:17px;font-weight:650;margin-bottom:5px;color:#1b1f24;}
.dz-sub{font-size:13.5px;color:#7a8590;margin:0;}
.dz-file{font-size:13.5px;color:#1b4dff;font-weight:600;margin:12px 0 0;word-break:break-all;}

.statgrid{display:flex;gap:10px;margin:20px 0 16px;flex-wrap:wrap;}
.stat{
  flex:1 1 120px;background:#fff;border:1px solid #e6e8ec;border-radius:8px;
  padding:14px 16px;
}
.stat b{display:block;font-size:24px;font-weight:750;letter-spacing:-.02em;line-height:1.2;}
.stat span{font-size:12.5px;color:#7a8590;}
.stat.bad b{color:#c0392b;}

table.issues{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid #e6e8ec;border-radius:8px;overflow:hidden;font-size:13.5px;
}
table.issues th{
  text-align:left;background:#f4f5f8;color:#5c6670;font-weight:600;
  padding:9px 12px;font-size:12.5px;border-bottom:1px solid #e6e8ec;
}
table.issues td{
  padding:9px 12px;border-bottom:1px solid #eef0f3;color:#39424c;vertical-align:top;
}
table.issues tr:last-child td{border-bottom:0;}
table.issues td:nth-child(1){color:#7a8590;white-space:nowrap;}
table.issues td:nth-child(3),table.issues td:nth-child(4){white-space:nowrap;font-variant-numeric:tabular-nums;}
table.issues td.ok{color:#1e7d43;}

.limit{font-size:13.5px;color:#7a8590;margin:12px 0 0;}
.loading,.err{font-size:14px;color:#7a8590;padding:12px 0;}
.err{color:#c0392b;}
.err code{background:#f4f5f8;padding:1px 5px;border-radius:4px;font-size:12.5px;}

#download{margin-top:16px;}

.cta-alt{
  font-size:13px;color:#7a8590;margin:14px 0 0;text-align:center;line-height:1.55;
}
.cta-alt b{color:#39424c;word-break:break-all;}

/* 第6步·语言切换（原站语言 / 译文语言） */
.lang-switch{
  margin-left:auto;
  font-size:13px;
  white-space:nowrap;
  align-self:center;
}
.lang-switch a{
  color:#8a919a;
  text-decoration:none;
  margin-left:12px;
  font-weight:500;
}
.lang-switch a.curr{color:#333;font-weight:700;}
.lang-switch a:hover{color:#1b4dff;}