:root{font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.5;font-weight:400;color:#1f2430;background-color:#f5f7fc;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f5f7fc}#root{max-width:1200px;margin:0 auto;padding:2.5rem 1.5rem 3rem}button,input,select{font:inherit}.app{display:flex;flex-direction:column;gap:1rem;min-height:100vh}.app-header{display:flex;justify-content:space-between;align-items:center;gap:1.5rem}.app-header h1{margin:0;font-size:1.75rem}.app-header p{margin:.25rem 0 0;color:#5a5a5a}.error-banner{padding:.75rem 1rem;border-radius:.5rem;background:#feeaea;color:#8a1f1f}.layout{display:flex;flex:1;gap:1.5rem;min-height:0}.stage-area{flex:3;display:flex;flex-direction:column;gap:1rem}.stage-placeholder{flex:1;display:grid;place-items:center;border:2px dashed #b0b0b0;border-radius:.75rem;color:#555;min-height:320px}.upload-area{border:2px dashed #c4c4c4;padding:1.25rem;border-radius:.75rem;text-align:center;cursor:pointer;transition:border .2s ease,background-color .2s ease}.upload-area.dragging{border-color:#377cfb;background:#f2f6ff}.upload-area.disabled{opacity:.6;cursor:not-allowed}.upload-content{display:flex;flex-direction:column;align-items:center;gap:.5rem;font-weight:500}.upload-icon{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:#edf1ff;color:#2748a2;font-weight:600}.selection-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;align-items:center;background:#f8f9fb;padding:.75rem 1rem;border-radius:.75rem;border:1px solid #e0e5ef}.selection-toolbar button{padding:.5rem .75rem;border:1px solid #c9d3eb;background:#fff;border-radius:.5rem;cursor:pointer}.selection-toolbar button:disabled{opacity:.6;cursor:default}.selection-info{font-weight:600}.toolbar-actions{display:flex;gap:.5rem;flex-wrap:wrap}.overlay-toggles{display:flex;gap:.75rem;flex-wrap:wrap}.overlay-toggles label{display:flex;align-items:center;gap:.35rem;font-size:.9rem}.interval-control{display:flex;align-items:center;gap:.5rem;font-weight:600}.interval-control select{padding:.4rem .6rem;border-radius:.5rem;border:1px solid #c9d3eb}.image-stage{position:relative;flex:1;border-radius:.75rem;overflow:hidden;border:1px solid #d7deeb;background:#111;min-height:360px}.image-stage-canvas{position:relative;width:100%;height:100%}.image-stage-canvas img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.overlay{position:absolute;inset:0;pointer-events:auto}.word-group text{fill:#fff;font-size:.75rem;pointer-events:none}.word-group.selected rect{filter:drop-shadow(0 0 6px rgba(255,107,0,.45))}.word-text{fill:#fff;pointer-events:none;font-weight:600}.word-label{fill:#e0e6ff;pointer-events:none}.selection-rect{fill:#377cfb26;stroke:#377cfb;stroke-width:2;stroke-dasharray:6}.player-controls{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid #e0e5ef;border-radius:.75rem;background:#fff}.player-controls .controls{display:flex;gap:.5rem}.player-controls button{padding:.45rem .9rem;border-radius:.5rem;border:1px solid #b5c4df;background:#f4f7ff}.player-controls .timeline{display:flex;align-items:center;gap:.5rem;flex:1}.player-controls input[type=range]{flex:1}.sidebar{flex:1.5;display:flex;flex-direction:column;gap:1rem}.language-picker{display:flex;gap:.75rem}.language-picker label{flex:1;display:flex;flex-direction:column;gap:.35rem;font-weight:600}.language-picker select{padding:.5rem;border-radius:.5rem;border:1px solid #c9d3eb}.word-list{flex:1;display:flex;flex-direction:column;border:1px solid #d7deeb;border-radius:.75rem;overflow:hidden;background:#fff}.word-list-header{padding:.75rem 1rem;border-bottom:1px solid #e0e5ef;display:flex;justify-content:space-between;align-items:center;font-weight:600;background:#f8f9fb}.word-items{flex:1;overflow-y:auto}.word-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;border-bottom:1px solid #eef1f8;gap:.5rem}.word-item:last-of-type{border-bottom:none}.word-item.active{background:#f0f4ff}.word-select{flex:1;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:.75rem;border:none;background:transparent;text-align:left;cursor:pointer;padding:0}.word-select:focus{outline:2px solid #377cfb}.word-order{font-weight:600}.word-conf{font-size:.85rem;color:#5a5a5a}.word-download{border:1px solid #c9d3eb;background:#fff;border-radius:.5rem;padding:.35rem .75rem;cursor:pointer}.word-download:hover,.selection-toolbar button:hover,.player-controls button:hover{background:#e6edff}@media (max-width: 1024px){.layout{flex-direction:column}.sidebar{flex:none}}.ocr-progress{margin:16px 0;padding:12px;background-color:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-indicator{height:100%;background-color:#0078d7;width:100%;animation:progress-pulse 1.5s ease-in-out infinite}@keyframes progress-pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.progress-text{font-size:14px;color:#666;text-align:center}.ocr-result-info{display:flex;align-items:center;gap:16px;margin:12px 0;padding:8px 12px;background-color:#f0f7ff;border-radius:6px;border:1px solid #d0e3ff;font-size:13px;flex-wrap:wrap}.result-method,.result-time,.result-confidence{color:#666}.result-method{font-weight:600}.export-button{margin-left:auto;padding:4px 12px;background-color:#0078d7;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:background-color .2s ease}.export-button:hover{background-color:#005a9e}.ocr-settings{margin:16px 0;padding:16px;background-color:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0}.image-container{position:relative;margin:16px 0}.editable-text-overlay{position:absolute;top:0;left:0;z-index:10}.editable-word-group{transition:all .2s ease}.editable-word-group:hover .word-box{opacity:.8}.word-input{outline:none;box-shadow:0 2px 4px #0003}.word-input:focus{box-shadow:0 0 0 2px #0078d7,0 2px 4px #0003}.editing-controls{display:flex;justify-content:center;margin:16px 0}.edit-toggle{padding:8px 16px;background-color:#f8f9fa;border:2px solid #0078d7;border-radius:6px;color:#0078d7;font-weight:600;cursor:pointer;transition:all .2s ease}.edit-toggle:hover{background-color:#e6f3ff}.edit-toggle.active{background-color:#0078d7;color:#fff}.edit-toggle.active:hover{background-color:#005a9e}@media (max-width: 768px){.ocr-result-info{flex-direction:column;align-items:flex-start;gap:8px}.export-button{margin-left:0;align-self:flex-end}.editing-controls{margin:12px 0}.edit-toggle{padding:6px 12px;font-size:14px}}.editable-word-group.editing{z-index:100}.word-box.editable{border-style:dashed;animation:editable-pulse 2s ease-in-out infinite}@keyframes editable-pulse{0%{border-color:#0078d7}50%{border-color:#005a9e}to{border-color:#0078d7}}.ocr-progress.loading .progress-indicator{background:linear-gradient(90deg,#0078d7,#40e0d0,#0078d7);background-size:200% 100%;animation:progress-loading 1.5s linear infinite}@keyframes progress-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.ocr-progress.error{background-color:#fff5f5;border-color:#fed7d7}.ocr-progress.error .progress-text{color:#c53030}.ocr-result-info.high-confidence{background-color:#f0fff4;border-color:#9ae6b4}.ocr-result-info.medium-confidence{background-color:#fffbf0;border-color:#fbd38d}.ocr-result-info.low-confidence{background-color:#fff5f5;border-color:#fed7d7}