:root{--bg:#0d1015;--panel:#151920;--panel2:#1b2028;--line:#303741;--text:#f0f2f5;--muted:#929ba8;--green:#4fd19b;--red:#ef6f78;--amber:#e6b45c}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0}
body{color:var(--text);background:var(--bg);font:13px -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0}
.app-shell{min-height:100vh;display:grid;grid-template-rows:58px 1fr}
.topbar{display:grid;grid-template-columns:220px 1fr 120px;align-items:center;gap:18px;padding:0 20px;border-bottom:1px solid var(--line);background:#11151a}
.brand{color:var(--text);text-decoration:none;font-size:17px;font-weight:700}
.engine-tabs{justify-self:center;display:flex;height:34px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.engine-tabs button{min-width:104px;padding:0 14px;border:0;border-right:1px solid var(--line);color:var(--muted);background:#171b21;cursor:pointer}
.engine-tabs button:last-child{border-right:0}
.engine-tabs button.is-active{color:#07140f;background:var(--green);font-weight:700}
button{font:inherit}
.primary{height:36px;border:0;border-radius:6px;color:#07140f;background:var(--green);font-weight:700;cursor:pointer}
.primary:disabled{opacity:.55;cursor:wait}
main{display:grid;grid-template-columns:minmax(280px,25vw) minmax(560px,1fr) 300px;min-height:0}
.source-pane,.editor-pane,.export-pane{min-width:0;padding:18px;border-right:1px solid var(--line)}
.export-pane{border-right:0}
.source-pane{display:grid;grid-template-rows:auto auto minmax(180px,34vh) auto auto auto;align-content:start;gap:14px;background:#11151a}
.editor-pane{background:var(--bg)}
.export-pane{background:#11151a}
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px}
.pane-head>div:first-child{min-width:0}
.pane-head h2{margin:0;font-size:14px}
.pane-head span{display:block;margin-top:4px;color:var(--muted);font-size:10px}
#sourceText{width:100%;min-height:112px;max-height:220px;resize:vertical;padding:12px;border:1px solid var(--line);border-radius:6px;outline:0;color:var(--text);background:var(--panel);font:14px/1.9 inherit}
#sourceText:focus{border-color:#66717e}
.account-status{display:grid;gap:9px;padding:11px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.account-status-head,.account-status-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.account-status-head b{font-size:12px}
.account-status-head span{color:var(--green);font-size:10px}
.account-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.account-status-grid>span{display:grid;gap:4px;padding:7px;border:1px solid #29313a;border-radius:5px;color:var(--muted);font-size:9px}
.account-status-grid strong{overflow-wrap:anywhere;color:var(--text);font-size:10px;font-variant-numeric:tabular-nums}
.account-status-foot{color:var(--muted);font-size:9px;line-height:1.4}
.account-status-foot a{flex:0 0 auto;color:var(--green);text-decoration:none}
.audio-picker{display:flex;align-items:center;justify-content:center;min-height:38px;border:1px dashed var(--line);border-radius:6px;color:var(--muted);background:var(--panel);cursor:pointer}
.audio-picker-primary{flex-direction:column;gap:8px;min-height:180px;padding:22px;text-align:center;border-color:#49645f;background:#161d22}
.audio-picker-primary b{color:var(--text);font-size:15px}
.audio-picker-primary span{color:#b5bdc7;font-size:11px}
.audio-picker-primary small{color:var(--muted);font-size:9px}
.audio-picker-primary.is-dragover{border-color:var(--green);background:#1d302b;box-shadow:inset 0 0 0 1px rgba(79,209,155,.25)}
.audio-picker-primary.has-file{border-style:solid;border-color:#496f68;background:#182822}
.audio-picker input{display:none}
.audio-picker[hidden]{display:none}
.source-text-label{display:grid;gap:6px;color:var(--muted);font-size:10px}
.source-text-label span{font-weight:600}
audio{width:100%;height:38px}
.status{min-height:38px;padding:10px 12px;border-left:3px solid var(--green);color:#b7c1cc;background:var(--panel);line-height:1.5}
.status.is-error{border-color:var(--red);color:#ffc3c7}
.toolbar{display:flex;gap:7px}
.toolbar button{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:5px;color:#c8ced6;background:var(--panel);cursor:pointer}
.calibration-panel{margin-top:14px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#101419}
.calibration-panel[hidden]{display:none}
.transport{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-height:48px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.transport button{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:5px;color:#c8ced6;background:#101419;cursor:pointer}
.transport #timelinePlayBtn{width:36px;padding:0;color:var(--green)}
.transport button.is-active{color:#07140f;background:var(--green)}
.transport>span{margin-left:4px;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.transport label{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--muted);font-size:10px}
.transport input{width:100px;accent-color:var(--green)}
.calibration-scroll{overflow-x:auto;overflow-y:hidden}
.calibration-content{position:relative;min-width:720px;height:188px;user-select:none}
.timeline-ruler{position:relative;height:28px;border-bottom:1px solid var(--line);background:#0d1117}
.timeline-ruler span{position:absolute;top:7px;transform:translateX(-1px);color:var(--muted);font-size:9px;font-variant-numeric:tabular-nums}
.timeline-ruler span::before{position:absolute;top:14px;left:0;width:1px;height:7px;background:#4a5461;content:""}
.subtitle-track{position:relative;height:66px;border-bottom:1px solid var(--line);background:#141922}
.cue-block{position:absolute;top:9px;height:46px;min-width:12px;overflow:hidden;border:1px solid #496f68;border-radius:4px;color:#dce8e5;background:#24443e;cursor:pointer}
.cue-block.is-selected{border-color:var(--green);background:#2c5a50;box-shadow:0 0 0 1px rgba(79,209,155,.25)}
.cue-block.is-playing{border-color:#f0d86c;box-shadow:inset 0 -3px 0 #f0d86c}
.cue-block>span{display:block;overflow:hidden;padding:8px 10px;text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:28px}
.cue-edge{position:absolute;z-index:2;top:0;width:8px;height:100%;padding:0;border:0;background:transparent;cursor:ew-resize}
.cue-edge::after{position:absolute;top:12px;width:2px;height:20px;background:rgba(255,255,255,.55);content:""}
.cue-edge-start{left:0}
.cue-edge-start::after{left:2px}
.cue-edge-end{right:0}
.cue-edge-end::after{right:2px}
.waveform-canvas{display:block;height:92px;background:#10151c}
.timeline-playhead{position:absolute;z-index:5;top:20px;bottom:0;width:1px;pointer-events:none;background:#f0d86c}
.timeline-playhead::before{position:absolute;top:0;left:-4px;width:9px;height:9px;clip-path:polygon(0 0,100% 0,50% 100%);background:#f0d86c;content:""}
.is-dragging-cue,.is-dragging-cue *{cursor:ew-resize!important}
.timing-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;padding:9px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.timing-tools>span{min-width:190px;margin-right:auto;color:var(--muted);font-size:10px}
.timing-tools label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:10px}
.timing-tools select,.timing-tools input{height:30px;border:1px solid var(--line);border-radius:5px;color:var(--text);background:#101419}
.timing-tools select{padding:0 7px}
.timing-tools input{width:68px;padding:0 7px}
.timing-tools button{height:30px;padding:0 10px;border:1px solid var(--line);border-radius:5px;color:var(--green);background:#101419;cursor:pointer}
.timeline{display:grid;gap:7px;margin-top:10px}
.line-row{display:grid;grid-template-columns:30px 84px minmax(200px,1fr) 46px 84px 30px 30px 30px;align-items:center;gap:7px;min-height:62px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.line-row:focus-within,.line-row.is-selected{border-color:#596675;background:var(--panel2)}
.line-row.is-selected{box-shadow:inset 3px 0 0 var(--green)}
.line-row.is-long{border-color:rgba(230,180,92,.75)}
.line-row button{width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:#11151a;cursor:pointer}
.line-row button:disabled{opacity:.25;cursor:not-allowed}
.line-row .play{color:var(--green)}
.line-row .remove{color:var(--red)}
.line-row textarea{width:100%;resize:vertical;min-height:40px;padding:7px 9px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);outline:0;color:var(--text);background:transparent;font:14px/1.55 inherit}
.line-row .time{display:grid;gap:3px}
.line-row .time input{width:100%;padding:4px;border:1px solid var(--line);border-radius:4px;color:#c6ccd4;background:#101419;font-size:10px}
.line-row .time span{color:var(--muted);font-size:9px;font-variant-numeric:tabular-nums}
.count{text-align:center;color:var(--muted);font-size:10px}
.is-long .count{color:var(--amber);font-weight:700}
.empty{display:grid;place-items:center;height:280px;border:1px dashed var(--line);color:var(--muted)}
.option-toggle{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px;border:1px solid var(--line);border-radius:6px;color:#c8ced6;background:var(--panel);cursor:pointer}
.option-toggle input{width:16px;height:16px;margin:0;accent-color:var(--green)}
.export-list{display:grid;gap:8px;margin-top:10px}
.export-list button{display:grid;grid-template-columns:54px 1fr;align-items:center;min-height:52px;padding:0 12px;border:1px solid var(--line);border-radius:6px;text-align:left;color:var(--text);background:var(--panel);cursor:pointer}
.export-list button:disabled{opacity:.38;cursor:not-allowed}
.export-list .download-all{border-color:rgba(79,209,155,.4);background:#183129}
.export-list .download-all b{color:#baf3dd}
.export-list b{color:var(--green)}
.export-list span{color:var(--muted);font-size:10px}
.timing-source{display:grid;gap:5px;margin-top:18px;padding:10px;border-left:3px solid var(--green);color:var(--muted);background:var(--panel);font-size:10px;line-height:1.5}
.timing-source b{color:var(--text);font-size:11px}
.dictionary{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.dictionary-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.dictionary-head h2{margin:0;font-size:13px}
.dictionary-head span{display:block;margin-top:5px;color:var(--muted);font-size:9px;line-height:1.4}
.dictionary-head strong{color:var(--muted);font-size:9px;white-space:nowrap}
.dictionary-actions{display:grid;grid-template-columns:1fr 1.25fr 1fr 1.15fr;gap:5px;margin-top:12px}
.dictionary-actions button{min-width:0;height:30px;padding:0 6px;border:1px solid var(--line);border-radius:5px;color:#c8ced6;background:var(--panel);cursor:pointer;font-size:9px;white-space:nowrap}
.dictionary-actions button:disabled{opacity:.35;cursor:not-allowed}
.dictionary-actions button.is-primary{border-color:rgba(79,209,155,.4);color:#07140f;background:var(--green);font-weight:700}
.dictionary-columns,.dictionary-row{display:grid;grid-template-columns:18px minmax(0,1fr) 18px minmax(0,1fr);align-items:center;gap:5px}
.dictionary-columns{margin-top:12px;padding:0 6px;color:var(--muted);font-size:9px}
.dictionary-rows{display:grid;gap:6px;max-height:310px;margin-top:6px;overflow:auto}
.dictionary-row{padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.dictionary-row input[type=checkbox]{width:14px;height:14px;margin:0;accent-color:var(--green)}
.dictionary-row input[type=text]{width:100%;min-width:0;height:34px;padding:0 7px;border:1px solid var(--line);border-radius:5px;outline:0;color:var(--text);background:#101419;font-size:11px}
.dictionary-row input[type=text]:focus{border-color:#66717e}
.dictionary-arrow{text-align:center;color:var(--muted);font-size:15px}
.rules{display:grid;gap:9px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}
.rules b{color:var(--text);font-size:11px}
@media(max-width:1050px){.topbar{grid-template-columns:1fr auto}
.engine-tabs{grid-column:1/-1;grid-row:2;margin-bottom:8px}
.app-shell{grid-template-rows:auto 1fr}
.topbar{min-height:96px;padding-top:10px}
main{grid-template-columns:300px minmax(500px,1fr)}
.export-pane{grid-column:1/-1;border-top:1px solid var(--line)}
.export-list{grid-template-columns:repeat(3,1fr)}
}
.line-break-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.line-break-options>label{display:flex;align-items:center;gap:7px;color:#c8ced6;font-size:10px}
.line-break-options select{height:30px;padding:0 8px;border:1px solid var(--line);border-radius:5px;color:var(--text);background:#101419}
.line-break-options>span{padding-right:4px;color:var(--muted);font-size:10px}
.compact-toggle{cursor:pointer}
.compact-toggle input{width:15px;height:15px;margin:0;accent-color:var(--green)}
.silence-threshold[hidden]{display:none}
.silence-threshold input{width:100px;accent-color:var(--green)}
.silence-threshold output{min-width:42px;color:var(--muted);font-variant-numeric:tabular-nums}
.line-break-options.is-manuscript .compact-toggle,.line-break-options.is-manuscript .silence-threshold{opacity:.4;pointer-events:none}
@media(max-width:760px){.topbar{grid-template-columns:1fr auto}
.engine-tabs{justify-self:stretch;overflow-x:auto}
.engine-tabs button{min-width:90px}
main{display:block}
.source-pane{min-height:520px}
.source-pane,.editor-pane,.export-pane{border-right:0;border-bottom:1px solid var(--line)}
.editor-pane{overflow-x:auto}
.timing-tools{min-width:680px}
.line-row{min-width:680px;grid-template-columns:30px 72px minmax(180px,1fr) 40px 72px 30px 30px 30px}
.export-list{grid-template-columns:1fr}
}
.topbar{grid-template-columns:220px minmax(420px,1fr) auto}
.topbar-brand,.topbar-actions{display:flex;align-items:center;gap:10px;min-width:0}
.api-link,.topbar-link{color:var(--green);text-decoration:none;font-size:11px;white-space:nowrap}
.topbar-actions{justify-content:flex-end}
.topbar-actions .primary{min-width:112px;padding:0 14px}
.topbar-link{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:6px;color:#c8ced6;background:#1b2028}
.topbar-link:hover{border-color:#56616d;color:var(--text)}
.topbar-link.wechat-login{border-color:rgba(79,209,155,.55);color:#07140f;background:var(--green);font-weight:700}
.topbar-link.recharge{border-color:rgba(230,180,92,.55);color:#251702;background:var(--amber);font-weight:700}
.user-chip{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:10px}
.account-status.is-guest{border-color:rgba(79,209,155,.36);background:linear-gradient(145deg,#17231f,#151920)}
.account-login-prompt{display:grid;gap:8px;padding:9px;border:1px solid rgba(79,209,155,.25);border-radius:6px;color:#b7c1cc;background:rgba(79,209,155,.07);font-size:10px;line-height:1.5}
.account-login-prompt[hidden]{display:none}
.account-login-prompt a{display:flex;align-items:center;justify-content:center;height:32px;border-radius:5px;color:#07140f;background:var(--green);text-decoration:none;font-weight:700}
.account-status-actions{display:flex;align-items:center;gap:9px}
.account-status-actions a{color:var(--green);text-decoration:none;white-space:nowrap}
.account-status-actions a[hidden]{display:none}
@media(max-width:1320px){
.user-chip{display:none}
.topbar{grid-template-columns:200px minmax(390px,1fr) auto}
.topbar-actions{gap:6px}
.topbar-actions .primary{min-width:98px}
.topbar-link{padding:0 8px}
}
@media(max-width:1050px){
.topbar{grid-template-columns:minmax(0,1fr) auto}
.topbar-brand{grid-column:1}
.topbar-actions{grid-column:2}
.engine-tabs{grid-column:1/-1;grid-row:2}
.user-chip{display:inline;max-width:100px}
}
@media(max-width:760px){
.topbar{grid-template-columns:1fr}
.topbar-brand,.topbar-actions{grid-column:1;justify-content:space-between}
.topbar-actions{grid-row:2;overflow-x:auto}
.engine-tabs{grid-row:3}
.user-chip{display:none}
.topbar-actions .primary{flex:1}
.topbar-link{flex:0 0 auto}
}