:root {
  --bg:         #0e0e0e;
  --bg-surface: #1a1818;
  --bg-input:   #080808;
  --border:     #2a2828;
  --fg:         #e8e4e2;
  --fg-dim:     #a09898;
  --accent:     #9d2235;
  --link:       #ef8f99;
  --success:    #7fc99a;
  --warning:    #e8c06a;
  --error:      #ef8f99;
  --indigo:     #88b0d8;
  --tagger:     #7cc4b8;
  --fav:        #e0524d;
  --font-mono:  "JetBrains Mono", "Fira Mono", "Courier New", monospace;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  background: var(--bg-input);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 4px 8px;
}
input[type="text"]:focus, input[type="search"]:focus, input[type="password"]:focus,
input[type="number"]:focus, textarea:focus {
  outline: 1px solid var(--accent);
  border-color: var(--accent);
}

button {
  cursor: pointer;
  background: var(--bg-surface);
  border-color: var(--border);
}
button:hover { border-color: var(--fg-dim); }
button:disabled, button[disabled] {
  cursor: not-allowed;
  color: var(--fg-dim);
  border-color: var(--border);
}
button:disabled:hover, button[disabled]:hover { border-color: var(--border); }

/* Layout */
#topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  z-index: 100;
}

#logo {
  font-weight: bold;
  font-size: 16px;
  color: var(--fg);
  letter-spacing: 2px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
#logo span { text-transform: uppercase; }
#logo:hover { color: var(--accent); text-decoration: none; }
.topbar-logo {
  height: 40px;
  width: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

#footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 4px 16px;
  font-size: 11px;
  color: var(--fg-dim);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
#footer-left, #footer-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  #footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  #footer-left .footer-sep-strong {
    flex-basis: 100%;
    height: 0;
    overflow: hidden;
    margin: 0;
  }
}
#footer a { color: var(--link); }
#footer a:hover { color: var(--fg); }
.footer-gallery { color: var(--link); }
button.footer-gallery {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
button.footer-gallery:hover { color: var(--fg); }
.footer-sep { color: var(--border); }
.footer-sep-strong { color: var(--fg-dim); font-weight: bold; margin: 0 4px; }
.footer-conn { display: inline-flex; align-items: center; gap: 5px; }
.footer-dot { width: 7px; height: 7px; display: inline-block; }
.footer-dot-ok { background: var(--success); }
.footer-dot-rejected { background: var(--warning); }
.footer-dot-down { background: var(--error); }
.footer-dot-checking { background: var(--fg-dim); }
.footer-degraded { color: var(--warning); }
.footer-rating-label { color: var(--fg-dim); }
.footer-rating-active { color: var(--link); }
.footer-hidden:empty { display: none; }
button.footer-rating-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--fg-dim);
  cursor: pointer;
}
button.footer-rating-link:hover { color: var(--fg); }

#nav {
  display: flex;
  gap: 12px;
  margin-left: 16px;
  flex-wrap: wrap;
}
#nav a {
  color: var(--fg-dim);
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
#nav a:hover, #nav a.active { color: var(--fg); text-decoration: none; }
#nav a.active { border-bottom-color: var(--accent); }

#topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

#job-status {
  font-size: 12px;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.job-running { color: var(--warning); }
.job-done { color: var(--success); }
.job-error { color: var(--error); }
.job-dismiss {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1;
}
.job-dismiss:hover { color: var(--fg); border-color: transparent; }

#main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

#sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px 0 8px 4px;
  /* Reserve the scrollbar's own column (and force it off overlay) so the
     right-aligned section chevrons never sit under it. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border); }
#sidebar::-webkit-scrollbar-track { background: transparent; }

#content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Sidebar */
.sidebar-section { margin-bottom: 8px; }
.sidebar-section-title {
  font-size: 11px;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-section-title:hover { color: var(--fg); }

.tag-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 12px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}
.tag-entry:hover { background: var(--bg-input); }

.tag-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tag-count { color: var(--fg-dim); font-size: 11px; text-align: right; min-width: 32px; }

/* Folder tree */
.folder-node-wrap { list-style: none; }
.folder-node-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}
.folder-node-row:hover { background: var(--bg-input); }
.folder-link {
  color: var(--fg);
  font-size: 12px;
  text-decoration: none;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.folder-link:hover { text-decoration: underline; color: var(--link); }
.folder-only-btn {
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 11px;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}
.folder-only-btn:hover { color: var(--link); }
.folder-only-btn.active { color: var(--link); }

/* Tag group headers in sidebar */
.tag-group { margin-bottom: 2px; }
.tag-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fg-dim);
}
.tag-group-header:hover { color: var(--fg); }
.cat-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}
.cat-name { flex: 1; }
.cat-collapse {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 10px;
}
.tag-list-sidebar { list-style: none; margin: 0; padding: 0; }
.tag-link { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Folder tree section */
#folder-tree-section, #saved-searches-section, #source-labels-section {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 4px;
}
#folder-tree-section:first-child, #saved-searches-section:first-child,
#source-labels-section:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
/* Detail browse sections lazy-load into their own wrapper, so the first one
   drops its :first-child divider; restore it under the per-image tags. */
#tags-section + #detail-sidebar-browse {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 4px;
}
.sidebar-section-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
}
#folder-tree-toggle, #source-labels-toggle, #tags-toggle {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 10px;
}
.folder-tree { list-style: none; margin: 0; padding: 0 0 0 4px; }
.folder-children { list-style: none; margin: 0; padding: 0 0 0 12px; }
.folder-toggle-btn[data-path] {
  background: none;
  border: none;
  padding: 0;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 10px;
  width: 12px;
  flex-shrink: 0;
}
.folder-spacer { display: inline-block; width: 12px; }
.folder-link.active { color: var(--link); }
.saved-search-list-sidebar { list-style: none; margin: 0; padding: 0; }
.saved-search-entry {
  padding: 2px 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.saved-search-link { color: var(--fg-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; }
.saved-search-link:hover { color: var(--fg); text-decoration: none; }
.saved-search-del {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.saved-search-del:hover { color: var(--error); }

.tag-add-btn {
  background: none;
  border: none;
  padding: 0;
  width: 14px;
  text-align: center;
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.tag-add-btn:hover { color: var(--link); }
.tag-add-btn.active { color: var(--link); }

/* Gallery grid */
#gallery-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
#search-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
#search-form > div:first-child {
  flex: 1;
  min-width: 0;
}
.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.search-input-wrap::before {
  content: ">";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
}
#search-input {
  width: 100%;
  padding: 6px 10px 6px 26px;
  background: var(--bg-input);
  border: 1px solid var(--border);
}
#search-input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
#gallery-header input,
#gallery-header button,
#gallery-header select {
  height: 28px;
  padding: 0 10px;
  line-height: 1;
  box-sizing: border-box;
}
#gallery-header #search-input { padding-left: 26px; }
.result-count { color: var(--fg); }
#save-search-area { flex-shrink: 0; }

.status-bar {
  font-size: 12px;
  color: var(--fg-dim);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.thumb-card.focused { border-color: var(--accent); outline: 4px solid var(--accent); outline-offset: -2px; }

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.thumb-cluster-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 2px 4px;
  color: var(--fg-dim);
}
.thumb-cluster-rule {
  flex: 1;
  height: 0;
  border-top: 1px dashed var(--border);
}
.thumb-cluster-label { white-space: nowrap; }
.thumb-cluster-range { color: var(--fg-dim); text-decoration: none; border-bottom: 1px dotted var(--fg-dim); }
.thumb-cluster-range:hover { color: var(--link); border-bottom-color: var(--link); }
.thumb-cluster-select { white-space: nowrap; }

.thumb-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
}
.thumb-card:hover { border-color: var(--accent); }
.thumb-card a { display: block; }

.thumb-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--bg-input);
}

.thumb-grid.fit-natural .thumb-img { object-fit: contain; }

.thumb-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-dim);
  font-size: 24px;
  cursor: help;
}
.thumb-fail {
  color: var(--fg-dim);
  cursor: help;
}

.thumb-overlay {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
}

.thumb-checkbox {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}
.thumb-card:hover .thumb-checkbox,
.thumb-checkbox:checked,
.batch-active .thumb-checkbox {
  opacity: 1;
  pointer-events: auto;
}

