/* DocBridge · 文档翻译
   视觉沿用同站 LiveBridge 的设计语言（同一套色板与圆角），
   便于两个页面挂在同一域名下看起来是一个站。 */
:root{
  --bg:#0b1020; --panel:#131a30; --panel2:#0f1526; --line:#232c47;
  --tx:#e8ecf8; --tx2:#9aa5c4; --dim:#5c6888;
  --acc:#5b7cfa; --acc2:#22d3a7; --warn:#f0a35e;
  --red:#ff5d6c; --gold:#f5c451;
  --r:14px;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{min-height:100%}
body{
  background:
    radial-gradient(1200px 500px at 15% -10%, #1b2b5e55, transparent 60%),
    radial-gradient(900px 420px at 110% 10%, #123a3a44, transparent 55%),
    var(--bg);
  color:var(--tx);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
select,input,textarea{font:inherit; color:var(--tx); background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:7px 9px; outline:none; width:100%}
select:focus,input:focus{border-color:var(--acc)}
input[type=range]{padding:0; border:none; background:transparent; accent-color:var(--acc)}
a{color:var(--acc2)}
[hidden]{display:none !important}

/* ---------- 顶栏 ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 22px 8px; gap:12px; flex-wrap:wrap}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#5b7cfa,#22d3a7);
  display:grid;place-items:center; font-size:19px; box-shadow:0 6px 18px #5b7cfa44}
h1{font-size:19px; letter-spacing:.5px}
h1 em{font-style:normal; color:var(--acc2); font-weight:500}
.sub{font-size:11px; color:var(--dim); margin-top:-2px}
.top-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ghost{border:1px solid var(--line); border-radius:99px; padding:6px 13px; font-size:13px; color:var(--tx2); text-decoration:none}
.ghost:hover{border-color:var(--acc); color:var(--tx)}
.badge{font-size:11px; padding:3px 9px; border-radius:99px; background:#223; color:var(--tx2)}
.badge.ok{background:#0e3a2e55; color:var(--acc2); border:1px solid #1e5e4a55}
.badge.bad{background:#3a101055; color:var(--red); border:1px solid #5e1e1e55}

main{flex:1; padding:10px 22px 60px; max-width:1060px; width:100%; margin:0 auto}
.card{background:linear-gradient(180deg,#151d36,#121831); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin-bottom:14px}
.card h2{font-size:14px; letter-spacing:.5px; margin-bottom:4px}
.card h2 .step{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,#5b7cfa,#22d3a7); color:#fff; font-size:11px; margin-right:8px}
.hint{color:var(--tx2); font-size:12px; margin:2px 0 12px}
.muted{color:var(--dim)}
.warn{color:var(--warn)}
.err{color:var(--red)}
.val{color:var(--acc2); font-variant-numeric:tabular-nums}
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
label{display:block; font-size:12px; color:var(--tx2); margin-bottom:6px}
label input,label select{margin-top:4px}
.chk{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tx2); margin:10px 0}
.chk input{width:auto}

/* ---------- 上传区 ---------- */
.drop{border:1.5px dashed var(--line); border-radius:var(--r); padding:26px 18px; text-align:center;
  background:var(--panel2); transition:.15s; cursor:pointer}
.drop:hover{border-color:var(--acc)}
.drop.over{border-color:var(--acc2); background:#12253a}
.drop .big{font-size:26px; margin-bottom:6px}
.drop .name{color:var(--acc2); font-weight:600; word-break:break-all}
.fileinfo{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:11px; padding:10px 14px; background:var(--panel2)}
.fileinfo .nm{font-weight:600; word-break:break-all}

/* ---------- 分段控件 ---------- */
.seg{display:inline-flex; background:var(--panel2); border:1px solid var(--line); border-radius:99px; padding:3px; gap:2px; flex-wrap:wrap}
.seg button{padding:5px 14px; border-radius:99px; font-size:13px; color:var(--tx2)}
.seg button.on{background:linear-gradient(135deg,#5b7cfa,#3f55c9); color:#fff}
.seg button:disabled{opacity:.4; cursor:not-allowed}
.modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin-bottom:12px}
.mode{border:1px solid var(--line); border-radius:11px; padding:11px 13px; background:var(--panel2); text-align:left; cursor:pointer}
.mode:hover{border-color:var(--acc)}
.mode.on{border-color:var(--acc); background:#1a2246}
.mode .t{font-weight:600; font-size:13.5px}
.mode .n{font-size:11.5px; color:var(--tx2); margin-top:3px; line-height:1.5}
.mode:disabled{opacity:.42; cursor:not-allowed}
.dirrow{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.dirrow .arrow{color:var(--acc2); font-size:16px; padding-bottom:9px}
.dirrow label{min-width:150px; margin:0}

/* ---------- 参数 ---------- */
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:6px}
.opt{border:1px solid var(--line); border-radius:11px; padding:10px 12px; background:var(--panel2)}
.opt .t{font-size:12.5px; color:var(--tx2)}
.opt .range{display:flex; align-items:center; gap:10px}
.opt input[type=range]{flex:1}

/* ---------- 按钮 ---------- */
.primary{border-radius:10px; padding:10px 20px; background:linear-gradient(135deg,#5b7cfa,#4a5fd0);
  color:#fff; font-weight:600; font-size:14px}
.primary:hover{filter:brightness(1.1)}
.primary:disabled{opacity:.5; cursor:not-allowed}
.actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px}
.ghostlink{color:var(--tx2); font-size:12.5px; text-decoration:underline}

/* ---------- 进度 ---------- */
.pill{font-size:11.5px; padding:3px 11px; border-radius:99px; background:#223; color:var(--tx2)}
.pill.running{background:#152a4a; color:#9dc0ff; border:1px solid #2b4a80}
.pill.done{background:#0e3a2e55; color:var(--acc2); border:1px solid #1e5e4a55}
.pill.error{background:#3a101055; color:var(--red); border:1px solid #5e1e1e55}
.pill.queued{background:#3a320f55; color:var(--gold); border:1px solid #6b5a1e55}
.pill.canceled{background:#222; color:var(--dim)}
.bar{height:9px; border-radius:99px; background:#0d1327; border:1px solid var(--line); overflow:hidden; margin:10px 0 6px}
.bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,#5b7cfa,#22d3a7); transition:width .4s}
.bar.indet i{width:35%; animation:slide 1.2s infinite linear}
@keyframes slide{0%{margin-left:-35%}100%{margin-left:100%}}
.logs{margin-top:10px; max-height:190px; overflow-y:auto; background:#0a0f1e; border:1px solid var(--line);
  border-radius:10px; padding:9px 11px; font:12px/1.65 ui-monospace,Menlo,monospace; color:var(--tx2); white-space:pre-wrap}
.logs .w{color:var(--warn)} .logs .e{color:var(--red)}
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-top:12px}
.stat{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:9px 11px}
.stat .k{font-size:11px; color:var(--dim)}
.stat .v{font-size:15px; color:var(--acc2); font-variant-numeric:tabular-nums}

/* ---------- 预览 ---------- */
.previews{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
@media (max-width:760px){.previews{grid-template-columns:1fr}}
.pv{background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:9px}
.pv .hd{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--tx2); margin-bottom:8px; gap:6px}
.pv img{width:100%; border-radius:7px; background:#fff; min-height:150px; object-fit:contain; display:block}
.pv .pg{display:flex; align-items:center; gap:6px}
.pv .pg button{border:1px solid var(--line); border-radius:7px; padding:1px 8px; font-size:12px; color:var(--tx2)}
.pv .pg button:hover{border-color:var(--acc); color:var(--tx)}
.nopv{display:grid; place-items:center; min-height:170px; color:var(--dim); font-size:12.5px; text-align:center; padding:10px}

/* ---------- 历史 ---------- */
.hist{display:flex; flex-direction:column; gap:8px}
.hitem{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; background:var(--panel2); font-size:12.5px}
.hitem .nm{word-break:break-all}
details.adv{margin-top:10px}
details.adv summary{cursor:pointer; color:var(--tx2); font-size:12.5px}
details.adv .body{margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); background:#1b2340;
  border:1px solid var(--line); border-radius:11px; padding:10px 18px; font-size:13px; box-shadow:0 10px 30px #0008; z-index:9}