:root{--color-primary: #4F46E5;--color-primary-light: #818CF8;--color-accent: #16A34A;--color-bg: #EEF2FF;--color-card: #FFFFFF;--color-foreground: #312E81;--color-muted: #EBEEF8;--color-muted-fg: #64748B;--color-border: #C7D2FE;--color-destructive: #DC2626;--color-video-bg: #0F172A;--font-heading: "PingFang SC", "Noto Serif CJK SC", "Source Han Serif SC", "Microsoft YaHei", "SimSun", serif;--font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--header-height: 56px;--control-bar-height: 48px;--subtitle-font-size: 15px;--subtitle-en-size: 15px;--subtitle-zh-size: 13px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-foreground);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}.header{height:var(--header-height);background:var(--color-card);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-xl);position:sticky;top:0;z-index:100}.header-left{display:flex;align-items:center;gap:var(--space-md)}.logo-mark{width:32px;height:32px;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:18px;font-weight:700;flex-shrink:0}.header-title{font-family:var(--font-heading);font-size:18px;font-weight:700;color:var(--color-foreground);white-space:nowrap}.header-nav{display:flex;gap:var(--space-lg)}.nav-link{font-size:14px;color:var(--color-muted-fg);text-decoration:none;transition:color .2s;cursor:pointer}.nav-link:hover,.nav-link.active{color:var(--color-foreground)}.main-content{flex:1;padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-lg);max-width:1200px;width:100%;margin:0 auto}.upload-section{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - var(--header-height) - 120px)}.upload-zone{background:var(--color-card);padding:var(--space-2xl) var(--space-xl);text-align:center;max-width:520px;width:100%;border:2px dashed var(--color-border);transition:border-color .3s,background .3s;cursor:pointer}.upload-zone.drag-over{border-color:var(--color-primary);background:var(--color-muted)}.upload-icon{margin-bottom:var(--space-lg)}.upload-title{font-family:var(--font-heading);font-size:24px;font-weight:700;margin-bottom:var(--space-sm)}.upload-desc{color:var(--color-muted-fg);margin-bottom:var(--space-xs)}.upload-desc-sub{color:var(--color-muted-fg);font-size:14px;margin-bottom:var(--space-lg)}.upload-hint{margin-top:var(--space-md);font-size:13px;color:var(--color-muted-fg)}.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;background:var(--color-primary);color:#fff;border:none;font-family:var(--font-body);font-size:15px;font-weight:700;cursor:pointer;transition:background .2s}.btn-primary:hover{background:#4338ca}.btn-primary:active{background:#3730a3}.video-section{display:flex;flex-direction:column;gap:var(--space-lg)}.video-player-wrapper{background:var(--color-card);overflow:hidden}.video-container{position:relative;background:var(--color-video-bg);aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center}.video-container video{width:100%;height:100%;object-fit:contain}.subtitle-overlay{position:absolute;bottom:48px;left:10%;right:10%;text-align:center;pointer-events:none;z-index:10}.subtitle-en-current{font-size:var(--subtitle-en-size);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);margin-bottom:var(--space-xs);line-height:1.5;min-height:24px}.subtitle-zh-current{font-size:var(--subtitle-zh-size);color:#ffffffd9;text-shadow:0 1px 4px rgba(0,0,0,.7);line-height:1.5;min-height:20px}.video-loading{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172ae6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);color:#fff;z-index:20}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:var(--color-primary-light);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.control-bar{height:var(--control-bar-height);background:var(--color-card);border-top:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-md)}.control-left,.control-right{display:flex;align-items:center;gap:var(--space-md)}.ctrl-btn{padding:6px 14px;border:1px solid var(--color-border);background:var(--color-card);color:var(--color-muted-fg);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap}.ctrl-btn:hover{border-color:var(--color-primary)}.ctrl-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.ctrl-group{display:flex;align-items:center;gap:var(--space-sm)}.ctrl-label{font-size:12px;color:var(--color-muted-fg);white-space:nowrap}.ctrl-select{padding:4px 8px;border:1px solid var(--color-border);background:var(--color-muted);color:var(--color-foreground);font-family:var(--font-body);font-size:13px;cursor:pointer;min-width:72px}.ctrl-select:focus{outline:2px solid var(--color-primary);outline-offset:-1px}.loop-icon{font-style:normal}.subtitle-panel{background:var(--color-card);overflow:hidden}.subtitle-panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border)}.subtitle-panel-title{font-family:var(--font-heading);font-size:16px;font-weight:700}.subtitle-font-controls{display:flex;gap:var(--space-sm)}.font-btn{padding:2px 8px;border:1px solid var(--color-border);background:var(--color-card);color:var(--color-muted-fg);font-family:var(--font-body);font-size:13px;cursor:pointer;transition:all .2s}.font-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.font-btn.active{border-color:var(--color-primary);color:var(--color-primary);font-weight:700}.subtitle-list{max-height:400px;overflow-y:auto}.subtitle-empty{padding:var(--space-2xl);text-align:center;color:var(--color-muted-fg)}.subtitle-empty .sub{font-size:13px;margin-top:var(--space-xs)}.subtitle-item{padding:12px var(--space-lg);border-bottom:1px solid var(--color-border);cursor:pointer;transition:background .15s;display:flex;gap:var(--space-md)}.subtitle-item:hover{background:var(--color-muted)}.subtitle-item.active{background:var(--color-muted);border-left:3px solid var(--color-primary)}.subtitle-item .st-time{font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--color-primary);min-width:52px;padding-top:2px;flex-shrink:0}.subtitle-item.active .st-time{color:var(--color-primary)}.subtitle-item .st-text{flex:1;min-width:0}.subtitle-item .st-en{font-size:var(--subtitle-en-size);color:var(--color-foreground);line-height:1.5}.subtitle-item .st-zh{font-size:var(--subtitle-zh-size);color:var(--color-muted-fg);line-height:1.5;margin-top:2px}.subtitle-mode-en .st-zh,.subtitle-mode-zh .st-en,.subtitle-mode-en .subtitle-zh-current,.subtitle-mode-zh .subtitle-en-current{display:none}.processing-section{display:flex;justify-content:center;align-items:center;min-height:300px}.processing-card{background:var(--color-card);padding:var(--space-2xl);text-align:center;max-width:480px;width:100%}.processing-icon{margin-bottom:var(--space-lg)}.processing-title{font-family:var(--font-heading);font-size:20px;font-weight:700;margin-bottom:var(--space-sm)}.processing-desc{color:var(--color-muted-fg);margin-bottom:var(--space-xl)}.processing-steps{display:flex;align-items:center;justify-content:center;gap:0}.step{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm);font-size:13px;color:var(--color-muted-fg)}.step-dot{width:12px;height:12px;border-radius:50%;background:var(--color-border);flex-shrink:0}.step-dot.active{background:var(--color-primary);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 #4f46e566}50%{box-shadow:0 0 0 8px #4f46e500}}.step-dot.done{background:var(--color-accent)}.step-connector{width:48px;height:2px;background:var(--color-border);margin:0 var(--space-sm);margin-bottom:20px}.error-section{display:flex;justify-content:center;align-items:center;min-height:300px}.error-card{background:var(--color-card);padding:var(--space-2xl);text-align:center;max-width:420px;width:100%}.error-icon{font-size:48px;margin-bottom:var(--space-md)}.error-title{font-family:var(--font-heading);font-size:20px;font-weight:700;margin-bottom:var(--space-sm)}.error-desc{color:var(--color-muted-fg);margin-bottom:var(--space-xl)}.footer{padding:var(--space-md) var(--space-xl);text-align:center;color:var(--color-muted-fg);font-size:13px;border-top:1px solid var(--color-border);background:var(--color-card);margin-top:auto}.hidden{display:none!important}@media (max-width: 768px){:root{--header-height: 48px;--control-bar-height: 44px;--subtitle-en-size: 14px;--subtitle-zh-size: 12px}.header{padding:0 var(--space-md)}.header-title{font-size:15px}.header-nav{gap:var(--space-md)}.nav-link{font-size:13px}.main-content{padding:var(--space-md);gap:var(--space-md)}.upload-zone{padding:var(--space-xl) var(--space-md)}.upload-title{font-size:20px}.control-bar{flex-direction:column;height:auto;padding:var(--space-sm) var(--space-md);gap:var(--space-sm)}.control-left,.control-right{width:100%;justify-content:center;flex-wrap:wrap;gap:var(--space-sm)}.ctrl-btn{font-size:12px;padding:5px 10px}.ctrl-select{font-size:12px;min-width:60px}.subtitle-list{max-height:280px}.subtitle-item{padding:10px var(--space-md)}.processing-steps{flex-direction:column;gap:var(--space-md)}.step-connector{width:2px;height:24px;margin:0}}@media (max-width: 480px){.header-nav{display:none}.upload-title{font-size:18px}.btn-primary{width:100%}}.subtitle-panel{position:relative}.subtitle-panel:before{content:"";position:absolute;top:-6px;left:0;right:0;height:12px;cursor:ns-resize;z-index:5}.subtitle-list::-webkit-scrollbar{width:6px}.subtitle-list::-webkit-scrollbar-track{background:var(--color-muted)}.subtitle-list::-webkit-scrollbar-thumb{background:var(--color-border)}.subtitle-list::-webkit-scrollbar-thumb:hover{background:var(--color-muted-fg)}