:root{
  --orange:#E8651C;
  --orange-light:#F39C42;
  --dark:#3A3F4B;
  --text:#1F2937;
  --muted:#6B7280;
  --line:#D1D5DB;
  --bg:#F8F9FA;
  --ok:#1D9E75;
  --err:#A32D2D;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  color:var(--text);background:var(--bg);font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.topbar{
  display:flex;align-items:center;gap:14px;
  padding:14px 24px;background:#fff;border-bottom:2px solid var(--orange-light);
}
.logo{width:130px;height:auto;display:block}
.titles{flex:1;min-width:0}
.tb-title{font-size:15px;font-weight:700;color:var(--dark)}
.tb-sub{font-size:12px;color:var(--muted)}
.tb-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tb-status{font-size:12px;color:var(--muted);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line);flex:0 0 auto}
.dot-ok{background:var(--ok)}
.dot-wait{background:var(--orange-light)}
.dot-err{background:var(--err)}

main{max-width:760px;margin:0 auto;padding:24px 20px 60px;display:flex;flex-direction:column;gap:16px}

.card{background:#fff;border:1px solid var(--line);border-top:2px solid var(--orange);padding:20px 22px}
.card h1{font-size:18px;font-weight:700;color:var(--dark);margin-bottom:6px}
.card h2{
  font-size:15px;font-weight:700;color:var(--dark);margin-bottom:12px;
  display:flex;align-items:center;gap:9px;
}
.step{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--orange);
  color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.muted{color:var(--muted);font-size:12.5px}

.row{display:flex;gap:10px;margin-top:12px}
input[type=password]{
  flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);
  font-size:14px;font-family:inherit;color:var(--text);outline:none;
}
input[type=password]:focus{border-color:var(--orange)}

button{font-family:inherit;font-size:14px;cursor:pointer;border:none;padding:10px 20px}
button.primary{background:var(--orange);color:#fff;font-weight:700}
button.primary:hover:not(:disabled){background:#d25714}
button.primary:disabled{background:#E5E7EB;color:#9CA3AF;cursor:not-allowed}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--muted);padding:6px 12px;font-size:12.5px}
button.ghost:hover{border-color:var(--orange);color:var(--orange)}

.drop{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1.5px dashed var(--line);padding:30px 20px;cursor:pointer;
  background:#FCFCFC;transition:border-color .15s,background .15s;
}
.drop:hover{border-color:var(--orange);background:#FFF9F5}
.drop.has-file{border-style:solid;border-color:var(--orange);background:#FFF5EE}
.drop strong{font-size:14px;color:var(--dark);font-weight:700}

.langs{display:flex;gap:10px;flex-wrap:wrap}
.lang{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line);
  padding:9px 16px;cursor:pointer;background:#fff;
}
.lang:has(input:checked){border-color:var(--orange);background:#FFF5EE}
.lang input{accent-color:var(--orange)}
.lang span{font-size:13.5px}

.progress{height:4px;background:#EDEFF2;margin-top:14px;overflow:hidden}
.bar{height:100%;width:0;background:var(--orange);transition:width .3s}

.msg{font-size:12.5px;color:var(--muted);margin-top:10px;min-height:1.4em}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--err);font-weight:700}

.hidden{display:none !important}

/* ---------------------------- ① 预览清单 ---------------------------- */
.preview-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-bottom:9px;border-bottom:1px solid var(--line);
}
/* 提示文字占据剩余宽度，把「全选/全不选」推到最右，避免和统计挤在一起 */
.preview-head .muted{flex:1 1 auto;min-width:0}
.tag{
  flex:0 0 auto;background:var(--orange);color:#fff;
  font-size:12px;font-weight:700;padding:3px 10px;white-space:nowrap;
}
button.ghost.tiny{padding:4px 10px;font-size:12px;flex:0 0 auto}

.outline{list-style:none;margin-top:2px;max-height:340px;overflow:auto}
.outline li{padding:9px 2px;border-bottom:1px solid #EFF1F4}
.outline li:last-child{border-bottom:none}
.outline label.sec{display:flex;align-items:center;gap:9px;cursor:pointer}
.outline label.sec input{flex:0 0 auto;width:15px;height:15px;accent-color:var(--orange)}
/* 标题吃满剩余宽度 -> 「N 子节 / N 段」自然靠右，不再与标题粘连 */
.sec-title{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:700;color:var(--dark)}
.sec-count{flex:0 0 auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.subs{margin:4px 0 0 24px;font-size:12px;color:var(--muted);line-height:1.7}

/* ---------------------------- ②③ 表单行 ---------------------------- */
.field-row{display:flex;align-items:flex-start;gap:10px;margin-top:10px}
.field-row .fl{
  flex:0 0 84px;font-size:12.5px;color:var(--muted);
  padding-top:9px;text-align:right;line-height:1.4;
}
.field-row input,.field-row textarea,.field-row select{
  flex:1 1 auto;min-width:0;padding:8px 11px;border:1px solid var(--line);
  font-size:13.5px;font-family:inherit;color:var(--text);background:#fff;outline:none;
}
.field-row input:focus,.field-row textarea:focus,.field-row select:focus{border-color:var(--orange)}
.field-row textarea{resize:vertical;line-height:1.6}
.field-row select{flex:0 0 auto;max-width:320px;width:100%}
/* 单选框那一行下面留点间距再排「版式」 */
.langs + .field-row{margin-top:14px}

/* ---------------------------- ④ 结果区 ---------------------------- */
.result{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
}
.result .muted{flex:1 1 100%;font-size:12px;margin:2px 0 0}
a.as-link{display:inline-block;text-decoration:none;text-align:center;line-height:1.2;font-family:inherit}
a.primary.as-link{background:var(--orange);color:#fff;font-weight:700;padding:10px 20px;font-size:14px}
a.primary.as-link:hover{background:#d25714}
a.ghost.as-link{border:1px solid var(--line);color:var(--muted);padding:9px 14px;font-size:12.5px}
a.ghost.as-link:hover{border-color:var(--orange);color:var(--orange)}

@media (max-width:560px){
  .field-row{flex-direction:column;gap:5px}
  .field-row .fl{flex:none;text-align:left;padding-top:0}
  .field-row select{max-width:none}
  .sec-count{display:none}
}