:root{
  --bg:#0e1116; --panel:#151a22; --panel2:#1c222c; --line:#262d3a;
  --tx:#eceff4; --tx2:#9aa3b5; --dim:#5d6678;
  --acc:#e6a23c; --orig:#c7d1e3; --tr:#ecc982; --spa:#9fb4d8; --spb:#e6a23c; --gold:#e6a23c;
  --red:#e05555;
  --r:14px;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI","Microsoft YaHei",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Songti SC","STSong",serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  background:
    radial-gradient(1000px 420px at 20% -8%, #1c253430, transparent 60%),
    radial-gradient(800px 360px at 108% 6%, #232c2230, transparent 55%),
    var(--bg);
  color:var(--tx);
  font:14.5px/1.68 var(--sans);
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
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:10px; padding:8px 10px; outline:none; width:100%}
textarea{resize:vertical; line-height:1.6; font-family:ui-monospace,Menlo,monospace; font-size:12.5px}
select:focus,input:focus,textarea:focus{border-color:var(--acc); box-shadow:0 0 0 3px #e6a23c1c}
input[type=range]{padding:0; border:none; background:transparent; accent-color:var(--acc)}
.chk{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--tx2)}
.chk input{width:auto; accent-color:var(--acc)}
.warn{color:var(--red); font-style:normal; font-size:11px}
.val{color:var(--tr); font-variant-numeric:tabular-nums; white-space:nowrap}
.hint{color:var(--tx2); font-size:12px; margin:3px 0 10px; line-height:1.6}
h3{margin:20px 0 8px; font-size:12px; color:var(--acc); letter-spacing:1.5px; font-weight:600}
.row2{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin-bottom:8px}
label{display:block; font-size:12px; color:var(--tx2); margin-bottom:6px}
label input,label select,label textarea{margin-top:4px}

/* ===== 顶栏：极简 ===== */
.topbar{display:flex; align-items:center; gap:16px; padding:14px 22px 10px}
.brand{display:flex; gap:10px; align-items:center; flex:none}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#e6a23c,#c9822a);
  display:grid;place-items:center; font-size:13px; color:#15100a; box-shadow:0 5px 16px #e6a23c2e}
h1{font-size:16px; letter-spacing:.3px; font-weight:650}
h1 em{font-style:normal; color:var(--acc); font-weight:600}
.sub{display:none}
.top-actions{margin-left:auto; display:flex; gap:6px; align-items:center}
.badge{font-size:11px; padding:3px 10px; border-radius:99px; background:var(--panel2); color:var(--tx2)}
.badge.mock{background:#3a2c1438; color:var(--gold); border:1px solid #6b512038}
.badge.ok{background:#1c332738; color:#7fd6a4; border:1px solid #2a5a4338}
.ghost{border:1px solid var(--line); border-radius:99px; padding:5px 13px; font-size:13px; color:var(--tx2)}
.ghost:hover{border-color:var(--acc); color:var(--tx)}
.ghost.sm{padding:4px 11px; font-size:12px}
.primary{border-radius:10px; padding:8px 16px; background:linear-gradient(135deg,#e6a23c,#c9822a); color:#15100a; font-weight:600}
.primary.sm{padding:6px 14px; font-size:13px}
.primary:hover{filter:brightness(1.06)}
.primary:disabled{opacity:.5; cursor:default}

main{flex:1; overflow-y:auto; padding:10px 24px 150px; max-width:860px; width:100%; margin:0 auto}

/* ===== 语言/模式控制：一条极简工具条 ===== */
.controls{display:flex; flex-wrap:wrap; gap:12px; align-items:center; background:transparent; border:none; padding:4px 0 8px; margin:0}
.seg{display:inline-flex; background:var(--panel2); border:1px solid var(--line); border-radius:99px; padding:2px; gap:2px}
.seg button{padding:5px 13px; border-radius:99px; font-size:12.5px; color:var(--tx2)}
.seg button.on{background:#2a2114; color:var(--acc); font-weight:600}
.dir-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.arrow{color:var(--acc); font-size:14px}
.dir-row label{min-width:0; margin:0; font-size:11.5px; color:var(--dim)}
.dir-row select{width:auto; padding:5px 10px; font-size:13px; border-radius:99px}
.chipbar{display:flex; gap:5px; flex-wrap:wrap; margin:0}
.chipbar button{border:1px solid var(--line); border-radius:99px; padding:4px 11px; font-size:12.5px; color:var(--tx2); background:var(--panel2)}
.chipbar button.on{background:#2a2114; border-color:var(--acc); color:var(--tr)}
.chipbar .del{color:var(--dim); padding:4px 5px; font-size:11px}
.sp-a{accent-color:var(--spa)} .sp-b{accent-color:var(--spb)}
.who label{min-width:auto}

/* ===== 实时主视觉：大字幕式 ===== */
.live-bar{position:relative; padding:26px 26px 22px; border:1px solid var(--line); border-radius:18px;
  background:linear-gradient(180deg,#181d27,#12151c); box-shadow:0 16px 60px #000a}
.live-bar::before{content:""; position:absolute; left:0; top:26px; bottom:26px; width:3px; border-radius:3px;
  background:linear-gradient(180deg,#e6a23c,#e05555); opacity:.85}
.live-now{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:1.5px; color:var(--tx2); text-transform:uppercase}
.rec-dot{width:8px;height:8px;border-radius:50%;background:#3a4048}
.recording .rec-dot{background:var(--red); box-shadow:0 0 0 0 #e0555533; animation:pulse 1.4s infinite}
.recording .live-now{color:var(--red)}
@keyframes pulse{0%{box-shadow:0 0 0 0 #e0555566}70%{box-shadow:0 0 0 7px #e0555500}100%{box-shadow:0 0 0 0 #e0555500}}
.live-text{font-family:var(--serif); font-size:26px; line-height:1.55; color:var(--orig); font-weight:500; min-height:40px; letter-spacing:.2px; margin-top:14px}
.live-preview{order:9; font-size:30px; font-weight:700; color:var(--tr); letter-spacing:.3px; line-height:1.55;
  margin-top:12px; animation:fadein .25s; word-break:break-word}
@keyframes fadein{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.live-text.idle{color:var(--dim)}
.meter{width:110px; height:5px; border-radius:99px; background:#1c222c; overflow:hidden; opacity:.6; margin-top:14px}
.meter-fill{height:100%; width:0%; background:linear-gradient(90deg,#7fd6a4,#e6a23c,#e05555); transition:width 80ms linear}

/* ===== 历史记录：极简字幕流 ===== */
.feedbar{display:flex; align-items:center; gap:8px; margin:14px 0 6px}
.fb-label{font-size:11px; color:var(--dim); letter-spacing:1px}
.fb-state{margin-left:auto; font-size:11px; color:var(--dim)}
.feed{display:flex; flex-direction:column; margin-top:2px}
.fcard{border:none; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:16px 2px 18px; overflow:visible}
.fcard.speaking{border-bottom-color:var(--acc)}
.fcard .fhead{display:flex; align-items:center; gap:9px; padding:0 0 8px; font-size:10.5px; color:var(--dim); border:none}
.fhead .spk{font-weight:600; color:var(--tx2); font-size:11.5px}
.fhead .tlang{color:var(--dim)}
.fhead .lat{margin-left:auto; font-variant-numeric:tabular-nums}
.fhead .mk{font-size:10px; padding:1px 8px; border-radius:99px; background:#3a2c1438; color:var(--gold); border:1px solid #6b512038}
.fbody{padding:0}
.row-orig{font-family:var(--serif); padding:0 0 6px; color:var(--orig); font-size:17px; line-height:1.65}
.row-tr{display:flex; gap:10px; align-items:flex-start; padding:0}
.row-tr .tchip{flex:none; font-size:10px; padding:2px 8px; border-radius:99px; margin-top:5px; background:#2a2414; color:var(--tr)}
.row-tr.sp-b .tchip{background:#3a2c14; color:var(--spb)}
.row-tr .trtext{flex:1; font-size:17px; color:var(--tr); line-height:1.7; white-space:pre-wrap; word-break:break-word; font-weight:500}
.row-tr .trtext.thinking{color:var(--dim)}
.row-tr .actions{flex:none; display:flex; gap:6px; opacity:0; transition:opacity .15s}
.fcard:hover .row-tr .actions, .row-tr.speaking .actions{opacity:1}
.mini{border:1px solid var(--line); border-radius:99px; padding:2px 9px; font-size:11px; color:var(--tx2)}
.mini:hover{border-color:var(--acc)}
.mini.playing{color:var(--acc); border-color:var(--acc); animation:pulse 1s infinite}
.row-tr.speaking .trtext{color:var(--tr)}
.live-cursor{color:var(--dim)}

/* empty */
.empty{text-align:center; padding:60px 0 20px; color:var(--dim)}
.empty-icon{font-size:40px; margin-bottom:10px; opacity:.5}
.dim2{color:var(--dim); font-size:12px}

/* ===== 底部 dock ===== */
.dock{position:fixed; left:0; right:0; bottom:0; padding:12px 24px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,#0e1116 42%); pointer-events:none}
.dock-inner{max-width:620px; margin:0 auto; display:flex; align-items:center; gap:18px;
  background:#161a22f2; border:1px solid var(--line); border-radius:18px; padding:10px 18px;
  box-shadow:0 16px 50px #000c; backdrop-filter:blur(12px); pointer-events:auto}
.mic{display:flex; align-items:center; gap:9px; background:linear-gradient(135deg,#e6a23c,#c9822a);
  color:#15100a; font-weight:700; padding:12px 30px; border-radius:99px; font-size:15px; box-shadow:0 10px 28px #e6a23c33}
.mic:hover{filter:brightness(1.06)}
.mic.live{background:linear-gradient(135deg,#e05555,#c04545); color:#fff; box-shadow:0 10px 28px #e0555533}
.mic:disabled{opacity:.45}
.mic-icon{font-size:16px}
.dock-stats{display:flex; gap:16px; margin-left:auto}
.stat{text-align:center; line-height:1.25}
.stat b{display:block; font-size:16px; color:var(--tx); font-variant-numeric:tabular-nums}
.stat span{font-size:10px; color:var(--dim)}
.dock-btns{display:flex; gap:6px}

/* drawer */
.drawer{position:fixed; inset:0; z-index:30; background:#00000088; backdrop-filter:blur(3px); display:flex; justify-content:flex-end}
.drawer-inner-hidden{display:none}
.drawer-head{display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line)}
.drawer-panel{background:#14171e; width:min(520px,100vw); height:100%; max-height:100vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:-24px 0 70px #000e}
.drawer-body{padding:6px 24px 44px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; min-height:0}
@media (max-width:560px){ .drawer-panel{width:100vw} .drawer-body{padding:6px 18px 60px} }
.adv{border:1px solid var(--line); border-radius:12px; padding:0 14px; margin:6px 0 14px; background:var(--panel2)}
.adv summary{list-style:none; cursor:pointer; font-size:13px; color:var(--tx2); padding:11px 0; user-select:none}
.adv summary::-webkit-details-marker{display:none}
.adv summary::before{content:'▸ '; color:var(--acc)}
.adv[open] summary::before{content:'▾ '}
.adv summary:hover{color:var(--tx)}
.adv-body{padding:2px 0 8px; border-top:1px solid var(--line)}

/* toast */
.toast{position:fixed; left:50%; bottom:112px; transform:translateX(-50%); z-index:60;
  background:#1a1e27; border:1px solid var(--line); color:var(--tx); padding:10px 18px; border-radius:12px;
  font-size:13px; box-shadow:0 10px 34px #000c; max-width:82vw; text-align:center}
.test-result{font-size:12px; color:var(--tx2); align-self:center}

[hidden]{display:none!important}
.dual{display:flex; flex-direction:column; gap:14px; padding:8px 2px; background:transparent; border:none; box-shadow:none}
.dual-pane{min-width:0}
.dual-label{font-size:11px; color:var(--dim); letter-spacing:2px; margin-bottom:6px}
.dual-body{max-height:260px; overflow-y:auto; scroll-behavior:smooth}
.dual-line{font-family:var(--serif); font-size:16px; line-height:1.7; color:var(--orig); margin:0 0 12px; white-space:pre-wrap; word-break:break-word}
.dual-line.zh{color:var(--tr); font-weight:600; font-size:16.5px; margin-bottom:22px}
body.style-dual #feed{display:none}
body.style-text .fcard{background:transparent; border:none; box-shadow:none; border-radius:0; padding:10px 2px; margin:0}
body.style-text .fcard .fhead{display:none}
body.style-text .fcard .row-orig{color:var(--orig); font-size:15px}
body.style-text .fcard .trtext{color:var(--tr); font-size:16px; font-weight:600}
body.style-text .row-tr{align-items:flex-start}
body.style-text .fbody{padding:0}
body.style-text #paraPanel{border:none; background:transparent; box-shadow:none; padding:2px}
body.style-text #paraPanel .para-head{display:none}
body.style-text .para-orig{font-size:15px; color:var(--orig)}
body.style-text .para-tr{font-size:16px}
body.style-bubble .fcard{background:linear-gradient(135deg,#1a1f29,#13161d); border:1px solid var(--line); border-radius:16px; border-left:3px solid var(--acc); margin:2px 0}
body.style-bubble .fcard .fhead{display:none}
body.style-bubble .fcard .row-orig{color:var(--orig); font-size:15px}
body.style-bubble .fcard .trtext{color:var(--tr); font-size:15.5px; font-weight:600}
.chipbar select{width:auto;font-size:12px;padding:5px 12px;border-radius:99px;color:var(--tx2)}
.para{border:1px solid #2a5a4338; background:linear-gradient(180deg,#1c231a18,#12151c); padding:14px 18px}
.para-head{display:flex; gap:12px; align-items:baseline; font-size:11px; color:var(--dim); margin-bottom:8px}
.para-lang{color:var(--tr); font-weight:600}
.para-stat{margin-left:auto; color:var(--dim)}
.para-orig{font-family:var(--serif); font-size:17px; color:var(--orig); line-height:1.75; white-space:pre-wrap; word-break:break-word; min-height:26px}
.para-tr{font-size:18px; font-weight:650; color:var(--tr); line-height:1.75; white-space:pre-wrap; word-break:break-word; margin-top:6px; min-height:26px; animation:fadein .2s}
.para-tr.thinking{color:var(--dim); font-weight:400}
.para.speaking{box-shadow:0 0 0 1px #ecc98244}
.para-card .trtext{font-size:15.5px}
.seg.sm button{padding:3px 11px; font-size:12px}

@media (max-width:720px){
  .dock-inner{flex-wrap:wrap; justify-content:center; gap:10px}
  .dock-stats{margin-left:0; order:3; width:100%; justify-content:center}
  .topbar{padding:12px 14px 4px}
  main{padding:8px 14px 190px}
  .meter{width:70px}
  .live-text{font-size:21px}
  .live-preview{font-size:24px}
}