.badge {
  background: rgba(0,0,0,0.7);
  color: var(--fg);
  padding: 2px 4px;
  border: 1px solid var(--border);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 12px;
  height: 12px;
}
.badge svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.badge-inbox { font-size: 10px; line-height: 1; width: auto; }
.fav-heart { color: var(--fav); }
.badge-missing { color: var(--warning); }
.badge-video {
  color: var(--warning);
  font-size: 0;
}
.badge-video::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
  margin-left: 1px;
}
.badge-filesize {
  font-size: 10px;
  line-height: 1;
  width: auto;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
  font-size: 13px;
}
.pagination a, .pagination span, .pagination button.page-jump {
  padding: 4px 8px;
  border: 1px solid var(--border);
  color: var(--fg);
  line-height: 1.4;
}
.pagination button.page-jump {
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.pagination a:hover, .pagination button.page-jump:hover { border-color: var(--accent); text-decoration: none; }
.pagination .current { border-color: var(--accent); color: var(--link); }

/* Batch action bar */
#batch-bar {
  display: none;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
#batch-bar button { white-space: nowrap; flex-shrink: 0; }
#batch-bar .btn-autotag { padding: 4px 8px; font-size: inherit; line-height: normal; }
#batch-bar .monloader-accent { border-color: var(--indigo); background: var(--bg-surface); }
#batch-bar .monloader-accent:hover { color: var(--bg); background: var(--indigo); border-color: var(--indigo); }
#batch-bar.visible { display: flex; }
#batch-delete-form { display: flex; gap: 8px; flex: 1; align-items: center; flex-wrap: wrap; }
.batch-bar-right { margin-left: auto; }
.batch-bar-sep { display: inline-block; width: 1px; height: 22px; background: var(--fg-dim); margin: 0 12px; align-self: center; flex-shrink: 0; }

.actions-menu { list-style: none; margin: 0 0 12px 0; padding: 0; min-width: 320px; }
.actions-menu-item { margin: 0; }
.actions-menu-item button {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px; font: inherit; line-height: 1.4; cursor: pointer;
}
.actions-menu-item button:not(.btn-danger) {
  background: var(--bg-surface);
  border: 1px solid var(--border);
}
.actions-menu-item button:not(.btn-autotag):not(.btn-danger):not(.monloader-accent) { color: var(--fg); }
.actions-menu-item button.btn-autotag { color: var(--tagger); }
.actions-menu-item button.monloader-accent { color: var(--indigo); }
.actions-menu-item button:focus { outline: none; }
.actions-menu-item button:not(.btn-autotag):not(.btn-danger):not(.monloader-accent):hover,
.actions-menu-item button:not(.btn-autotag):not(.btn-danger):not(.monloader-accent):focus { border-color: var(--fg-dim); }
.actions-menu-item button.btn-autotag:hover,
.actions-menu-item button.btn-autotag:focus {
  background: var(--tagger); color: var(--bg); border-color: var(--tagger);
}
.actions-menu-item button.monloader-accent:hover,
.actions-menu-item button.monloader-accent:focus {
  background: var(--indigo); color: var(--bg); border-color: var(--indigo);
}
.actions-menu-sep { height: 1px; background: var(--border); margin: 6px 0; }

/* Detail page */
.detail-main {
  padding: 16px;
  overflow-y: auto;
}

.meta-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 12px;
  margin-bottom: 16px;
}
.meta-table th, .meta-table td {
  padding: 4px 8px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  word-break: break-all;
  overflow-wrap: break-word;
}
.meta-table th { color: var(--fg-dim); width: 100px; word-break: normal; }

.meta-table tr:has(> th) {
  display: flex;
  align-items: baseline;
  padding: 3px 0;
  position: relative;
  overflow: hidden;
}
.meta-table tr:has(> th) th,
.meta-table tr:has(> th) td {
  border: none;
  padding: 2px 0;
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.meta-table tr:has(> th) th {
  width: auto;
  min-width: 90px;
  font-weight: normal;
  padding-right: 6px;
}
.meta-table tr:has(> th) td {
  color: var(--fg);
  padding-left: 6px;
}
.meta-table tr:has(> th)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  height: 1px;
  background-image: radial-gradient(circle, var(--border) 0.6px, transparent 0.7px);
  background-size: 4px 1px;
  background-repeat: repeat-x;
  pointer-events: none;
}

details summary {
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 12px;
  padding: 4px 0;
  user-select: none;
}
details summary:hover { color: var(--fg); }

.tag-category-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fg-dim);
  margin: 8px 0 4px;
}
/* Tags and Artists pages */
.count-badge {
  font-size: 12px;
  color: var(--fg-dim);
  font-weight: normal;
  margin-left: 4px;
}
.alias-badge {
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid var(--fg-dim);
  color: var(--fg-dim);
  margin-left: 4px;
}
.origin-chip {
  font-size: 10px;
  padding: 1px 4px;
  border: 1px solid var(--fg-dim);
  color: var(--fg);
  white-space: nowrap;
  display: inline-block;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.origin-chip.origin-ptr { color: var(--indigo); border-color: var(--indigo); }
.origin-chip.origin-auto { color: var(--tagger); border-color: var(--tagger); }
.origin-user { color: var(--fg-dim); }
.tag-date { color: var(--fg-dim); font-size: 12px; white-space: nowrap; }
.tag-name-cell a { text-decoration: none; }
.tag-name-cell a:hover { text-decoration: underline; }
.tag-table .tag-name-cell { min-width: 160px; }
.tag-table .tag-name-builtin { white-space: nowrap; }
.tag-select-col { width: 26px; text-align: center; }
.tag-table th:nth-child(4), .tag-table td:nth-child(4) { width: 110px; }
.tag-table th:nth-child(5), .tag-table td:nth-child(5) { width: 60px; }
.tag-table th:nth-child(6), .tag-table td:nth-child(6) { width: 85px; }
.tag-table th:nth-child(7), .tag-table td:nth-child(7) { width: 90px; }
.tag-table th:nth-child(8), .tag-table td:nth-child(8) { width: 100px; white-space: nowrap; }
#tag-batch-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--fg-dim);
  background: var(--bg-surface);
  padding: 6px 10px;
  margin-bottom: 10px;
  font-size: 12px;
}
#tag-batch-bar[hidden] { display: none; }
#tag-batch-count { color: var(--fg); }
.tag-batch-spacer { flex: 1; }
.tag-detail-crumb {
  font-size: 12px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 12px;
}
#tag-detail-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tag-detail-actions { display: inline-flex; gap: 6px; margin-left: auto; }
.tag-detail-meta { color: var(--fg-dim); font-size: 12px; }
.tag-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: start; }
.tag-detail-inbound  { border-right: 1px solid var(--border); padding-right: 16px; margin-right: -16px; }
.tag-detail-outbound { border-left: 1px solid var(--border); padding-left: 16px; margin-left: -17px; }
.tag-detail-section { margin: 14px 0; }
.tag-detail-section h3 { font-size: 13px; margin-bottom: 6px; }
.tag-detail-section h3:not(:first-child) { margin-top: 14px; }
.tag-applied-table { width: auto; min-width: 280px; }
.tag-canonical-card { border: 1px solid var(--border); padding: 6px 10px; display: inline-block; font-size: 13px; }
.tag-usage-graph {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-dim);
  background: var(--bg-input);
  border: 1px solid var(--border);
  padding: 8px 10px;
  overflow-x: auto;
}
.tag-usage-graph .usage-bar { color: var(--tagger); }
.tag-recent-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-recent-strip img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--border); }
.tag-implied-more { color: var(--fg-dim); }
.th-sort { color: var(--fg-dim); text-decoration: none; }
.th-sort:hover { color: var(--fg); }
.sort-arrow { font-size: 9px; margin-left: 3px; }
.tag-implied-cell {
  max-width: 380px;
  min-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.tag-implied-cell a { text-decoration: none; }
.tag-implied-cell a:hover { text-decoration: underline; }
.tag-row:hover { background: var(--bg-surface); }
.no-results { color: var(--fg-dim); font-style: italic; padding: 8px; }
/* Bordered data tables */
.tag-table, .cat-table, .help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tag-table th, .tag-table td,
.cat-table th, .cat-table td,
.help-table th, .help-table td {
  padding: 4px 8px;
  border: 1px solid var(--border);
  text-align: left;
}
.tag-table th, .cat-table th, .help-table th { color: var(--fg-dim); }
.cat-table { margin-bottom: 10px; }
.help-table { margin-bottom: 12px; }
.tag-table tr:hover { background: var(--bg-surface); }

/* Settings nav */
.settings-nav, .help-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.settings-nav a, .help-nav a { color: var(--fg-dim); font-size: 12px; padding: 3px 8px; text-decoration: none; }
.settings-nav a:hover, .help-nav a:hover { color: var(--fg); }

/* Settings */
.settings-section {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 16px;
  min-width: 0;
}
.table-scroll { overflow-x: auto; max-width: 100%; }
.settings-section h2 {
  font-size: 14px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-section-header h3 { margin: 0; }
.flash { padding: 6px 12px; font-size: 12px; margin: 8px 0; }
.flash-ok { color: var(--success); border: 1px solid var(--success); background: transparent; }
.flash-warn { color: var(--warning); border: 1px solid var(--warning); background: transparent; }
.flash-err { color: var(--error); border: 1px solid var(--error); background: transparent; }
.pairing-pending { border: 1px solid var(--accent); padding: 8px 10px; margin: 8px 0; }
.pairing-pending-msg { color: var(--accent); margin-bottom: 8px; }

.settings-sub { margin-bottom: 12px; }
.settings-sub h4 { font-size: 12px; color: var(--fg-dim); margin-bottom: 6px; }
.settings-cols { display: flex; gap: 24px; flex-wrap: wrap; }
.settings-cols > .settings-sub { flex: 1 1 240px; min-width: 0; }
.settings-cols > .field { flex: 1 1 220px; min-width: 0; }
.settings-actions { text-align: right; margin-top: 12px; }
.schedule-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 24px; margin-bottom: 12px; }
.schedule-grid .field { margin-bottom: 0; }
.schedule-time-input { width: 6ch; text-align: center; font-family: monospace; }
.range-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; }
.range-row > label { grid-column: 1; font-size: 12px; }
.range-row > output { grid-column: 2; text-align: right; font-family: monospace; color: var(--fg-dim); min-width: 3em; }
.range-slider-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.range-slider-row input[type="range"] { flex: 1; min-width: 0; }
.range-bound { font-size: 11px; color: var(--fg-dim); font-family: monospace; min-width: 2em; }
.range-bound-min { text-align: right; }
.range-bound-max { text-align: left; }
.range-row .field-hint { grid-column: 1 / -1; }

