body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0f1117;--surface: #12151b;--card: #161a23;--border: rgba(255,255,255,.08);--shadow: rgba(0,0,0,.45);--text: #e6e6ea;--text-dim: #c7cbe0;--text-muted: #9aa2b1;--accent-1: #6b7cff;--accent-2: #8a56ff;--success: #4caf50;--danger: #ff6b6b}html,body,#root{min-height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg);color:var(--text);color-scheme:dark}.App{min-height:100vh;display:flex;flex-direction:column}.App-header{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 1px 3px var(--shadow);padding:1rem 2rem}.header-content{max-width:1600px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.header-title h1{font-size:1.75rem;color:#f4f6ff;margin-bottom:.25rem}.header-title p{font-size:.95rem;color:var(--text-muted)}.header-actions{display:flex;gap:1rem;flex-wrap:wrap}.header-btn{padding:.625rem 1.25rem;background:#151922;border:1px solid var(--border);border-radius:8px;color:#d7dbec;cursor:pointer;transition:transform .15s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;font-size:.95rem;font-weight:500;display:flex;align-items:center;gap:.5rem}.header-btn:hover{background:#1a2030;border-color:#ffffff24}.header-btn:active{transform:translateY(0)}.header-btn.primary{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));border:none;color:#fff}.header-btn.primary:hover{background:linear-gradient(135deg,#5c6cf0,#7b48f0);box-shadow:0 6px 20px #7a60ff59;transform:translateY(-1px)}.App-main{flex:1;padding:2rem;max-width:1600px;margin:0 auto;width:100%;display:flex;justify-content:center}.main-content{width:100%;height:100%}.workspace{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;height:calc(100dvh - 160px);min-height:600px;max-width:1400px;margin:0 auto}.panel{background:var(--card);border-radius:12px;box-shadow:0 8px 24px var(--shadow);display:flex;flex-direction:column;overflow:hidden}.panel-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.panel-header h2{font-size:1.25rem;color:#eef2ff;font-weight:600}.language-badge{padding:.375rem .75rem;background:#ffffff0f;border:1px solid var(--border);border-radius:6px;font-size:.85rem;color:var(--text-dim);font-weight:500}.language-badge.primary{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));border:none;color:#fff}.panel-content{flex:1;padding:0;overflow:hidden;display:flex;align-items:stretch;justify-content:stretch}.left-panel.panel--staging .panel-content{justify-content:center;align-items:flex-start;overflow-y:auto;padding:1rem}.uploader-stack{width:min(520px,100%);display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem;margin:0 auto;position:relative}.uploader-stack .upload-container,.uploader-stack .language-selector,.uploader-stack .dropzone{width:100%}.uploader-actions{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:.5rem;position:sticky;top:0;z-index:2;padding:.5rem;background:linear-gradient(180deg,#161a23fa,#161a23eb);border-bottom:1px solid var(--border);border-radius:8px;order:-999;align-self:stretch}.image-preview-container{display:grid;grid-template-rows:minmax(0,1fr) auto;width:100%;height:100%;gap:12px;padding:0;align-items:center;justify-items:center;min-height:0}.preview-img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;display:block;border-radius:12px}.extracted-text{width:100%;background:#131822;border-radius:8px;padding:1.25rem;border:1px solid var(--border);max-height:28vh;overflow:auto}.extracted-text h3{font-size:.875rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-weight:600}.extracted-text p{color:var(--text);line-height:1.6;white-space:pre-wrap;font-size:.95rem}.empty-panel{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem;color:var(--text-muted)}.empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.empty-panel.processing .empty-icon{opacity:1;animation:spin 2s linear infinite}.empty-panel.error{background:#2a1416;border-radius:8px}.empty-panel.error .empty-icon{color:var(--danger);opacity:1}.empty-panel.error p{color:#ff8a8a}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinning{animation:spin 2s linear infinite}.status-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px}.status-line{width:2px;flex:1;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.14),transparent)}.status-container{background:#151a24;border-radius:10px;padding:1rem;box-shadow:0 2px 8px var(--shadow);margin:1rem 0}.status-header{display:flex;flex-direction:column;align-items:center;gap:.5rem}.status-indicator{width:10px;height:10px;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 8px #0000}to{box-shadow:0 0 #0000}}.status-text{font-size:.85rem;font-weight:500;color:var(--text-dim);text-align:center}.progress-bar{height:4px;background:#ffffff14;border-radius:2px;overflow:hidden;margin-top:.5rem;width:80px}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent-1),var(--accent-2));animation:progress 1.5s ease-in-out infinite}@keyframes progress{0%{transform:translate(-100%)}to{transform:translate(200%)}}.upload-container{width:100%;max-width:520px}.language-selector{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.language-selector label{font-weight:500;color:var(--text-dim);font-size:.9rem}.language-selector select{padding:.625rem;border:1px solid var(--border);border-radius:6px;font-size:.95rem;background:#141923;color:var(--text);transition:border-color .2s ease,box-shadow .2s ease;cursor:pointer}.language-selector select:hover{border-color:#fff3}.language-selector select:focus{outline:none;border-color:var(--accent-1);box-shadow:0 0 0 3px #6b7cff40}.dropzone{border:2px dashed rgba(255,255,255,.18);border-radius:8px;padding:2rem;text-align:center;cursor:pointer;transition:all .2s;background:#121722;min-height:300px;display:flex;align-items:center;justify-content:center}.dropzone:hover{border-color:var(--accent-1);background:#101628}.dropzone.active{border-color:var(--accent-1);background:#0e1430}.dropzone.disabled{opacity:.5;cursor:not-allowed}.dropzone-content p{color:var(--text-dim);font-size:.95rem;margin-bottom:.5rem}.file-types{font-size:.85rem;color:var(--text-muted)}.preview-image{max-width:100%;max-height:420px;border-radius:6px;box-shadow:0 2px 8px var(--shadow)}.uploader-actions{display:flex;justify-content:center;align-items:center;gap:.75rem}.image-preview-container{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1rem;padding:1rem;width:100%;height:100%;align-items:center;justify-items:center}.preview-img{width:100%;height:100%;object-fit:contain;max-height:min(70vh,820px)}.panel-content{min-height:0}.error-toast{position:fixed;bottom:2rem;right:2rem;background:var(--card);border-left:4px solid var(--danger);padding:1rem 1.5rem;border-radius:8px;box-shadow:0 8px 24px var(--shadow);display:flex;align-items:center;gap:1rem;animation:slideIn .3s ease-out;z-index:1000}.error-toast span{color:#ff8a8a;font-weight:500}.error-toast button{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.25rem;padding:0;line-height:1}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.history-container{background:var(--card);border-radius:12px;padding:2rem;box-shadow:0 2px 8px var(--shadow)}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.history-header h2{color:#eef2ff;font-size:1.5rem}.refresh-btn{padding:.5rem 1rem;background:var(--accent-1);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:transform .15s ease,background .2s ease}.refresh-btn:hover{background:#5a6fd8;transform:translateY(-1px)}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.history-card{background:#151923;border:1px solid var(--border);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.history-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px var(--shadow)}.history-card-image{position:relative;height:180px;overflow:hidden;background:#0f141f}.history-card-image img{width:100%;height:100%;object-fit:cover}.generated-overlay{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s}.history-card:hover .generated-overlay{opacity:1}.history-card-content{padding:1rem}.history-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.translation-id{font-weight:600;color:#a4abc3;font-size:.9rem}.status-badge{padding:.25rem .625rem;border-radius:4px;color:#fff;font-size:.7rem;text-transform:uppercase;font-weight:600}.target-language{color:var(--accent-1);font-weight:500;margin-bottom:.25rem;font-size:.9rem}.date{color:#7f869b;font-size:.8rem}.text-preview{margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border)}.original-text{color:#d7dbea;font-size:.85rem;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.error-text{color:#ff8a8a;font-size:.8rem;margin-top:.5rem}.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}.panel-actions{display:flex;align-items:center;gap:.5rem}.panel-download{padding:.4rem .75rem;font-size:.85rem}.preview-clickable{cursor:zoom-in}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:#ffffff38;border-radius:8px}*::-webkit-scrollbar-thumb:hover{background:#ffffff59}@media (max-width: 1200px){.workspace{grid-template-columns:1fr;grid-template-rows:1fr auto 1fr;height:auto}.status-divider{flex-direction:row;width:100%;height:auto;margin:1rem 0}.status-line{height:2px;width:auto}.panel{min-height:400px}}@media (max-width: 768px){.App-header{padding:1rem}.header-content{flex-direction:column;gap:1rem;align-items:flex-start}.header-actions{width:100%;justify-content:space-between}.App-main{padding:1rem}.history-grid{grid-template-columns:1fr}.error-toast{left:1rem;right:1rem;bottom:1rem}}