:root {
  font-family: "Segoe UI", Arial, sans-serif;
  color: #1d1d1f;
  background: #f4f4f4;
  font-size: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f4f4f4; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 190px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  border-right: 1px solid #c8c8c8;
  background: #f5f5f5;
}
.sidebar-menu { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.sidebar-action {
  border: 0;
  background: transparent;
  padding: 7px 8px;
  text-align: left;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-action:hover { background: #e7e7e7; }
.sidebar-action[hidden] { display: none; }
.sidebar-separator { border-top: 1px solid #c9c9c9; margin: 6px 0; }
.sidebar-info {
  margin-top: auto;
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1.35;
}
.status { color: #8a8a8a; overflow-wrap: anywhere; }
.status.error { color: #b00020; }
.app-shell {
  margin-left: 190px;
  min-width: 720px;
  min-height: 100vh;
  background: white;
  padding: 0 12px 14px;
}
.page-sticky-head {
  position: fixed;
  top: 0;
  left: 190px;
  right: 0;
  z-index: 12;
  background: white;
  padding: 10px 12px 0;
}
.topbar { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-bottom: 5px; }
.app-title { font-weight: 700; font-size: 18px; }
.dialog-footer button, .close-btn {
  border: 1px solid #aaa;
  background: #fafafa;
  border-radius: 4px;
  padding: 5px 10px;
}
.dialog-footer button:hover { background: #f0f0f0; }
.search-line { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.search-line input { width: 274px; padding: 5px 7px; border: 1px solid #aaa; border-radius: 3px; }
.tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid #a9a9a9; min-height: 31px; overflow: visible; flex-wrap: wrap; }
.tab-button {
  border: 1px solid #aaa;
  border-bottom: none;
  background: #ececec;
  padding: 6px 8px 7px;
  border-radius: 5px 5px 0 0;
  white-space: nowrap;
  margin-bottom: -1px;
}
.tabs.spacious .tab-button { padding-left: 18px; padding-right: 18px; }
.tabs.spacious .tab-button.has-close { padding-right: 7px; }
.tab-button.has-close { padding-right: 5px; }
.tab-button.active { background: white; font-weight: 600; padding-bottom: 8px; }
.add-tab-button { min-width: 28px; padding-left: 8px !important; padding-right: 8px !important; font-weight: 700; }
.tab-close { margin-left: 8px; color: #555; font-weight: 400; cursor: pointer; }
.content { padding-top: calc(var(--vat-main-head-height, 0px) + 8px); }
.heading-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 8px;
  position: sticky;
  top: var(--vat-main-head-height, 0px);
  z-index: 11;
  background: white;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: -8px;
}
.heading-row .name { font-weight: 700; }
.heading-row .description { flex: 1; }
.heading-row .progress { margin-left: auto; white-space: nowrap; }
.biome-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  position: sticky;
  top: var(--vat-main-head-height, 0px);
  z-index: 11;
  background: white;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: -8px;
}
.biome-toolbar .visible-only { margin-left: auto; }
select { padding: 4px 6px; }
.table-wrap { width: 100%; overflow: visible; border: 1px solid #aaa; }
table.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.data-table th {
  position: sticky;
  top: calc(var(--vat-main-head-height, 0px) + var(--vat-content-head-height, 0px));
  z-index: 10;
  background: #ececec;
  border-bottom: 1px solid #aaa;
  text-align: left;
  font-weight: 600;
  padding: 5px 7px;
}
.data-table th.sortable { cursor: pointer; }
.data-table td { padding: 4px 7px; border-bottom: 1px solid #e1e1e1; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-table tbody tr:nth-child(even) { background: #f8f8f8; }
.data-table .done-col { width: 60px; text-align: center; }
.data-table .done-number-col { width: 66px; min-width: 66px; max-width: 66px; text-align: right; white-space: nowrap; padding-left: 2px; padding-right: 14px; }
.data-table .done-col { padding-right: 3px; }
.biome-table { table-layout: auto; }
.biome-table .done-col { width: 48px; min-width: 48px; max-width: 48px; white-space: nowrap; }
.data-table .biome-requirement { width: 27%; }
.biome-table .achievements-col { width: auto; }
.data-table .id-col { width: 245px; }
.data-table .prefab-col { width: 220px; }
.data-table .category-col { width: 230px; }
.data-table .stats-name { width: 31%; }
.data-table .stats-units { width: 18%; }
.data-table .stats-number { width: 13%; text-align: right; }
.data-table .stats-achievement, .data-table .stats-missing { font-weight: 700; }
.data-table a.entity-link { color: #0000ee; text-decoration: underline; }
.partial-box { color: #888; font-size: 16px; line-height: 1; }
.achievement-missing { color: #cc0000; }
.achievement-token { cursor: help; }
.empty-state { padding: 28px 12px; color: #666; text-align: center; }

#optionsDialog { border: 1px solid #777; border-radius: 6px; padding: 0; width: min(920px, 92vw); max-height: 88vh; }
#optionsDialog::backdrop { background: rgba(0,0,0,.28); }
.options-dialog { padding: 12px; overflow: auto; max-height: 86vh; }
.dialog-title-row { display: flex; align-items: center; }
.dialog-title-row h2 { margin: 0 0 10px; font-size: 18px; }
.close-btn { margin-left: auto; padding: 1px 9px; font-size: 19px; }
.option-lists { display: grid; grid-template-columns: 7fr 3fr; gap: 10px; min-height: 320px; }
fieldset { border: 1px solid #aaa; padding: 8px; }
legend { padding: 0 5px; }
.option-table { width: 100%; border-collapse: collapse; }
.option-table th, .option-table td { padding: 5px 6px; border-bottom: 1px solid #e0e0e0; text-align: left; }
.option-table .num { text-align: right; width: 70px; }
.option-table .visibility { width: 65px; text-align: center; }
.option-achievement { display: inline-block; cursor: help; }
.row-options-line { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.row-options { flex: 1 1 auto; margin: 0; }
.row-options label { margin-right: 24px; }
.clear-cache-btn { flex: 0 0 auto; padding: 6px 12px; }
.other-options { margin-top: 10px; }
.other-options { display: flex; gap: 18px; flex-wrap: wrap; }
.dialog-footer { text-align: right; margin-top: 10px; }

@media (max-width: 800px) {
  .sidebar { width: 170px; }
  .page-sticky-head { left: 170px; }
  .app-shell { margin-left: 170px; min-width: 620px; }
  .option-lists { grid-template-columns: 1fr; }
}

/* Draggable achievement tabs. STATS/BIOME recap stay fixed and + stays last. */
.tab-button[draggable="true"] { cursor: default; position: relative; }
.tab-button[draggable="true"]:active { cursor: default; }
.tab-button.dragging { opacity: 0.55; }
.tab-button.drag-before::before,
.tab-button.drag-after::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 2px;
  background: #555;
  z-index: 3;
}
.tab-button.drag-before::before { left: -2px; }
.tab-button.drag-after::after { right: -2px; }


/* VAT-styled confirmation dialog (avoids browser "site says" header). */
.confirm-dialog {
  border: 1px solid #888;
  border-radius: 8px;
  padding: 0;
  min-width: 390px;
  max-width: min(520px, 90vw);
}
.confirm-dialog::backdrop { background: rgba(0,0,0,.28); }
.confirm-dialog-body { padding: 20px 22px 16px; }
.confirm-dialog-question { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.confirm-dialog-note { font-size: 15px; margin-bottom: 22px; }
.confirm-dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
.confirm-dialog-buttons button {
  min-width: 82px;
  padding: 6px 16px;
}
.primary-dialog-btn { font-weight: 600; }