.tags-filter-row { display: flex; gap: 4px; align-items: center; padding: 0 8px; }
.tags-filter-row input[type="text"] { flex: 1; min-width: 0; }
.filter-group { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0; padding: 0 8px; }
.filter-group .filter-label { font-size: 11px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 1px; margin-right: 6px; flex-basis: 100%; }
.filter-btn, .browse-tab { font-size: 12px; padding: 2px 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--fg-dim); text-decoration: none; line-height: 1.4; }
.filter-btn:hover, .browse-tab:hover { color: var(--fg); border-color: var(--fg-dim); text-decoration: none; }
.filter-btn.active, .browse-tab-active { color: var(--fg); border-color: var(--accent); }
.field { margin-bottom: 8px; }
.field label { display: block; font-size: 12px; color: var(--fg-dim); margin-bottom: 2px; }
.radio-row { display: flex; gap: 16px; }
.radio-row label { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 0; }
.field input[type="text"], .field input[type="number"], .field input[type="password"] { width: 100%; max-width: 300px; }
dialog .field input[type="text"], dialog .field input[type="number"] { max-width: 360px; }
dialog .series-input-wrap { max-width: 360px; }
/* The monloader URL pair sits two-up and holds long URLs, so its inputs fill the column. */
#monloader .settings-cols .field input[type="text"] { max-width: none; }
/* Settings fields: a brighter label anchors each field and the hint hugs its
   control, so it is unambiguous which hint and control belong to which field. */
#settings-page .field { margin-bottom: 16px; }
#settings-page .schedule-grid .field { margin-bottom: 0; } /* grid spaces via gap */
#settings-page .field > label { color: var(--fg); }
#settings-page .field-hint:not([hidden]) { display: block; margin: 3px 0 0; }
/* Hairline between stacked fields; the child combinator skips the flex-row
   (settings-cols) and grid (schedule) layouts so a rule never lands in a row. */
#settings-page .settings-sub > .field { margin-bottom: 12px; }
#settings-page .settings-sub > .field + .field { border-top: 1px solid var(--border); padding-top: 12px; }
.add-cat-form { display: flex; gap: 6px; align-items: stretch; }
.add-cat-form input[type="text"] { flex: 1; max-width: 200px; }
.add-cat-form input[type="color"] { padding: 0; width: 40px; }
/* Help page */
#help-page ul { padding-left: 20px; margin-bottom: 12px; }
#help-page ul li { list-style: disc; margin-bottom: 4px; }
.help-sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.help-columns { columns: 2 340px; column-gap: 24px; }
.help-group { break-inside: avoid; margin-bottom: 12px; }
.help-group h4 { margin-top: 0; }
#help-page .help-table { font-size: 12px; margin-bottom: 0; }
#help-page .help-table th, #help-page .help-table td { padding: 2px 6px; }
kbd {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-family: inherit;
  font-size: 12px;
}
kbd.kbd-link { cursor: pointer; }
kbd.kbd-link:hover { border-color: var(--accent); color: var(--link); }

#shortcuts-help { width: min(1400px, 95vw); }
#shortcuts-help h3 { margin: 0 0 6px 0; font-size: 13px; }
#shortcuts-help h4 { margin: 0 0 2px 0; font-size: 11px; color: var(--fg-dim); font-weight: normal; text-transform: uppercase; letter-spacing: 0.05em; }
.shortcuts-help-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 24px; font-size: 12px; line-height: 1.35; }
.shortcuts-help-grid section { break-inside: avoid; }
.shortcuts-help-grid table { border-collapse: collapse; width: 100%; }
.shortcuts-help-grid td { padding: 0 6px 0 0; vertical-align: top; }
.shortcuts-help-grid td:first-child { white-space: nowrap; color: var(--fg-dim); }

.chord-leader-hint {
  position: fixed;
  bottom: 32px;
  left: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--fg-dim);
  z-index: 9999;
}

/* Login */
.login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: var(--bg);
}
.login-box {
  width: 320px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 32px;
}
.login-box h1 { margin-bottom: 24px; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }
.login-box input { width: 100%; margin-bottom: 12px; }
.login-box button { width: 100%; padding: 8px; }
.login-error { color: var(--error); font-size: 12px; margin-bottom: 12px; }

