/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #1e1e1e;
  color: #cccccc;
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1e1e1e; }
::-webkit-scrollbar-thumb { background: #424242; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
::-webkit-scrollbar-corner { background: #1e1e1e; }

/* === HEADER === */
#header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: #252526;
  border-bottom: 1px solid #3c3c3c;
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.header-left h1 { font-size: 16px; font-weight: 600; color: #e0e0e0; letter-spacing: -0.3px; }
.logo-icon { width: 22px; height: 22px; color: #4ec9b0; }
.header-right { display: flex; gap: 8px; }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.15s ease; white-space: nowrap;
  text-decoration: none; line-height: 1;
}
.btn-primary { background: #0d7377; color: #fff; border-color: #0d7377; }
.btn-primary:hover { background: #0e8a8f; }
.btn-secondary { background: #3c3c3c; color: #cccccc; border-color: #555; }
.btn-secondary:hover { background: #4a4a4a; }
.btn-magic { background: #6c39a3; color: #fff; border-color: #6c39a3; }
.btn-magic:hover { background: #7d45b8; }
.btn-modify { background: #2d6da8; color: #fff; border-color: #2d6da8; }
.btn-modify:hover { background: #367fc2; }
.btn-believe { background: #d4782e; color: #fff; border-color: #d4782e; }
.btn-believe:hover { background: #e08635; }
.btn-success { background: #2d8a4e; color: #fff; border-color: #2d8a4e; }
.btn-success:hover { background: #36a05c; }
.btn-ghost { background: transparent; color: #858585; border-color: transparent; }
.btn-ghost:hover { color: #cccccc; }
.btn-copy {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: #3c3c3c; color: #cccccc; border-color: #555; padding: 6px 12px; font-size: 12px;
}
.btn-copy:hover { background: #4a4a4a; }
.btn-html { background: transparent; color: #858585; border: 1px solid #3c3c3c; }
.btn-html:hover { border-color: #0d7377; color: #ccc; }
.btn-html.active { background: #0d7377; color: #fff; border-color: #0d7377; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* === TOOLBAR === */
#toolbar {
  background: #252526; border-bottom: 1px solid #3c3c3c;
  flex-shrink: 0;
}
.toolbar-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; gap: 12px; }
.toolbar-row.secondary { padding: 8px 20px; border-top: 1px solid #333; }
.toolbar-left { display: flex; align-items: center; gap: 8px; }
.toolbar-right { display: flex; align-items: center; gap: 12px; }
.file-name { font-size: 12px; color: #858585; }
.drop-hint { font-size: 12px; color: #555; }
.file-upload { display: flex; align-items: center; gap: 8px; position: relative; }
.file-upload.dragover .drop-hint { color: #0d7377; }
.file-upload.dragover { border-color: #0d7377; }

/* Search */
.search-box { position: relative; flex: 1; max-width: 360px; }
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #555; pointer-events: none; }
#searchInput {
  width: 100%; padding: 7px 12px 7px 32px; border-radius: 6px;
  background: #3c3c3c; border: 1px solid #555; color: #ccc;
  font-size: 13px; outline: none; transition: border-color 0.15s;
}
#searchInput:focus { border-color: #0d7377; }
#searchInput::placeholder { color: #666; }

/* Filter group */
.filter-group { display: flex; background: #2d2d2d; border-radius: 6px; padding: 2px; }
.filter-btn {
  padding: 5px 12px; font-size: 12px; font-weight: 500;
  border: none; background: transparent; color: #858585;
  border-radius: 4px; cursor: pointer; transition: all 0.15s;
}
.filter-btn:hover { color: #ccc; }
.filter-btn.active { background: #0d7377; color: #fff; }

/* Progress bar */
.progress-bar-container { padding: 0 20px 8px; }
.progress-bar { height: 4px; background: #2d2d2d; border-radius: 2px; overflow: hidden; }
.progress-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #0d7377, #4ec9b0);
  border-radius: 2px; transition: width 0.4s ease;
}
.progress-text { font-size: 11px; color: #666; text-align: right; margin-top: 2px; }

/* === MAIN CONTENT === */
#main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* Empty state */
.empty-state {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #555; gap: 12px;
}
.empty-icon { opacity: 0.3; margin-bottom: 8px; }
.empty-title { font-size: 20px; font-weight: 500; color: #666; }
.empty-subtitle { font-size: 14px; color: #555; }

/* Table */
.table-container { flex: 1; overflow: auto; }
#translationsTable { width: 100%; border-collapse: collapse; table-layout: fixed; }
#translationsTable thead { position: sticky; top: 0; z-index: 10; }
#translationsTable th {
  background: #2d2d2d; padding: 10px 12px;
  font-size: 11px; font-weight: 700; color: #858585;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid #3c3c3c; text-align: left;
}
.col-status { width: 32px; text-align: center; }
.col-original { width: 45%; }
.col-translation { width: 45%; }
.col-actions { width: 40px; }

#translationsTable tbody tr { border-bottom: 1px solid #2d2d2d; transition: background 0.1s; }
#translationsTable tbody tr:hover { background: #2a2a2a; }
#translationsTable tbody tr.editing { background: #1a2d3d; }
#translationsTable td { padding: 12px; vertical-align: top; font-size: 13px; line-height: 1.5; }

.cell-status { text-align: center; padding-top: 16px !important; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.status-dot.pending { background: #555; }
.status-dot.done { background: #4ec9b0; box-shadow: 0 0 6px rgba(78, 201, 176, 0.3); }
.status-dot.fuzzy { background: #dcdcaa; box-shadow: 0 0 6px rgba(220, 220, 170, 0.3); }

.cell-original { word-break: break-word; white-space: pre-wrap; color: #ccc; }
.cell-original.html-view { font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace; font-size: 12px; color: #569cd6; background: #1e1e1e; padding: 6px 8px; border-radius: 4px; }

.cell-translation { min-height: 24px; }
.cell-translation .translation-text {
  word-break: break-word; white-space: pre-wrap; cursor: text; color: #ccc;
  padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; min-height: 24px;
}
.cell-translation .translation-text:hover { border-color: #3c3c3c; }
.cell-translation .translation-text.empty { color: #555; font-style: italic; }
.cell-translation .translation-text.html-view { font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace; font-size: 12px; color: #4ec9b0; background: #1e1e1e; }

.cell-translation .edit-area { display: flex; flex-direction: column; gap: 8px; }
.cell-translation .edit-area textarea {
  width: 100%; min-height: 80px; padding: 8px; border-radius: 6px;
  background: #1e1e1e; border: 1px solid #0d7377; color: #ccc;
  font-family: inherit; font-size: 13px; resize: vertical; outline: none;
}
.cell-translation .edit-actions { display: flex; justify-content: flex-end; gap: 6px; }

.cell-actions { text-align: right; padding-top: 14px !important; }
.btn-edit {
  background: transparent; border: none; color: #555; cursor: pointer;
  padding: 6px; border-radius: 4px; display: none; transition: all 0.15s;
  line-height: 1;
}
tr:hover .btn-edit { display: inline-flex; }
.btn-edit:hover { background: #3c3c3c; color: #ccc; }

.empty-search { padding: 40px 20px; text-align: center; color: #666; font-size: 14px; }

/* === MODALS === */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(4px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #1e1e1e; border: 1px solid #3c3c3c; border-radius: 12px;
  width: 100%; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.magic-modal { max-width: 960px; height: 85vh; }
.believe-modal { max-width: 640px; }
.modal-header {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px; background: #252526; border-bottom: 1px solid #3c3c3c;
}
.modal-dots { display: flex; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #f44747; }
.dot.yellow { background: #dcdcaa; }
.dot.green { background: #4ec9b0; }
.modal-title { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #e0e0e0; }
.badge {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  background: #6c39a3; color: #d4b4ff; font-weight: 500;
  margin-left: 8px; border: 1px solid rgba(108, 57, 163, 0.5);
}
.modal-close { background: none; border: none; color: #555; font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; }
.modal-close:hover { color: #ccc; }
.modal-progress { height: 3px; background: #2d2d2d; }
.modal-progress-fill { height: 100%; width: 25%; background: linear-gradient(90deg, #0d7377, #6c39a3, #d4782e); transition: width 0.4s ease; }
.modal-body { flex: 1; overflow: hidden; }
.step-content { padding: 24px; height: 100%; display: flex; flex-direction: column; }
.step-content h2 { font-size: 18px; font-weight: 600; color: #e0e0e0; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.step-content p { font-size: 13px; color: #666; margin-bottom: 16px; }
.step-content textarea {
  flex: 1; width: 100%; padding: 16px; border-radius: 8px;
  background: #1a1a1a; border: 1px solid #3c3c3c; color: #ccc;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 13px; resize: none; outline: none; transition: border-color 0.15s;
  min-height: 120px;
}
.step-content textarea:focus { border-color: #0d7377; }
.step-content textarea::placeholder { color: #555; }
.step-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.step-actions.between { justify-content: space-between; }
.step-actions.centered { justify-content: center; }

.prompt-container {
  flex: 1; position: relative; background: #0d0d0d;
  border: 1px solid #3c3c3c; border-radius: 8px; overflow: hidden;
}
.prompt-container pre {
  width: 100%; height: 100%; padding: 16px; margin: 0;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 12px; color: #7ec699; line-height: 1.6;
  overflow: auto; white-space: pre-wrap; word-break: break-word;
}

.preview-table-wrapper { flex: 1; overflow: auto; border: 1px solid #3c3c3c; border-radius: 8px; }
.preview-table { width: 100%; border-collapse: collapse; }
.preview-table th {
  background: #2d2d2d; padding: 10px 12px; font-size: 11px; font-weight: 700;
  color: #858585; text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid #3c3c3c; text-align: left; position: sticky; top: 0;
}
.preview-table td { padding: 10px 12px; font-size: 12px; font-family: monospace; vertical-align: top; border-bottom: 1px solid #2d2d2d; word-break: break-all; }
.preview-table td:first-child { color: #858585; width: 50%; }
.preview-table td:last-child { color: #4ec9b0; background: #0a1f14; }

/* Believe modal */
.believe-field { margin-bottom: 16px; }
.believe-field label { display: block; font-size: 13px; font-weight: 500; color: #ccc; margin-bottom: 6px; }
.believe-prompt { min-height: 160px; }
.fragment-count { position: absolute; top: 12px; left: 12px; font-size: 11px; color: #d4782e; padding: 3px 10px; background: #2d1a0a; border-radius: 4px; }

/* === Magic Steps === */
.magic-step { height: 100%; }

/* === Modify Modal === */
.modify-modal { max-width: 800px; height: 75vh; }
.modify-pairs { display: flex; flex-direction: column; gap: 16px; margin-bottom: 12px; }
.modify-pair {
  display: flex; align-items: flex-end; gap: 12px;
  background: #252526; border: 1px solid #3c3c3c; border-radius: 8px; padding: 16px;
}
.modify-field { flex: 1; }
.modify-field label { display: block; font-size: 12px; font-weight: 500; color: #858585; margin-bottom: 6px; }
.modify-field input {
  width: 100%; padding: 10px 12px; border-radius: 6px;
  background: #1e1e1e; border: 1px solid #3c3c3c; color: #ccc;
  font-size: 13px; outline: none; transition: border-color 0.15s;
}
.modify-field input:focus { border-color: #2d6da8; }
.modify-field input::placeholder { color: #555; }
.modify-arrow { color: #2d6da8; padding-bottom: 8px; display: flex; align-items: center; }

/* Modify preview table extra columns */
.preview-table td:nth-child(2) { color: #858585; }
.preview-table td:nth-child(3) { color: #dcdcaa; background: #1a1a0a; }
.preview-table td:nth-child(4) { color: #4ec9b0; background: #0a1f14; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .toolbar-row { flex-direction: column; align-items: stretch; }
  .toolbar-left { flex-wrap: wrap; }
  .search-box { max-width: none; }
  .header-right { display: none; }
  .magic-modal { height: 95vh; }
  .modify-pair { flex-direction: column; }
  .modify-arrow { transform: rotate(90deg); padding-bottom: 0; justify-content: center; }
  .step-content { padding: 16px; }
}