/* Shared UI surfaces, with the existing editor highlighting kept intact. */
:root {
  --ui-border: #d7deea;
  --ui-muted: #58667d;
  --ui-accent: #3f5dc8;
  --ui-accent-soft: #edf1ff;
  --ui-on-accent: #fff;
  --ui-shadow: 0 8px 28px rgba(24, 39, 75, .08);
  --ui-missing: #b53848;
  --ui-saved: #237448;
  --ui-review: #926000;
}
[data-theme="grey"] {
  --color-bg: #e3e5ea;
  --color-bg2: #d6dae2;
  --color-element: #f0f1f4;
  --color-element-alt: #e1e4eb;
  --color-font: #202938;
  --ui-border: #b8c0cc;
  --ui-muted: #4e596d;
  --ui-accent-soft: #d3daed;
}
[data-theme="dark"] {
  --ui-border: #4c4e54;
  --ui-muted: #b9bbbe;
  --ui-accent: var(--color-element-highlight);
  --ui-accent-soft: var(--color-element-alt);
  --ui-on-accent: #fff;
  --ui-shadow: 0 8px 28px var(--color-shadow);
  --ui-missing: var(--color-diagnostic-error-border);
  --ui-saved: #80d8aa;
  --ui-review: var(--color-diagnostic-warning-border);
}
[data-theme="modern-dark"] {
  --ui-border: #3d495e;
  --ui-muted: #a9b6cb;
  --ui-accent: #9aaeff;
  --ui-accent-soft: #303e63;
  --ui-on-accent: #161e37;
  --ui-shadow: 0 8px 28px rgba(0, 0, 0, .2);
  --ui-missing: #ff9baa;
  --ui-saved: #80d8aa;
  --ui-review: #f1cc77;
}
[data-theme="modern-dark"] {
  --color-bg: #181d27;
  --color-bg2: #202735;
  --color-element: #242d3c;
  --color-element-alt: #2b3546;
  --color-font: #e2e8f2;
  --color-element-highlight: #677BC4;
  --color-accent: #FFB86B;
  --color-line-diff: rgba(255, 120, 120, .22);
  --color-diagnostic-warning: rgba(255, 198, 41, .34);
  --color-diagnostic-warning-border: #D69B16;
  --color-diagnostic-error: rgba(255, 72, 92, .34);
  --color-diagnostic-error-border: #FF6073;
  --color-shadow: rgba(0, 0, 0, .3);
}
input, button, select, textarea {
  font-family: inherit;
  border-color: var(--ui-border);
  border-radius: 7px;
}
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
button:hover:not(:disabled) { border-color: var(--ui-accent); }
input:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible,
.fileTableScroll:focus-visible, .filterChip:focus-within {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--ui-accent); }
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.workspace {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  font-size: calc(13px * var(--density));
}
.workspaceHeader {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: max-content minmax(220px, 1fr) minmax(0, max-content);
  align-items: center;
  gap: 8px 18px;
  padding: 10px 20px;
  background: var(--color-element);
  border-bottom: 1px solid var(--ui-border);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .04);
}
.workspaceBrand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brandMark {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
}
.workspaceBrand strong { display: block; font-size: 17px; line-height: 1.3; }
.workspaceBrand div > span { display: block; color: var(--ui-muted); font-size: 12px; }
.workspaceActions { display: flex; align-items: center; justify-self: end; flex-wrap: wrap; gap: 8px; min-width: 0; }
.workspaceActions button { flex: none; white-space: nowrap; }
.workspaceActions button, .workspacePagination button, .workspaceEmpty button {
  background: var(--color-element);
  line-height: 1.4;
  padding: 9px 13px;
  min-height: 36px;
  font-weight: 600;
}
.workspaceActions .primaryAction {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  border-color: var(--ui-accent);
}
.workspaceContent { max-width: 1800px; margin: 0 auto; padding: 16px 20px; }
.workspaceSearch { min-width: 0; }
.searchToolbar { display: flex; align-items: stretch; }
.searchToolbar .searchField { flex: 1; min-width: 0; }
.filterToggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; padding: 7px 10px; background: transparent; border: 0; min-height: 34px; font-weight: 600; line-height: 1.4; }
.filterToggle svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.filterToggle:hover:not(:disabled), .filterToggle.active { background: transparent; border: 0; color: var(--ui-accent); }
.filterToggle:focus:not(:focus-visible) { outline: none; }
.filterToggle:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -3px; }
.searchField {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  background: var(--color-bg2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 0 5px 0 12px;
}
.searchField:focus-within { border-color: var(--ui-accent); outline: 2px solid var(--ui-accent-soft); background: var(--color-element); }
.searchField svg { width: 20px; height: 20px; stroke: var(--ui-muted); stroke-width: 1.8; fill: none; flex-shrink: 0; }
.searchField .filterToggle svg { width: 18px; height: 18px; stroke: currentColor; }
.searchField #searchInp, .searchField #searchInp:focus {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
  font-size: 14px;
  line-height: 1.6;
  transition: none;
}
.searchField #searchInp::-webkit-search-cancel-button { display: none; }
.searchField kbd { white-space: nowrap; font: inherit; font-size: 11px; color: var(--ui-muted); border: 1px solid var(--ui-border); padding: 3px 6px; border-radius: 4px; }
.searchField .clearSearch { border: 0; background: transparent; color: var(--ui-accent); padding: 4px 7px; }
.fileFilters { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 6px; border: 0; max-height: min(210px, 32dvh); overflow-y: auto; overscroll-behavior: contain; }
.fileFilterChoices { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.filterChip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-element);
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  padding: 7px 10px;
  min-height: 34px;
  box-sizing: border-box;
  cursor: pointer;
}
.filterChip input { margin: 0; width: 14px; height: 14px; padding: 0; flex-shrink: 0; }
.filterChip.selected { background: var(--ui-accent-soft); border-color: var(--ui-accent); }
.filterChip:hover { border-color: var(--ui-accent); }
.filterSelectionActions { display: flex; gap: 6px; }
.filterSelectionActions button { padding: 4px 7px; border: 0; background: transparent; color: var(--ui-accent); font-size: 12px; line-height: 1.6; }
.fileTableScroll { overflow-x: auto; background: var(--color-element); border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: var(--ui-shadow); }
.workspace #table { table-layout: fixed; min-width: 750px; }
.workspace #table th { background: var(--color-bg2); padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--ui-border); }
.workspace #table td { padding: 12px; border-bottom: 1px solid var(--ui-border); vertical-align: top; overflow-wrap: anywhere; line-height: 1.6; }
.workspace #table tbody tr:last-child td { border-bottom: 0; }
.workspace #table tbody tr { cursor: pointer; }
.workspace #table .tableSort { border: 0; padding: 0; border-radius: 2px; background: transparent; font-weight: 700; text-align: left; line-height: 1.4; }
.workspace #table .fileOpenButton { max-width: 100%; padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--ui-accent); text-align: left; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.workspace #table .fileOpenButton:hover { text-decoration: underline; }
.fileReviewLabel { display: block; margin-top: 4px; font-size: 11px; color: var(--ui-review); }
.workspaceEmpty { text-align: center; padding: 50px 16px; }
.workspaceEmpty h2 { font-size: 18px; margin: 0 0 8px; }
.workspaceEmpty p { color: var(--ui-muted); margin: 0 0 16px; }
.workspaceFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--color-element);
  border-top: 1px solid var(--ui-border);
  box-shadow: 0 -3px 16px rgba(0, 0, 0, .04);
}
.workspaceStatus { display: flex; flex-wrap: wrap; gap: 14px; color: var(--ui-muted); }
.workspaceLoaded { font-size: 12px; white-space: nowrap; }
.workspaceLoaded strong { color: var(--color-font); font-variant-numeric: tabular-nums; }
.statusPill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; }
.statusPill strong { color: var(--color-font); font-variant-numeric: tabular-nums; }
.statusDot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.statusPill.missing .statusDot { color: var(--ui-missing); }
.statusPill.saved .statusDot { color: var(--ui-saved); }
.statusPill.review .statusDot { color: var(--ui-review); }
.workspacePagination { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fileRange { font-size: 12px; color: var(--ui-muted); margin-right: 8px; font-variant-numeric: tabular-nums; }
.pageNumbers { display: flex; gap: 4px; }
.workspacePagination .pageNumbers button { min-width: 34px; padding: 8px; }
.workspacePagination .active { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent); }
.pageJump { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
.pageJump input { background: var(--color-element); width: 54px; padding: 6px 4px 6px 8px; line-height: 1.6; }
.sideHeader { flex-wrap: wrap; }
.editor .gamePreviewStrip { display: flex; flex-direction: column; }
.editor .gamePreviewToolbar { position: static; flex: none; gap: 8px; margin-bottom: 6px; }
.editor .gamePreviewMainRow { flex: 1; height: auto; }
.editor .editButtons button { line-height: 1.6; }
.editor .editorActions { position: sticky; top: calc(200px * var(--density)); z-index: 41; flex-wrap: wrap; padding: 8px 0; background: var(--color-bg); border-bottom: 1px solid var(--ui-border); }
.editor .editorActions button, .editor .applyRegexButton { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1200px) {
  .workspaceHeader { grid-template-columns: max-content minmax(0, 1fr); }
  .workspaceActions { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .workspaceFooter { gap: 8px; }
  .workspacePagination .pageNumbers { display: none; }
}
@media (max-width: 700px) {
  .workspace { padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)); }
  .workspaceHeader { padding: 8px 12px; gap: 8px; }
  .workspaceBrand strong { font-size: 15px; }
  .workspaceBrand div > span { font-size: 11px; }
  .brandMark { width: 30px; height: 30px; }
  .workspaceHeader { grid-template-columns: max-content minmax(0, 1fr); }
  .workspaceSearch { grid-column: 1 / -1; grid-row: 2; }
  .workspaceActions { grid-column: 2; grid-row: 1; width: 100%; justify-self: stretch; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; gap: 6px; padding: 3px; box-sizing: border-box; }
  .workspaceActions button { padding: 8px 10px; font-size: 12px; }
  .workspaceContent { padding: 12px; }
  .filterToggle { padding: 7px 9px; }
  .searchField { padding: 0 5px 0 10px; }
  .searchField kbd { display: none; }
  .filterChip { font-size: 12px; padding: 8px; min-height: 38px; }
  .workspace #table { display: block; min-width: 0; }
  .workspace #table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .workspace #table tbody { display: block; }
  .workspace #table tbody tr { display: grid; grid-template-columns: 90px minmax(0, 1fr); border-bottom: 1px solid var(--ui-border); }
  .workspace #table tbody tr:last-child { border-bottom: 0; }
  .workspace #table td { border-bottom: 0; padding: 9px 12px; }
  .workspace #table td:nth-child(n+3) { grid-column: 1 / -1; }
  .workspace #table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; color: var(--ui-muted); }
  .workspace #table td.translationTr > span:empty::after { content: 'No translation yet'; font-style: italic; color: var(--ui-muted); }
  .workspaceFooter { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); flex-direction: column; align-items: stretch; gap: 8px; }
  .workspaceStatus { justify-content: center; }
  .workspacePagination { justify-content: center; gap: 6px; }
  .fileRange { flex: 1; margin-right: 0; font-size: 11px; }
  .workspacePagination button { min-height: 36px; padding: 7px 9px; }
  .workspacePagination button > span { display: none; }
  .pageJump { gap: 4px; }
  .pageJump input { width: 44px; }
  .editor > .edit { margin-right: 0; }
  .editor > .side, .editor > .clipboard { position: static; width: 100%; height: auto; overflow: visible; }
  .editor > .side { margin-top: 20px; border-top: 1px solid var(--ui-border); }
  .editor > .clipboard > textarea { height: 110px; }
  .editor .editorActions h1 { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace * { transition: none; scroll-behavior: auto; }
}