/* Dialog */
dialog {
  background: var(--bg-surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 24px;
  min-width: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  overflow: visible;
}
dialog::backdrop { background: rgba(0,0,0,0.7); }
dialog p { margin-bottom: 16px; }

#batch-category-dialog, #batch-alias-dialog, #batch-imply-dialog,
#batch-merge-dialog, #tag-create-dialog, #alias-create-dialog,
#rename-dialog, #delete-tags-search-dialog, #ptr-lookup-search-dialog,
#detail-category-dialog, #detail-alias-dialog { max-width: 440px; }

#tag-create-dialog .field select,
#alias-create-dialog .field select { width: 100%; max-width: 360px; }

/* Source edit dialog: fields span the dialog so both edges line up. */
#source-dialog { min-width: 480px; }
#source-dialog .field input[type="text"],
#source-dialog .field input[type="url"],
#source-dialog .series-input-wrap { width: 100%; max-width: none; }

/* Commentary edit dialog: same full-width fields as the source dialog. */
#commentary-dialog { min-width: 480px; }
#commentary-dialog .field input[type="text"],
#commentary-dialog .field textarea { width: 100%; max-width: none; }

#original-dialog, #image-original-dialog { min-width: 480px; }
#original-dialog .field textarea,
#image-original-dialog .field input[type="url"] { width: 100%; max-width: none; }
#original-dialog .field textarea { height: 2.2em; }

/* Source type badge */
.source-badge {
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid;
  display: inline-block;
}
.source-badge-sub { color: var(--fg-dim); border-color: var(--border); }

.detail-body {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.detail-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

.detail-meta-panel {
  width: 100%;
  border: 1px solid var(--border);
  padding: 0;
  font-size: 12px;
  overflow: hidden;
}
.detail-meta-panel > summary {
  padding: 6px 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: var(--fg-dim);
  list-style: none;
}
.detail-meta-panel > summary::-webkit-details-marker { display: none; }
.detail-meta-panel > summary::before { content: '▶ '; }
.detail-meta-panel[open] > summary::before { content: '▼ '; }
.detail-meta-panel > summary:hover { color: var(--fg); }
.detail-meta-content {
  padding: 12px;
  overflow-y: auto;
  max-height: 80vh;
}

.detail-topbar {
  display: flex;
  align-items: center;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 12px;
  gap: 24px;
}
.detail-nav-group {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-topbar-right {
  width: 500px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#pages-grid-page .detail-topbar-right,
#relations-walker-page .detail-topbar-right {
  width: auto;
  justify-content: flex-end;
}
.nav-arrow {
  color: var(--fg-dim);
  font-size: 13px;
  text-decoration: none;
  padding: 2px 8px;
  border: 1px solid var(--border);
  line-height: 1.4;
}
.nav-arrow:hover { color: var(--fg); border-color: var(--fg-dim); text-decoration: none; }
.nav-arrow-placeholder { visibility: hidden; }
.back-link { color: var(--link); font-size: 13px; text-decoration: none; flex-shrink: 0; }
.back-link:hover { text-decoration: underline; }
.detail-actions { display: flex; gap: 8px; align-items: center; }
.detail-actions .btn-sm { font-size: 13px; line-height: 1.4; }
.detail-filename {
  color: var(--fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.btn-autotag {
  color: var(--tagger);
  border: 1px solid var(--tagger);
  background: var(--bg-surface);
  padding: 2px 8px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
}
.btn-autotag:hover { color: var(--bg); background: var(--tagger); border-color: var(--tagger); }
.btn-hash-lookup {
  border: 1px solid var(--indigo);
  background: var(--bg-surface);
  padding: 2px 8px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
}
.btn-hash-lookup:hover { color: var(--bg); background: var(--indigo); border-color: var(--indigo); }
.danger-zone-trailing { margin-left: auto; }

.btn-fav, .btn-inbox {
  background: none;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  padding: 2px 8px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
}
.btn-fav:hover { color: var(--fav); border-color: var(--fav); }
.btn-fav.active { color: var(--fav); border-color: var(--fav); }
.btn-inbox:hover { color: var(--fg); border-color: var(--fg-dim); }
.btn-inbox.active { color: var(--fg); border-color: var(--accent); }

.detail-media {
  text-align: center;
  margin-bottom: 16px;
}
.detail-img {
  min-width: 200px;
  max-width: 100%;
  max-height: 70vh;
  display: inline-block;
  border: 1px solid var(--border);
}
.detail-video {
  max-width: 100%;
  max-height: 70vh;
  display: inline-block;
}

.detail-media-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.annotation-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.annotation-box {
  position: absolute;
  border: 1px solid var(--accent);
  pointer-events: auto;
  cursor: help;
}
.annotation-box .annotation-body {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 120px;
  max-width: 320px;
  padding: 4px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  line-height: 1.3;
  font-size: 12px;
  text-align: left;
}
.annotation-box:hover .annotation-body,
.annotation-box:focus-within .annotation-body { display: block; }
.detail-media.annotations-hidden .annotation-overlay { display: none; }
.annotation-controls { margin-top: 6px; }
.annotation-box.ann-highlight { border-color: var(--link); border-width: 2px; }
.annotation-box.ann-highlight .annotation-body { display: block; }
.annotation-entry { cursor: help; }
.operator-annotation-list { margin-top: 8px; margin-left: 12px; }

.detail-commentary {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.commentary-block {
  border-left: 2px solid var(--border);
  padding-left: 10px;
  min-width: 0;
}
.commentary-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.commentary-label { color: var(--fg-dim); }
.commentary-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.meta-annotation-body { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.annotation-coord-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.annotation-coord-row input { width: 100%; min-width: 0; }
#annotation-dialog .field textarea { width: 100%; }

.mono-small { font-family: monospace; font-size: 11px; }
.sha-truncated { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: baseline; }
.meta-table tr:has(> th) td:has(.sha-truncated),
.meta-table tr:has(> th) td.meta-path { flex: 1 1 auto; min-width: 0; }
.meta-table tr:has(> th) td:has(.sha-truncated) { display: flex; align-items: baseline; }
.meta-table tr:has(> th) td.meta-path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-table tr:has(> th) td:has(.sha-truncated) .copy-flash { flex: 0 0 auto; }
.sha-copyable {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sha-copyable:hover { color: var(--link); }
.copy-flash {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--success);
}
.copy-flash[hidden] { display: none; }
.text-warning { color: var(--error); }

/* Generation metadata details */
.gen-details { margin-bottom: 12px; }
.gen-text { white-space: pre-wrap; font-family: monospace; font-size: 11px; margin: 0; max-height: 200px; overflow-y: auto; }
.code-block { background: var(--bg-surface); border: 1px solid var(--border); padding: 6px 8px; margin: 4px 0 8px; font-size: 11px; white-space: pre-wrap; word-break: break-all; max-height: 200px; overflow-y: auto; }
.code-block-label { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.code-block-label > .code-block-copy { margin-left: auto; }
.node-list { max-height: 400px; overflow-y: auto; margin-top: 6px; font-size: 11px; }
.node-entry { border-top: 1px solid var(--border); padding: 4px 0; }
.node-entry:first-child { border-top: none; }
.node-header { color: var(--fg); margin-bottom: 2px; }
.node-key { color: var(--fg-dim); }
.node-title { font-weight: bold; }
.node-class { color: var(--fg-dim); font-size: 10px; }
.node-params { width: calc(100% - 8px); border-collapse: collapse; margin-left: 8px; }
.node-param-name { color: var(--fg-dim); padding-right: 8px; white-space: nowrap; vertical-align: top; width: 30%; }
.node-param-value { color: var(--fg); word-break: break-word; }
.node-ref { color: var(--link); font-style: italic; }
.node-ref-link { color: inherit; text-decoration: none; }
.node-ref-link:hover { text-decoration: underline; }
.node-entry:target { background: var(--bg-surface); }
.long-value > summary {
  cursor: pointer;
  color: var(--fg-dim);
  list-style: none;
  word-break: break-word;
}
.long-value > summary::before { content: '▶ '; color: var(--link); }
.long-value[open] > summary::before { content: '▼ '; }
.long-value[open] > summary { color: var(--fg); }
.long-value-full {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: monospace;
  font-size: 11px;
  margin: 4px 0 0;
  max-height: 320px;
  overflow-y: auto;
  color: var(--fg);
}
.gen-hash-link { color: var(--link); font-family: monospace; margin-left: 6px; }
.gen-hash-link:hover { text-decoration: underline; }

/* Tag editor section */
.tag-editor-section { margin-bottom: 16px; }
.btn-sm {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}
.btn-sm:hover { border-color: var(--fg-dim); }
a.btn-sm { display: inline-block; text-decoration: none; line-height: normal; }
a.btn-sm:hover { text-decoration: none; }
.btn-sm.monloader-accent { border-color: var(--indigo); }
.btn-sm.monloader-accent:hover { color: var(--bg); background: var(--indigo); border-color: var(--indigo); }
.btn-link-accent {
  background: none;
  border: none;
  padding: 0;
  color: var(--link);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.btn-link-accent:hover { text-decoration: underline; }
/* Reserved accent for controls that talk to monloader (fetch-from-source),
   so the operator reads them at a glance as "this reaches out over the LAN". */
.monloader-accent { color: var(--indigo); }
.fetch-status:empty { display: none; }

.fetch-status { margin-bottom: 12px; overflow-wrap: anywhere; }
.fetch-status-msg { font-size: 12px; }
.lookup-miss-trail { margin: 4px 0; padding-left: 14px; list-style: none; }
.lookup-miss-trail li::before { content: "- "; }
.btn-danger {
  color: var(--fg);
  border-color: var(--accent);
  background: var(--accent);
}
.btn-danger:hover { border-color: var(--fg); }
.btn-warning { --btn-accent: var(--warning); }
.btn-success { --btn-accent: var(--success); }
.btn-purple  { --btn-accent: var(--indigo); }
.btn-warning, .btn-success, .btn-purple {
  color: var(--btn-accent);
  border-color: var(--btn-accent);
  background: var(--bg);
}
.btn-warning:hover, .btn-success:hover, .btn-purple:hover {
  background: var(--btn-accent);
  color: var(--bg);
  border-color: var(--btn-accent);
}
.btn-danger:disabled, .btn-danger[disabled],
.btn-warning:disabled, .btn-warning[disabled],
.btn-success:disabled, .btn-success[disabled],
.btn-purple:disabled, .btn-purple[disabled] {
  background: var(--bg-surface);
  border-color: var(--border);
}
.btn-danger:disabled:hover, .btn-danger[disabled]:hover,
.btn-warning:disabled:hover, .btn-warning[disabled]:hover,
.btn-success:disabled:hover, .btn-success[disabled]:hover,
.btn-purple:disabled:hover, .btn-purple[disabled]:hover {
  background: var(--bg-surface);
  color: var(--fg-dim);
  border-color: var(--border);
}
/* Tag list partial */
.tag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.tag-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.tag-item::before { content: "["; }
.tag-item::after  { content: "]"; }
.tag-item { max-width: 100%; }
.tag-item.focused { outline: 1px solid var(--accent); outline-offset: 2px; }
.tag-chip-name {
  color: inherit;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: bottom;
}
.tag-chip-name:hover { text-decoration: underline; }
.auto-conf { font-size: 10px; color: var(--fg-dim); margin-left: 2px; }
.tag-remove-btn {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1;
}
.tag-remove-btn:hover { color: var(--warning); }
.no-tags { color: var(--fg-dim); font-size: 12px; font-style: italic; }

/* Tag editor - add form and suggestions */
.add-tag-form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.add-tag-form input { flex: 1; }
.add-tag-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.add-tag-input-wrap input { width: 100%; }
.series-input-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
}
.series-input-wrap input { width: 100%; }
.suggest-dropdown.series-suggest-dropdown,
.suggest-dropdown.tag-suggest-dropdown,
#search-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 200;
}
#search-suggest { z-index: 100; }
.series-suggest-dropdown .suggest-list,
.tag-suggest-dropdown .suggest-list,
#search-suggest .suggest-list {
  position: static;
  width: 100%;
  min-width: unset;
}
#search-suggest .suggest-list { max-height: 60vh; }
.suggest-dropdown {
  position: relative;
}
.suggest-list {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  z-index: 200;
  min-width: 220px;
  max-height: 200px;
  overflow-y: auto;
}
.suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 3px 8px;
  font-size: 12px;
  background: var(--bg-surface);
  cursor: pointer;
  text-align: left;
}
.suggest-item:hover { background: var(--bg-input); }
.suggest-dropdown.suggest-fresh .suggest-item:hover { background: var(--bg-surface); }
.suggest-name { white-space: nowrap; }
.suggest-description { flex: 1; color: var(--fg-dim); font-size: 11px; font-style: italic; overflow: hidden; text-overflow: ellipsis; }
.suggest-count { color: var(--fg-dim); font-size: 11px; }

.duplicates-section { margin-bottom: 16px; }
.duplicates-section h3 { font-size: 13px; margin-bottom: 8px; }
.duplicates-list { list-style: none; padding: 0; margin: 0; }
.duplicates-entry {
  border: 1px solid var(--border);
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--bg-surface);
}
.duplicates-path {
  word-break: break-all;
  margin-bottom: 6px;
}
.duplicates-actions {
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: stretch;
  white-space: nowrap;
}
.duplicates-actions form { display: inline-flex; }
.duplicates-actions .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9em;
  height: 22px;
  box-sizing: border-box;
  line-height: 1;
}
.btn-canonical {
  border-color: var(--success);
  color: var(--success);
  background: transparent;
  cursor: default;
}

/* Danger zone */
.danger-zone { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Metadata column: wraps prev/next nav + metadata panel */
.detail-meta-col {
  width: 500px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.detail-meta-nav { display: flex; gap: 8px; align-items: center; }
.detail-nav-sep { color: var(--fg-dim); font-size: 13px; user-select: none; flex-shrink: 0; }

/* Detail sidebar inner */
.detail-sidebar-inner { padding: 8px 0; }
.detail-tag-groups { margin-bottom: 12px; }
.auto-dot { color: var(--fg-dim); font-size: 14px; width: 8px; flex-shrink: 0; text-align: center; }
.auto-dot-spacer { display: inline-block; width: 8px; flex-shrink: 0; }
.tag-list-divider { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }
.tag-list-added-title { font-size: 11px; color: var(--fg-dim); margin: 4px 0 2px; font-weight: normal; }
.tag-list-added { margin-top: 0; }
.tag-source-group { margin-bottom: 4px; }
.tag-source-title { font-size: 11px; color: var(--fg-dim); margin: 4px 0 2px; font-weight: normal; }

details.tag-source-group[data-source="implied"] > summary { font-style: italic; cursor: pointer; list-style: none; font-size: 11px; color: var(--fg-dim); margin: 4px 0 2px; }
details.tag-source-group[data-source="implied"] > summary::-webkit-details-marker { display: none; }
details.tag-source-group[data-source="implied"] > summary::before { content: "▶ "; display: inline-block; }
details.tag-source-group[data-source="implied"][open] > summary::before { content: "▼ "; }
.tag-implied-entry,
.tag-alias-entry { opacity: 0.55; }
.tag-implied-entry:hover,
.tag-alias-entry:hover { opacity: 0.85; }

/* /tags page Implications dialog. */
#implications-dialog { min-width: 480px; }
#implications-dialog .add-tag-form { margin-top: 8px; }

/* /tags page header: dense row of action buttons; danger pinned right. */
#tags-page-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#tags-page-header #btn-delete-tags-search { margin-left: auto; }

.settings-subseparator { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.meta-editable-separator { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
.meta-editable { margin-top: 4px; }

.meta-table tr:has(> th) td:has(.source-list) { flex: 1 1 auto; width: 0; min-width: 0; }
.source-list .collection-item { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.source-list .meta-source-value, .source-list .meta-url-value { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; word-break: normal; }

.maintenance-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.stats-table th, .tagger-table th, .tagger-thresh-table th, .gallery-table th { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border); font-weight: normal; color: var(--fg-dim); }
.maintenance-table td, .stats-table td, .tagger-table td, .gallery-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.maintenance-table td:last-child { text-align: right; white-space: nowrap; }

.stats-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.stats-table td:last-child, .stats-table th:last-child { white-space: nowrap; }
.stats-table td:last-child {
  text-align: right;
  min-width: 7em;
  font-variant-numeric: tabular-nums;
}
.stats-table th.stats-d1 { padding-left: 24px; }
.stats-table th.stats-d2 { padding-left: 44px; }
.stats-table th.stats-d3 { padding-left: 64px; }
.stats-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
@media (max-width: 900px) {
  .stats-cols { grid-template-columns: 1fr; }
}


.confirm-dialog-danger { color: var(--error); font-size: 12px; margin-top: 4px; }
.confirm-dialog-danger:empty { display: none; }
.tagger-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
section#tagger .tagger-table th:nth-child(1),
section#tagger .tagger-table td:nth-child(1) { width: 200px; max-width: 200px; }
section#tagger .tagger-table th:nth-child(2),
section#tagger .tagger-table td:nth-child(2),
section#tagger .tagger-table th:nth-child(3),
section#tagger .tagger-table td:nth-child(3) { width: 1%; white-space: nowrap; text-align: left; }
section#tagger .tagger-table th:nth-child(4),
section#tagger .tagger-table td:nth-child(4) { width: 360px; min-width: 360px; text-align: left; }
section#tagger .tagger-table th:nth-child(5),
section#tagger .tagger-table td:nth-child(5) { width: 180px; min-width: 180px; text-align: left; }
section#tagger .tagger-table th:nth-child(6),
section#tagger .tagger-table td:nth-child(6),
section#tagger .tagger-table th:nth-child(7),
section#tagger .tagger-table td:nth-child(7) { width: 1%; white-space: nowrap; text-align: right; }
section#tagger .tagger-table th:nth-child(6),
section#tagger .tagger-table td:nth-child(6) { padding-left: 16px; }
section#tagger .tagger-table th:nth-child(6),
section#tagger .tagger-table th:nth-child(7) { padding-right: 17px; }
section#tagger .tagger-table td:nth-child(6) .btn-sm { min-width: 6em; }
section#tagger .tagger-table th:nth-child(7),
section#tagger .tagger-table td:nth-child(7) { min-width: 5em; }
section#tagger .tagger-table .field-hint { display: inline; margin-left: 8px; }
section#tagger .tagger-table .tagger-row-desc { display: block; margin-top: 2px; margin-left: 0; font-size: 11px; }
section#tagger .tagger-table tr.tagger-sep td { color: var(--fg-dim); font-size: 12px; padding-top: 8px; }
.tagger-thresh-dialog { max-width: 600px; }
.tagger-thresh-dialog .field-hint { margin-bottom: 8px; }
.tagger-thresh-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.tagger-thresh-table th { font-size: 12px; }
.tagger-thresh-table td { padding: 4px 8px; vertical-align: middle; }
.tagger-thresh-table th:nth-child(2),
.tagger-thresh-table td:nth-child(2),
.tagger-thresh-table th:nth-child(3),
.tagger-thresh-table td:nth-child(3) { width: 9em; }
.tagger-thresh-table th:nth-child(4),
.tagger-thresh-table td:nth-child(4) { width: 4.5em; text-align: center; }
.tagger-thresh-table input[type=number] { width: 8em; }
.tagger-thresh-table tr.tagger-thresh-global td { border-bottom: 1px solid var(--border); }
.tagger-thresh-table .reset-thresh { visibility: hidden; }
.tagger-thresh-table .reset-thresh.reset-thresh-shown { visibility: visible; }

/* Per-tagger Galleries dialog: tight checkbox list. */
.tagger-gal-dialog { max-width: 480px; }
.tagger-gal-allrow { margin-bottom: 8px; }
.tagger-gal-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.tagger-gal-list { list-style: none; padding: 0; margin: 0 0 12px 0; }
.tagger-gal-list li { padding: 2px 0; }

.gallery-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.gallery-table code { color: var(--fg-dim); font-size: 12px; }
.gallery-info { color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
.gallery-table .gallery-status-cell { white-space: nowrap; min-width: 120px; }
.gallery-path-cell code { overflow-wrap: anywhere; }
.gallery-table th:nth-child(n+5),
.gallery-table td:nth-child(n+5) { width: 1%; white-space: nowrap; text-align: right; }
.gallery-table th:nth-child(n+5) { padding-right: 17px; }
.gallery-table td:nth-child(n+5) > .status-dim { display: block; text-align: center; }
.gallery-switch-list { list-style: none; padding: 0; margin: 0 0 12px 0; }
.gallery-switch-list li { padding: 4px 0; }
.gallery-switch-current { color: var(--fg-dim); }

.btn-set-default { color: #aa66cc; border-color: #aa66cc; }
.btn-set-default:hover { color: #c99bdd; border-color: #c99bdd; }
.status-ok { color: var(--success); }
.status-err { color: var(--warning); }
.status-dim { color: var(--fg-dim); opacity: 0.6; }
.status-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-family: monospace;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.status-badge.status-ok { color: var(--fg); border-color: var(--accent); }
.status-badge.status-off { color: var(--fg-dim); }
.status-badge.status-enabled { color: var(--success); border-color: var(--success); }

dialog .field input[type="text"].upload-wide-input { width: 100%; min-width: 420px; max-width: none; }
.upload-drop-zone {
  border: 1px dashed var(--border);
  padding: 12px;
  background: var(--bg-input);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.upload-drop-prompt { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.upload-drop-zone.drag-over { border-color: var(--fg); background: var(--bg); }
.inbox-upload { margin: 0 0 12px; }
.inbox-upload .upload-drop-zone { min-height: 120px; }
.inbox-upload-footer { padding: 4px 4px 6px 4px; }
.upload-drop-hint { color: var(--fg-dim); font-size: 12px; }
.upload-file-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--fg-dim); }
.upload-file-list li { padding: 1px 0; }
.related-images { margin-top: 12px; }
.related-images h3 { font-size: 13px; margin: 0 0 6px; color: var(--fg-dim); }
.related-entries-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
}
.related-entries-header h3 { margin: 0; }
.related-entries-actions { display: flex; gap: 8px; flex-shrink: 0; }
.relations-actions-row {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  flex-wrap: wrap;
}
.relations-actions-row form { display: inline-flex; }
.relation-edit-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-auto-flow: dense;
  align-items: end;
  gap: 8px;
  margin: 8px 0 12px;
}
.relation-edit-side { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.relation-edit-side h4 { font-size: 12px; color: var(--fg-dim); margin: 0 0 4px; text-align: center; }
.relation-edit-side input[type="number"] { width: 100%; max-width: none; }
.relation-edit-side input[readonly] { color: var(--fg-dim); background: var(--bg-input); }
.relation-edit-thumb-slot {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.relation-edit-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--bg-input);
  display: block;
}
.relation-edit-thumb[hidden] { display: none; }
.relation-edit-swap { display: flex; align-items: center; justify-content: center; padding-bottom: 4px; }
.relation-edit-swap .btn-link-accent { font-size: 16px; padding: 0 4px; }
.relation-edit-grid-swapped > [data-side="self"]  { grid-column: 3; }
.relation-edit-grid-swapped > [data-side="other"] { grid-column: 1; }
.relation-edit-grid-swapped > .relation-edit-swap { grid-column: 2; }
.relation-edit-summary { margin: 4px 0 10px; }

#relations-page h2 { margin: 0 0 12px; }
.relations-hub-cols { display: flex; gap: 24px; flex-wrap: wrap; align-items: stretch; }
.relations-hub-cols > .settings-section { flex: 1 1 320px; min-width: 0; }
.relations-header-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.relations-header-row .btn-sm {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 10px;
  line-height: 1.4;
  text-decoration: none;
}
.relations-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.relations-card { background: var(--bg-input); border: 1px solid var(--border); padding: 8px 12px; position: relative; }
.merge-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-surface);
  border: 1px solid var(--fg-dim);
  padding: 6px 10px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}
.merge-toolbar-count { color: var(--fg); font-size: 12px; }
.merge-select {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  cursor: pointer;
}
.merge-select input[type="checkbox"] { margin: 0; vertical-align: middle; }
.merge-dup-choices { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; max-height: 45vh; overflow-y: auto; }
.merge-dup-choice label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px; border: 1px solid var(--border); background: var(--bg-input); }
.merge-dup-choice label:hover { border-color: var(--accent); }
.merge-dup-thumb { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--border); }
.merge-dup-meta { color: var(--fg-dim); font-size: 12px; }
.relations-card-expand { margin-top: 8px; }
.relations-card-summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 0; list-style: none; }
.relations-card-summary::-webkit-details-marker { display: none; }
.relations-card-summary::before { content: "▶"; color: var(--fg-dim); display: inline-block; width: 1em; }
details[open] > .relations-card-summary::before { content: "▼"; }
.relations-card-summary-thumb { width: 64px; aspect-ratio: 1 / 1; }
.relations-card-summary-thumb img,
.relations-card-thumb img,
.browse-thumb img,
.related-mini-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.relations-card-summary-meta { color: var(--fg-dim); margin-left: 4px; }
.relations-card-thumbs { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.relations-card-thumbs-pair { align-items: center; flex-wrap: nowrap; justify-content: center; }
.relations-card-arrow { color: var(--fg-dim); font-size: 20px; padding: 0 4px; }
.relations-card-thumb { display: block; width: 180px; aspect-ratio: 1 / 1; border: 1px solid var(--border); overflow: hidden; position: relative; }
.relations-card-chain { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 8px; }
.relations-chain-arrow { color: var(--fg-dim); font-size: 20px; line-height: 1; align-self: center; }
.relations-chain-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.relations-card-tree { display: flex; flex-direction: column; margin-top: 8px; }
.relations-tree-row { display: flex; align-items: stretch; min-height: 180px; }
.relations-inline-label { font-size: 12px; color: var(--fg-dim); padding: 0 8px; align-self: center; }
.relations-inline-action { padding: 0 8px; display: inline-flex; align-self: center; }
.relations-tree-prefix { display: flex; align-items: stretch; flex-shrink: 0; }
.relations-tree-trunk { width: 32px; align-self: stretch; position: relative; }
.relations-tree-trunk[data-style="line"]::before,
.relations-tree-trunk[data-style="tee"]::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  border-left: 1px solid var(--fg-dim);
}
.relations-tree-trunk[data-style="elbow"]::before {
  content: ""; position: absolute;
  left: 50%; top: 0; height: 50%;
  border-left: 1px solid var(--fg-dim);
}
.relations-tree-trunk[data-style="tee"]::after,
.relations-tree-trunk[data-style="elbow"]::after {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  width: 16px; border-top: 1px solid var(--fg-dim);
}
.relations-tree-current { border-color: var(--accent); outline: 3px solid var(--accent); outline-offset: -3px; }
.relations-card-thumb:hover { border-color: var(--accent); }
.relations-card-id { position: absolute; bottom: 2px; right: 2px; font-size: 10px; background: rgba(0,0,0,0.7); color: var(--fg); padding: 0 3px; }
.relations-card-date { position: absolute; bottom: 2px; left: 2px; font-size: 10px; background: rgba(0,0,0,0.7); color: var(--fg); padding: 0 3px; font-family: var(--font-mono); }
.relations-card-meta { margin: 6px 0 2px; }

/* Collections page */
.collection-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.collection-find-relations { margin-left: auto; display: flex; align-items: baseline; gap: 4px; }
#collection-order-dialog { width: 594px; max-width: 80vw; }
.collection-order-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; max-height: 60vh; overflow-y: auto; }
.collection-order-tile { position: relative; width: 130px; aspect-ratio: 1 / 1; border: 1px solid var(--border); padding: 0; background: none; cursor: pointer; overflow: hidden; }
.collection-order-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-order-tile:hover { border-color: var(--accent); }
.collection-order-tile.picked { border-color: var(--accent); outline: 1px solid var(--accent); outline-offset: -2px; }
.collection-order-num { position: absolute; top: 2px; left: 2px; font-size: 12px; background: rgba(0,0,0,0.7); color: var(--link); padding: 0 3px; font-family: var(--font-mono); }
.collection-order-num:empty { display: none; }
.collection-order-modes { margin-bottom: 8px; padding: 0; }
.collection-order-fname { position: absolute; bottom: 0; left: 0; right: 0; font-size: 11px; line-height: 1.4; padding: 1px 3px; background: rgba(0,0,0,0.65); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-order-fname:empty { display: none; }
.collection-order-tile .relations-card-id { top: 2px; right: 2px; bottom: auto; }
.collection-preview { display: flex; flex-wrap: wrap; gap: 8px; height: 100px; overflow: hidden; } /* wrap + one-row height clip the strip to a single line, no scroll */
.collection-preview .relations-card-thumb { width: 100px; flex: 0 0 auto; }
.relations-card-original { margin-right: 16px; border-color: var(--accent); }
.relations-cell-original .manga-page-link { border-color: var(--accent); }
.relations-card-original .relations-card-tag,
.relations-cell-original .relations-card-tag {
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--accent);
  color: var(--fg);
  font-size: 10px;
  padding: 0 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.relations-session { padding: 16px; }
.session-order-form { display: inline-flex; gap: 12px; align-items: center; margin-left: auto; }
.session-order-form > .field-hint,
.session-order-form > label { display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.session-order-form label { font-size: 13px; color: var(--fg-dim); }
.session-order-form .field-hint { font-size: 13px; margin: 0; }
.detail-nav-group > .field-hint { font-size: 13px; margin: 0; }
.session-role { margin: 0 0 4px; font-size: 13px; text-align: center; color: var(--fg-dim); align-self: stretch; }
.session-pair { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.session-cells {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
}
.session-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 12px;
  min-width: 0;
}
.session-cell-img {
  display: block;
  width: 100%;
  height: 55vh;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--border);
}
.session-bridge {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  min-width: 180px;
}
.session-distance {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-dim);
}
.session-distance-line { display: block; width: 100%; border-top: 1px dashed var(--border); }
.session-distance-label { align-self: center; white-space: nowrap; }
.session-prompt { text-align: center; color: var(--fg-dim); font-size: 13px; margin: 0 0 8px; }
.session-hint { text-align: center; color: var(--fg-dim); font-size: 12px; margin: 0 0 6px; }
.session-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}
.session-buttons-secondary { margin-top: 8px; }
.session-controls { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.session-buttons button[value="duplicate"]  { border-color: var(--success); color: var(--success); }
.session-buttons button[value="alternate"]  { border-color: var(--indigo);  color: var(--indigo); }
.session-buttons button[value="version"]    { border-color: var(--warning); color: var(--warning); }
.session-buttons button[value="derivative"] { border-color: var(--accent);  color: var(--link); }
.session-buttons button[value="duplicate"]:hover  { background: color-mix(in srgb, var(--success) 18%, transparent); }
.session-buttons button[value="alternate"]:hover  { background: color-mix(in srgb, var(--indigo) 18%, transparent); }
.session-buttons button[value="version"]:hover    { background: color-mix(in srgb, var(--warning) 18%, transparent); }
.session-buttons button[value="derivative"]:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.compare-dialog { max-width: 95vw; }
.compare-stage {
  position: relative;
  width: min(80vw, 1100px);
  user-select: none;
  cursor: ew-resize;
  background: var(--bg);
  overflow: hidden;
}
.compare-slot {
  display: block;
  width: 100%;
}
.compare-slot > img,
.compare-slot > video {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  pointer-events: none;
}
.compare-slot-right {
  position: absolute;
  top: 0; left: 0;
}
.compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: translateX(-1px);
  pointer-events: none;
}
.compare-divider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-surface);
  color: var(--link);
  border: 1px solid var(--accent);
  font-size: 14px;
  padding: 0 4px;
  line-height: 1.4;
  pointer-events: none;
}
.compare-captions {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--fg-dim);
  font-size: 12px;
}
.compare-captions .compare-caption { flex: 1; text-align: center; }
.session-cell-meta { width: 100%; text-align: center; margin-top: 4px; }
.session-cell-filename {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.session-facts { color: var(--fg-dim); margin-top: 4px; }
.relations-compare-table {
  border-collapse: collapse;
  margin: 8px auto;
  font-size: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  max-width: 720px;
  width: 100%;
  table-layout: fixed;
}
.relations-compare-table th,
.relations-compare-table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}
.relations-compare-table thead th { color: var(--fg-dim); font-weight: normal; }
.relations-compare-table thead th:nth-child(2),
.relations-compare-table thead th:nth-child(3) { width: 41%; }
.relations-compare-table tbody th { color: var(--fg-dim); font-weight: normal; width: 18%; }
.relations-compare-table .cmp-win { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--fg); }
.relations-compare-table .cmp-match { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--fg); }
.relations-compare-table .cmp-tag-cell { word-break: break-word; }
.session-empty { padding: 16px; }
@media (max-width: 720px) {
  .session-cells { grid-template-columns: 1fr; }
  .session-bridge { min-width: 0; }
  .session-cells .session-distance { flex-direction: row; }
  .session-cells .session-distance-line { width: 100%; }
}

