@import "https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,700;1,400&display=swap";:root{--bg:#faf8f4;--surface:#fff;--surface2:#f4f1eb;--border:#e0d9ce;--accent:#c4622d;--accent-light:#f9ede6;--text:#1a1410;--text-muted:#7a6f65;--text-subtle:#b5aca0;--success:#2d7a4a;--success-bg:#e8f5ee;--error:#991b1b;--error-bg:#fef2f2;--radius:12px;--shadow:0 2px 16px #3c281414;--input-bg:#fcfbf9;--input-border:#d4c8b5;--warn:#92400e;--warn-bg:#fffbeb;--warn-border:#fde68a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:Sarabun,sans-serif;font-size:16px;line-height:1.7}header{background:var(--surface);border-bottom:1px solid var(--border);z-index:100;align-items:center;gap:1rem;height:60px;padding:0 2rem;display:flex;position:sticky;top:0}.logo-mark{align-items:center;gap:.5rem;display:flex}.logo-badge{background:var(--accent);color:#fff;letter-spacing:.08em;border-radius:4px;padding:3px 8px;font-size:11px;font-weight:600}.logo-text{color:var(--text);font-family:Playfair Display,serif;font-size:18px;font-style:italic}.header-sub{color:var(--text-muted);border-left:1px solid var(--border);padding-left:1rem;font-size:13px}main{flex-direction:column;gap:1.5rem;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;display:flex}.input-tabs,.mode-selector{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);gap:.5rem;width:-moz-fit-content;width:fit-content;padding:.4rem;display:flex}.mode-selector{margin-bottom:.5rem}.tab-btn,.mode-btn{cursor:pointer;color:var(--text-muted);white-space:nowrap;background:0 0;border:none;border-radius:8px;align-items:center;gap:.4rem;padding:.5rem 1.2rem;font-size:14px;font-weight:500;transition:all .15s;display:flex}.tab-btn:hover,.mode-btn:hover{color:var(--text);background:var(--surface2)}.tab-btn.active,.mode-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px #c4622d40}.mode-desc{color:var(--text-subtle);margin-top:4px;padding-left:4px;font-size:12px}.upload-zone{background:var(--surface);border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;padding:3rem 2rem;transition:all .2s;position:relative}.upload-zone:hover,.upload-zone.drag-over{border-color:var(--accent);background:var(--accent-light)}.upload-zone input[type=file]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.upload-icon{background:var(--surface2);border-radius:12px;justify-content:center;align-items:center;width:52px;height:52px;margin:0 auto 1rem;display:flex}.upload-icon svg{color:var(--accent)}.upload-title{margin-bottom:.4rem;font-family:Playfair Display,serif;font-size:20px}.upload-sub{color:var(--text-muted);font-size:14px}.upload-hint{color:var(--text-subtle);margin-top:.5rem;font-size:12px}.file-chip{background:var(--success-bg);color:var(--success);border:1px solid #b8ddc7;border-radius:8px;align-items:center;gap:.5rem;margin-top:1rem;padding:.4rem 1rem;font-size:14px;font-weight:500;display:inline-flex}.text-input-zone{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;display:none}.text-input-zone.active{display:block}.text-input-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.text-input-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-size:14px;font-weight:600}.text-actions{gap:.5rem;display:flex}.textarea-wrap{border:1px solid var(--input-border);background:var(--input-bg);border-radius:8px;position:relative}#textInput{width:100%;min-height:300px;max-height:500px;color:var(--text);resize:vertical;background:0 0;border:none;outline:none;padding:1rem;font-family:Sarabun,sans-serif;font-size:15px;line-height:1.8}#textInput::placeholder{color:var(--text-subtle)}.textarea-footer{color:var(--text-subtle);background:var(--surface2);border-radius:0 0 8px 8px;justify-content:space-between;align-items:center;padding:.5rem 1rem;font-size:12px;display:flex}.btn-sm{border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:4px;padding:.3rem .8rem;font-size:12px;transition:all .15s}.btn-sm:hover{background:var(--surface2)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel-header{background:var(--surface2);border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.25rem;display:flex}.panel-title{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:.5rem;font-size:13px;font-weight:600;display:flex}.panel-body{padding:1.25rem}.text-content{color:var(--text);white-space:pre-wrap;scrollbar-width:thin;scrollbar-color:var(--border) transparent;max-height:320px;font-size:15px;line-height:1.8;overflow-y:auto}.char-count{color:var(--text-subtle);background:var(--surface2);border-radius:4px;padding:3px 8px;font-size:12px}.controls{flex-wrap:wrap;align-items:center;gap:1rem;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.6rem 1.4rem;font-family:Sarabun,sans-serif;font-size:15px;font-weight:500;text-decoration:none;transition:all .15s;display:inline-flex}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:#a8521f;transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border)}.btn-resume{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}.btn-resume:hover:not(:disabled){background:#fef3c7}.progress-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;display:none}.progress-wrap.visible{display:block}.progress-label{color:var(--text-muted);justify-content:space-between;margin-bottom:.6rem;font-size:14px;display:flex}.progress-bar-track{background:var(--surface2);border-radius:999px;height:6px;overflow:hidden}.progress-bar-fill{background:var(--accent);border-radius:999px;width:0%;height:100%;transition:width .3s}.progress-status{color:var(--text-muted);min-height:20px;margin-top:.6rem;font-size:13px}.progress-eta{color:var(--text-subtle);margin-top:.3rem;font-size:12px}.result-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}@media (max-width:768px){.result-grid{grid-template-columns:1fr}}.lang-flag{border-radius:4px;align-items:center;gap:.35rem;padding:2px 8px;font-size:12px;font-weight:600;display:inline-flex}.lang-en{color:#1a56c4;background:#e8f0fe}.lang-th{color:#c4622d;background:#fef3e8}.translation-content{color:var(--text);white-space:pre-wrap;scrollbar-width:thin;scrollbar-color:var(--border) transparent;max-height:600px;font-size:16px;line-height:2.2;overflow-y:auto}.copy-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:5px;padding:3px 10px;font-family:Sarabun,sans-serif;font-size:12px;transition:all .15s}.copy-btn:hover{background:var(--surface2);color:var(--text)}.copy-btn:disabled{opacity:.5;cursor:not-allowed}.empty-state{text-align:center;color:var(--text-subtle);padding:2.5rem 1rem;font-size:14px}.empty-icon{opacity:.4;margin-bottom:.5rem;font-size:2rem}.error-box{background:var(--error-bg);color:var(--error);border:1px solid #fecaca;border-radius:8px;padding:.8rem 1rem;font-size:14px;display:none}.error-box.visible{display:block}.resume-banner{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius);flex-direction:column;gap:.75rem;padding:1rem 1.25rem;display:none}.resume-banner.visible{display:flex}.resume-banner-title{color:var(--warn);align-items:center;gap:.4rem;font-size:14px;font-weight:600;display:flex}.resume-banner-info{color:var(--text-muted);font-size:13px}.resume-banner-actions{gap:.6rem;display:flex}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:none}.spinner.visible{display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.loading-overlay{z-index:1000;background:#faf8f4e6;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:none;position:fixed;inset:0}.loading-overlay.visible{display:flex}.loading-spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.loading-text{color:var(--text-muted);font-size:14px}.glossary-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.glossary-header{background:var(--surface2);border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.25rem;display:flex}.glossary-header:hover{background:#ede9e0}.glossary-title{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:.5rem;font-size:13px;font-weight:600;display:flex}.glossary-toggle-icon{color:var(--text-subtle);font-size:12px;transition:transform .2s}.glossary-toggle-icon.open{transform:rotate(180deg)}.glossary-body{padding:1rem 1.25rem;display:none}.glossary-body.open{display:block}.glossary-desc{color:var(--text-muted);margin-bottom:1rem;font-size:13px;line-height:1.6}.glossary-table{border-collapse:collapse;width:100%}.glossary-table th{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border);text-align:left;padding:.4rem .6rem;font-size:12px;font-weight:600}.glossary-table td{vertical-align:middle;padding:.35rem .4rem}.glossary-input{border:1px solid var(--input-border);background:var(--input-bg);width:100%;color:var(--text);border-radius:6px;outline:none;padding:.4rem .6rem;font-family:Sarabun,sans-serif;font-size:14px;transition:border-color .15s}.glossary-input:focus{border-color:var(--accent)}.glossary-input::placeholder{color:var(--text-subtle)}.glossary-del-btn{color:var(--text-subtle);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:16px;line-height:1;transition:all .15s}.glossary-del-btn:hover{background:var(--error-bg);color:var(--error)}.glossary-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.glossary-count{color:var(--text-subtle);font-size:12px}.glossary-add-btn{color:var(--accent);cursor:pointer;background:var(--accent-light);border:1px solid #e8c4b0;border-radius:6px;align-items:center;gap:.4rem;padding:.3rem .7rem;font-size:13px;font-weight:500;transition:all .15s;display:inline-flex}.glossary-add-btn:hover{background:#f5dfd3}.glossary-import-wrap{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.glossary-tag{background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);border-radius:4px;align-items:center;gap:4px;padding:2px 8px;font-size:12px;display:inline-flex}.glossary-arrow{color:var(--text-subtle);font-size:11px}.genre-row{flex-direction:column;gap:.4rem;display:none}.genre-row.visible{display:flex}.genre-label{text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);padding-left:2px;font-size:11px;font-weight:600}.genre-selector{flex-wrap:wrap;gap:.4rem;display:flex}.genre-btn{cursor:pointer;color:var(--text-muted);border:1px solid var(--border);background:var(--surface);white-space:nowrap;border-radius:8px;align-items:center;gap:.35rem;padding:.45rem 1rem;font-size:13px;font-weight:500;transition:all .15s;display:flex}.genre-btn:hover{color:var(--text);background:var(--surface2);border-color:#c8b9a5}.genre-btn.active{color:#fff;border-color:#0000;box-shadow:0 2px 8px #00000026}.genre-btn[data-genre=FANTASY].active{background:#5b4fcf}.genre-btn[data-genre=ROMANCE].active{background:#c2436a}.genre-btn[data-genre=ACTION].active{background:#c44a1a}.genre-btn[data-genre=SPORTS].active{background:#1a7a3a}.genre-desc{color:var(--text-subtle);min-height:18px;padding-left:2px;font-size:12px}.relationship-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.relationship-header{background:var(--surface2);border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.25rem;display:flex}.relationship-header:hover{background:#ede9e0}.relationship-title{letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);align-items:center;gap:.5rem;font-size:13px;font-weight:600;display:flex}.relationship-toggle-icon{color:var(--text-subtle);font-size:12px;transition:transform .2s}.relationship-toggle-icon.open{transform:rotate(180deg)}.relationship-body{padding:1rem 1.25rem;display:none}.relationship-body.open{display:block}.relationship-desc{color:var(--text-muted);margin-bottom:.75rem;font-size:13px;line-height:1.6}.relationship-examples{flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem;display:flex}.relationship-example-tag{background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;border-radius:4px;padding:2px 8px;font-size:11px;transition:all .15s}.relationship-example-tag:hover{background:var(--accent-light);color:var(--accent);border-color:#e8c4b0}.relationship-textarea{border:1px solid var(--input-border);background:var(--input-bg);width:100%;min-height:120px;color:var(--text);resize:vertical;border-radius:8px;outline:none;padding:.75rem;font-family:Sarabun,sans-serif;font-size:14px;line-height:1.8;transition:border-color .15s}.relationship-textarea:focus{border-color:var(--accent)}.relationship-textarea::placeholder{color:var(--text-subtle)}.relationship-footer{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.6rem;display:flex}.relationship-count{color:var(--text-subtle);font-size:12px}.relationship-clear-btn{border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;border-radius:4px;padding:.3rem .8rem;font-size:12px;transition:all .15s}.relationship-clear-btn:hover{background:var(--error-bg);color:var(--error);border-color:#fecaca}.consistency-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:none;overflow:hidden}.consistency-panel.visible{display:block}.consistency-spinner{border:2px solid #c4622d4d;border-top-color:var(--accent);vertical-align:middle;border-radius:50%;width:14px;height:14px;margin-right:6px;animation:.7s linear infinite spin;display:inline-block}.issue-row{border-bottom:1px solid var(--border);align-items:flex-start;gap:.75rem;padding:.65rem 0;font-size:14px;display:flex}.issue-row:last-child{border-bottom:none}.issue-badge{border-radius:4px;flex-shrink:0;margin-top:2px;padding:2px 7px;font-size:11px;font-weight:600}.badge-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-border)}.badge-ok{background:var(--success-bg);color:var(--success);border:1px solid #b8ddc7}.issue-text{color:var(--text);flex:1;line-height:1.6}.issue-suggestion{color:var(--text-muted);margin-top:2px;font-size:12px}main.translation-running .input-tabs,main.translation-running .mode-selector,main.translation-running .genre-row,main.translation-running .upload-zone,main.translation-running .text-input-zone,main.translation-running .glossary-panel,main.translation-running .relationship-panel{pointer-events:none;opacity:.65}button:disabled,input:disabled,textarea:disabled{cursor:not-allowed}.upload-zone.disabled{border-color:var(--border)}