/* Hover and selection frame a row without changing its translation status colors. */
.workspace #table tbody tr {
  --file-row-edge: transparent;
  --file-row-glow: transparent;
  position: relative;
}
.workspace #table tbody tr:hover {
  --file-row-edge: color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border));
  --file-row-glow: color-mix(in srgb, var(--ui-accent) 18%, transparent);
  z-index: 1;
  box-shadow: 0 2px 8px var(--file-row-glow);
}
.workspace #table tbody tr.selectedFileRow {
  --file-row-edge: var(--ui-accent);
  --file-row-glow: color-mix(in srgb, var(--ui-accent) 28%, transparent);
  z-index: 2;
  box-shadow: 0 2px 10px var(--file-row-glow);
}
.workspace #table tbody tr:is(:hover, .selectedFileRow) > td {
  box-shadow: inset 0 1px var(--file-row-edge), inset 0 -1px var(--file-row-edge);
}
.workspace #table tbody tr:hover > td:first-child {
  box-shadow: inset 1px 0 var(--file-row-edge), inset 0 1px var(--file-row-edge), inset 0 -1px var(--file-row-edge);
}
.workspace #table tbody tr:is(:hover, .selectedFileRow) > td:last-child {
  box-shadow: inset -1px 0 var(--file-row-edge), inset 0 1px var(--file-row-edge), inset 0 -1px var(--file-row-edge);
}
.workspace #table tbody tr.selectedFileRow > td:first-child {
  box-shadow: inset 4px 0 var(--ui-accent), inset 0 1px var(--file-row-edge), inset 0 -1px var(--file-row-edge);
}
.workspace #table tbody tr.selectedFileRow:focus { outline: none; }
.workspace #table tbody tr.selectedFileRow:focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: -2px;
}
@media (max-width: 700px) {
  .workspace #table tbody tr:is(:hover, .selectedFileRow) {
    outline: 1px solid var(--file-row-edge);
    outline-offset: -1px;
  }
  .workspace #table tbody tr:is(:hover, .selectedFileRow) > td,
  .workspace #table tbody tr:is(:hover, .selectedFileRow) > td:first-child,
  .workspace #table tbody tr:is(:hover, .selectedFileRow) > td:last-child { box-shadow: none; }
  .workspace #table tbody tr.selectedFileRow::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    border-left: 4px solid var(--ui-accent);
    pointer-events: none;
  }
  .workspace #table tbody tr.selectedFileRow:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: -2px;
  }
}