@media (max-width: 960px) {
  #relations-session-page .detail-topbar { flex-wrap: wrap; row-gap: 8px; }
  #relations-session-page .session-order-form { margin-left: 0; width: 100%; flex-wrap: wrap; }
}

.walker-page-title { font-size: 14px; color: var(--fg); }

#relations-browse-page h2 { margin: 0 0 12px; }
.browse-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.browse-tabs .browse-sort { margin: 0 0 0 auto; padding: 0; }
.browse-tabs .browse-sort .filter-label { flex-basis: auto; }
.browse-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.browse-table th, .browse-table td { padding: 6px 8px; border: 1px solid var(--border); text-align: left; vertical-align: middle; }
.browse-table th { color: var(--fg-dim); background: var(--bg-surface); }
#relations-walker-page .browse-table th:last-child,
#relations-walker-page .browse-table td:last-child { text-align: right; white-space: nowrap; width: 1%; }
.browse-thumb { display: block; width: 80px; aspect-ratio: 1 / 1; border: 1px solid var(--border); overflow: hidden; position: relative; }
.browse-thumb:hover { border-color: var(--accent); }
.related-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.related-mini-card {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--fg-dim);
  font-size: 20px;
  text-align: center;
  line-height: 100%;
}
.related-mini-card:hover { border-color: var(--accent); }
.relation-marker {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--fg);
  font-size: 10px;
  padding: 1px 4px;
  pointer-events: none;
  z-index: 1;
  line-height: 1.2;
}

/* Missing banner (yellow - file absent from disk) */
.missing-banner {
  background: var(--bg-input);
  border: 1px solid var(--warning);
  color: var(--warning);
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Degraded mode banner (gallery path unreadable) */
.degraded-banner {
  background: var(--bg-input);
  border-bottom: 2px solid var(--warning);
  color: var(--warning);
  padding: 6px 16px;
  font-size: 13px;
  text-align: center;
}

/* Responsive */
@media (max-width: 960px) {
  .detail-body { flex-direction: column; }
  .detail-meta-col { width: 100%; }
  .detail-topbar-right { width: auto; }
}

@media (max-width: 600px) {
  .detail-topbar { flex-wrap: wrap; row-gap: 6px; gap: 12px; }
  .detail-nav-group { flex-basis: 100%; }
  .detail-topbar-right { flex-basis: 100%; justify-content: flex-start; }
}

@media (max-width: 768px) {
  #sidebar {
    display: none;
    position: fixed;
    top: var(--topbar-h, 42px);
    left: 0;
    bottom: 0;
    z-index: 200;
  }
  #sidebar.open { display: block; }
  #sidebar-toggle { display: block; }
  #gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (min-width: 769px) {
  #sidebar-toggle { display: none; }
}

@media (max-width: 480px) {
  #topbar { flex-wrap: wrap; height: auto; padding: 4px 8px; gap: 8px; row-gap: 4px; }
  /* When the bar wraps, the nav takes its own row(s). Give each item a
     baseline and butt them together so the active-page underline sits on a
     continuous rule, as it does on the topbar's bottom rule at full width,
     instead of floating under a single label. */
  #nav { flex-basis: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; column-gap: 0; }
  #nav a { border-bottom-color: var(--border); padding-left: 8px; padding-right: 8px; }
  #topbar-right { margin-left: auto; }
  #search-form > div.search-input-wrap { flex-basis: 100%; }
}

#sidebar-toggle {
  background: none;
  border: 1px solid var(--border);
  padding: 4px 8px;
  cursor: pointer;
}

.cat-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Reset the field-hint margin so the "(built-in)" label doesn't inflate the
   flex line and stretch the recolor button taller than other rows. */
.cat-actions .field-hint { margin: 0; }
/* Invisible Rename-width spacer that keeps the recolor button on built-in
   rows aligned with the one on renamable rows. */
.cat-action-spacer { visibility: hidden; }

.tag-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}
.tag-actions .btn-rename-trigger, .tag-actions .tag-action-spacer { width: 6em; }
.tag-action-spacer { visibility: hidden; }
.tag-table th:last-child, .tag-table td:last-child { width: 1%; white-space: nowrap; }
.cat-select {
  font-size: 11px;
  padding: 1px 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--fg);
}

/* Merge dialog */
.merge-arrow { font-size: 18px; margin: 0 4px; }
#merge-dialog { min-width: 340px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Save search area */
#gallery-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#save-search-area { margin-left: auto; }
.save-search-terms { color: var(--link); font-style: italic; }

.suggest-item.kbd-focused { background: var(--bg-input); outline: 1px solid var(--accent); }

/* Field hint text */
.field-hint { font-size: 11px; color: var(--fg-dim); margin: 4px 0 8px; }

.row-inactive { visibility: hidden; }

/* Settings sub sections */
.settings-sub { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }

.manga-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 0 12px;
}
.btn-manga-action {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
}
.btn-manga-action:hover {
  border-color: var(--fg-dim);
  color: var(--fg);
}
.btn-key-hint {
  color: var(--fg-dim);
  font-size: 11px;
  margin-left: 4px;
}
.btn-manga-action:hover .btn-key-hint { color: var(--fg-dim); }

.manga-pill {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--fg);
  font-size: 10px;
  padding: 1px 4px;
  pointer-events: none;
  z-index: 1;
}

.series-pill {
  position: absolute;
  bottom: 4px;
  left: 4px;
  max-width: 60%;
  background: rgba(0, 0, 0, 0.7);
  color: var(--fg);
  font-size: 10px;
  padding: 1px 4px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.related-entries .related-entry-card .series-pill {
  top: 4px;
  right: 4px;
  bottom: auto;
  left: 4px;
  max-width: none;
  text-align: right;
  align-items: flex-end;
}
.series-pill-name {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.reader-body {
  margin: 0;
  background: #000;
  color: var(--fg);
}
body.reader-body #topbar,
body.reader-body #sidebar,
body.reader-body #footer,
body.reader-body #main-layout > aside,
body.reader-body #gallery-status { display: none; }
#reader { display: flex; flex-direction: column; height: 100vh; }
.reader-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; position: relative; }
.reader-img { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; display: block; }
.reader-page-link { display: contents; }
.reader-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  line-height: 1;
  color: var(--fg-dim);
  text-decoration: none;
  background: rgba(0, 0, 0, 0);
  transition: background 0.12s, color 0.12s;
  z-index: 2;
  user-select: none;
}
.reader-side-prev { left: 0; }
.reader-side-next { right: 0; }
.reader-side:hover {
  background: rgba(0, 0, 0, 0.45);
  color: var(--fg);
}
.reader-side-disabled {
  opacity: 0.2;
  pointer-events: none;
}
.reader-bar, .lightbox-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: #111;
  border-top: 1px dashed var(--border);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 12px;
}
.reader-bar { position: sticky; bottom: 0; }
.reader-bar a, .reader-bar button,
.lightbox-bar a, .lightbox-bar button { color: var(--fg-dim); text-decoration: none; background: transparent; border: 0; cursor: pointer; padding: 2px 6px; font: inherit; }
.reader-bar a:hover, .reader-bar button:hover,
.lightbox-bar a:hover, .lightbox-bar button:hover { color: var(--link); }
.reader-counter { border: 1px dashed var(--border); padding: 2px 8px; }
.reader-disabled { opacity: 0.3; padding: 2px 6px; }
.reader-back { margin-right: 0; }
.reader-pages { margin-right: auto; }
.reader-open { margin-left: auto; }

.lightbox-dialog {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  overflow: hidden;
}
.lightbox-dialog[open] { display: flex; flex-direction: column; }
.lightbox-dialog::backdrop { background: rgba(0, 0, 0, 0.85); }
.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.lightbox-stage.grabbing { cursor: grabbing; }
.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.lightbox-zoom { border: 1px dashed var(--border); padding: 2px 8px; }
.lightbox-open { margin-left: auto; }

.manga-pages-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 12px 0;
  margin: 0;
}
.manga-page-cell { margin: 0; }
.manga-page-link {
  display: block;
  position: relative;
  background: var(--bg-input);
  border: 1px solid var(--border);
  text-align: center;
  text-decoration: none;
  color: var(--fg);
}
.manga-page-link:hover { border-color: var(--accent); }
.manga-page-cell.focused .manga-page-link {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.manga-page-thumb { width: 100%; height: auto; display: block; max-height: 180px; object-fit: contain; background: #000; }
.manga-page-num { display: block; font-size: 11px; color: var(--fg-dim); padding: 2px; }
#relations-image-page .manga-pages-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
#relations-image-page .manga-page-thumb {
  aspect-ratio: 1;
  max-height: none;
  object-fit: cover;
}
#relations-image-page .relations-page-thumb-cell {
  width: 180px;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-input);
  text-decoration: none;
  color: var(--fg);
}
#relations-image-page .relations-page-thumb-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
#relations-image-page .relations-page-thumb-num {
  display: block;
  font-size: 11px;
  color: var(--fg-dim);
  padding: 2px;
  text-align: center;
}

/* Comic-info metadata table (mirrors meta-table styling). */
.comic-info-summary { white-space: pre-wrap; }

.copy-tags-preview-body { min-width: 360px; max-width: 520px; }
.copy-tags-preview-groups { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); padding: 6px 8px; }
.copy-tags-preview-group + .copy-tags-preview-group { margin-top: 8px; }
.copy-tags-preview-group h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 2px;
}
.copy-tags-preview-list { list-style: none; margin: 0; padding: 0 0 0 8px; }
.copy-tags-preview-list li { padding: 1px 0; font-size: 12px; }