:root {
  color-scheme: dark;
  --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;
  --monloader:  #88b0d8;
  --tagger:     #7cc4b8;
  --plugin:     #aa66cc;
  --fav:        #e0524d;
  --remove:     #b5666f;
  --alternate:  #9b93e0;
  --scrim:      #000;
  --media-bg:   #000;
  --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; }

pre, code { font-family: var(--font-mono); }

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;
}
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}
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-conn-kill { cursor: pointer; border: 0; padding: 0; appearance: none; -webkit-appearance: none; }
.footer-conn-kill:hover, .footer-conn-kill:focus-visible { outline: 1px solid var(--error); outline-offset: 2px; }
.footer-dot-paused { background: transparent; border: 1px solid var(--fg-dim); box-sizing: border-box; }
.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;
}
/* One optional hue per nav entry. An unset --nav-* leaves --nav-hue
   guaranteed-invalid, so every var() below falls through to the shipped
   value and the default look is unchanged. */
#nav a.nav-images      { --nav-hue: var(--nav-images); }
#nav a.nav-inbox       { --nav-hue: var(--nav-inbox); }
#nav a.nav-categories  { --nav-hue: var(--nav-categories); }
#nav a.nav-tags        { --nav-hue: var(--nav-tags); }
#nav a.nav-collections { --nav-hue: var(--nav-collections); }
#nav a.nav-relations   { --nav-hue: var(--nav-relations); }
#nav a.nav-settings    { --nav-hue: var(--nav-settings); }
#nav a {
  color: var(--nav-hue, 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(--nav-hue, var(--fg)); text-decoration: none; }
#nav a.active { border-bottom-color: var(--nav-hue, var(--accent)); }

#topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-action {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--fg-dim);
  cursor: pointer;
  white-space: nowrap;
}
.topbar-action:hover { color: var(--fg); }

#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: clamp(220px, 16vw, 320px);
  --row-inset: 8px;
  --row-inset-end: 6px;
  --row-gap: 4px;
  --count-gutter: 4ch;
  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 {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--row-gap);
  padding: 1px var(--row-inset-end) 1px var(--row-inset);
  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, .folder-count {
  color: var(--fg-dim);
  font-size: 11px;
  text-align: right;
  min-width: var(--count-gutter);
  flex-shrink: 0;
}

/* Folder tree */
.folder-node-wrap { list-style: none; }
.folder-node-row {
  display: flex;
  align-items: center;
  gap: var(--row-gap);
  padding: 2px var(--row-inset-end) 2px var(--row-inset);
  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 2px;
  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: var(--row-gap);
  padding: 3px var(--row-inset-end) 3px var(--row-inset);
  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,
#folder-tree-toggle, #source-labels-toggle, #tags-toggle,
.folder-toggle-btn[data-path],
.tag-mode-toggle {
  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 0 0 4px; }
.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: var(--row-gap);
  padding: 3px var(--row-inset-end) 3px var(--row-inset);
}
.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] {
  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 var(--row-inset-end) 2px var(--row-inset);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: var(--row-gap);
}
.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,
.tag-remove-btn {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1;
}
.saved-search-del { 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: 220px;
}
.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
}
.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(clamp(140px, (100% - 16px) / 3, 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;
}
@media (hover: none) {
  .thumb-checkbox { opacity: 1; pointer-events: auto; }
}

.badge {
  background: color-mix(in srgb, var(--scrim) 70%, transparent);
  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;
}

.badge-similarity {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 10px;
  line-height: 1;
  width: auto;
  color: var(--tagger);
  z-index: 1;
}
.thumb-card:hover .badge-similarity,
.batch-active .badge-similarity { opacity: 0; }

/* 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(--monloader); background: var(--bg-surface); }
#batch-bar .monloader-accent:hover { color: var(--bg); background: var(--monloader); border-color: var(--monloader); }
#batch-bar.visible { display: flex; }
#plugin-batch-bar {
  display: none;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 10px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--plugin);
}
#plugin-batch-bar.visible { display: flex; }
#batch-delete-form { display: contents; }
.batch-bar-spacer { flex: 1; }
.batch-bar-sep { display: inline-block; width: 1px; height: 22px; background: var(--fg-dim); margin: 0 12px; align-self: center; flex-shrink: 0; }
@media (max-width: 900px) {
  .batch-bar-spacer,
  .batch-bar-sep { flex-basis: 100%; height: 0; overflow: hidden; margin: 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(--monloader); }
.actions-menu-item button:disabled { color: var(--fg-dim); }
.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(--monloader); color: var(--bg); border-color: var(--monloader);
}
.actions-menu-item button:disabled:hover, .actions-menu-item button:disabled:focus {
  background: var(--bg-surface); color: var(--fg-dim); border-color: var(--border);
}
.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 td.meta-prose { word-break: normal; }
.meta-table .btn-link-accent { white-space: nowrap; }

.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 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--fg-dim);
  margin: 8px 0 4px;
  padding: 0 var(--row-inset-end) 0 var(--row-inset);
}
.tag-group-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
/* 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(--monloader); border-color: var(--monloader); }
.origin-chip.origin-auto { color: var(--tagger); border-color: var(--tagger); }
.origin-chip.origin-user { color: var(--fg-dim); }
.origin-user { color: var(--fg-dim); }
.tag-usedby-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-usedby-cell .origin-chip {
  display: inline;
  border: 0;
  padding: 0;
  max-width: none;
  overflow: visible;
}
.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: 85px; max-width: 85px; }
.tag-table th:nth-child(8), .tag-table td:nth-child(8) { width: 90px; }
.tag-table th:nth-child(9), .tag-table td:nth-child(9) { 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;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tag-detail-crumb p { margin: 0; }
#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: minmax(0, 1fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
.tag-detail-sep { border: none; border-top: 1px dashed var(--border); margin: 16px 0; }
.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; }
@media (max-width: 700px) {
  .tag-detail-cols { grid-template-columns: minmax(0, 1fr); }
  .tag-detail-inbound  { border-right: none; padding-right: 0; margin-right: 0; }
  .tag-detail-outbound { border-left: none; padding-left: 0; margin-left: 0; }
}
.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; grid-column: 1 / -1; }
.empty-gallery-hint { font-size: 12px; }
/* 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 { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
.settings-nav a { color: var(--fg-dim); font-size: 12px; padding: 3px 8px; text-decoration: none; }
.settings-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; }
.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; 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); 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; }
.radio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.radio-grid 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; }

#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 > label.monloader-accent { color: var(--monloader); }
#settings-page .field > label.tagger-accent { color: var(--tagger); }
/* A setting whose companion is paired but currently unreachable stays
   editable - the phase resumes on its own - and only reads as off. */
#settings-page .field > label.label-off { color: var(--fg-dim); }
#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; }
.settings-sub-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.settings-sub-head h4 { margin-bottom: 0; }
#settings-page .settings-sub-head .field-hint { margin: 0; }
.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; }
.add-cat-form .cat-hex { flex: none; }
kbd {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 1px 5px;
  font-family: inherit;
  font-size: 12px;
}

#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(auto-fit, minmax(230px, 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:not(:has(.suggest-dropdown)) { overflow: auto; }
dialog::backdrop { background: color-mix(in srgb, var(--scrim) 70%, transparent); }
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: 0; width: min(480px, 100% - 2rem); }
#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: 0; width: min(480px, 100% - 2rem); }
#commentary-dialog .field input[type="text"],
#commentary-dialog .field textarea { width: 100%; max-width: none; }

#original-dialog { min-width: 0; width: min(480px, 100% - 2rem); }
#original-dialog .field textarea { width: 100%; max-width: none; 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: 460px;
  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(--monloader);
  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(--monloader); border-color: var(--monloader); }
.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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  padding: 2px 0;
}
.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-height: 200px;
  max-width: 100%;
  display: inline-block;
  border: 1px solid var(--border);
  object-fit: contain;
}
.detail-video {
  max-width: 100%;
  display: inline-block;
}
/* 430px is the fixed height of the bars above the image and the editor
   below it, annotation toggle included, so both stay on screen without
   scrolling. */
.detail-img, .detail-video { max-height: max(45vh, calc(100vh - 430px)); }

.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; }
.detail-preview-note { 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-flow: row wrap;
  gap: 10px 24px;
  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; }
.mk-u { text-decoration: underline; }
.mk-tn { display: block; color: var(--fg-dim); font-style: italic; }
.mk-tag, .mk-url, .mk-local { cursor: pointer; }
.mk-tag.mk-unknown { color: var(--fg-dim); border-bottom: 1px dotted var(--fg-dim); }
.annotation-body code, .commentary-body code { background: var(--bg-input); border: 1px solid var(--border); padding: 0 3px; }

.markup-bar { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: 12px; }
.markup-bar-sep { color: var(--border); }
.markup-preview:empty { display: none; }
.markup-preview {
  margin-top: 6px;
  padding: 5px 7px;
  border: 1px solid var(--accent);
  background: var(--bg-input);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.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-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) { display: flex; align-items: baseline; flex: 1 1 auto; min-width: 0; }
.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-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-size: 11px;
  margin: 4px 0 0;
  max-height: 320px;
  overflow-y: auto;
  color: var(--fg);
}
.gen-hash-link { color: var(--link); 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(--monloader); }
.btn-sm.monloader-accent:hover { color: var(--bg); background: var(--monloader); border-color: var(--monloader); }
.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(--monloader); }
/* The same idea for controls that drive the auto-tagger. */
.tagger-accent { color: var(--tagger); }
.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-warning, .btn-success {
  color: var(--btn-accent);
  border-color: var(--btn-accent);
  background: var(--bg);
}
.btn-warning:hover, .btn-success: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] {
  background: var(--bg-surface);
  border-color: var(--border);
}
.monloader-accent:disabled, .tagger-accent:disabled,
.btn-autotag:disabled, .btn-hash-lookup:disabled { color: var(--fg-dim); }
.monloader-accent:disabled, .btn-hash-lookup:disabled,
#batch-bar .monloader-accent:disabled { border-color: var(--border); }
#batch-bar .monloader-accent:disabled:hover { color: var(--fg-dim); 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 {
  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; }
.tag-remove-btn:hover { color: var(--warning); }
.no-tags {
  color: var(--fg-dim);
  font-size: 12px;
  font-style: italic;
  padding: 0 var(--row-inset-end, 12px) 0 var(--row-inset, 12px);
}

/* 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; }
/* Filename-template chips and the preview slot they feed. */
.tok-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; max-width: 360px; }
.tok-chip {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--tagger);
  font-size: 11px;
  padding: 0 5px;
}
.tok-chip:hover { border-color: var(--fg-dim); }
.name-preview {
  margin-top: 6px;
  max-width: 360px;
  border-left: 2px solid var(--border);
  padding-left: 8px;
  font-size: 12px;
  color: var(--fg-dim);
}
.name-preview-cap { display: block; font-size: 10px; color: var(--fg-dim); }
.name-preview-row { display: block; white-space: nowrap; overflow-x: auto; }
.name-preview-field { color: var(--fg-dim); }

#settings-page .name-preview-row { white-space: normal; overflow-wrap: anywhere; }
#settings-page .tok-chips,
#settings-page .name-preview,
#settings-page .name-preview-err { max-width: none; }

.dest-row { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.dest-row .dest-part { flex: 1 1 190px; min-width: 0; }
.dest-row input[type="text"] { width: 100%; max-width: none; }
.dest-part > label { display: block; font-size: 11px; color: var(--fg-dim); margin-bottom: 3px; }
.dest-sep { color: var(--fg-dim); padding-bottom: 4px; }
.dest-hints { display: flex; gap: 6px; flex-wrap: wrap; }
.dest-hints > .field-hint { flex: 1 1 190px; }
.name-preview-arrow { color: var(--fg-dim); }
.name-preview-to { color: var(--success); }
.name-preview-err { margin-top: 6px; max-width: 360px; font-size: 12px; color: var(--error); }

.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: 420px;
  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; }
.tag-list-added-title { font-size: 11px; color: var(--fg-dim); margin: 4px 0 2px; font-weight: normal; }
.tag-list-added { margin-top: 0; }
.relation-origin-sub { font-size: 11px; color: var(--fg-dim); font-style: italic; margin: 4px 0 2px; }

.tag-entry-remove,
.tag-group-delete {
  background: none;
  border: none;
  padding: 0;
  color: var(--remove);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.tag-entry-remove:hover,
.tag-group-delete:hover { color: var(--error); }
.tag-entry-remove {
  position: absolute;
  right: var(--row-inset-end);
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}
.tag-entry:hover .tag-entry-remove,
.tag-entry:focus-within .tag-entry-remove,
.tag-entry.focused .tag-entry-remove { opacity: 1; }
.tag-entry:hover .tag-count,
.tag-entry:focus-within .tag-count,
.tag-entry.focused .tag-count { visibility: hidden; }
@media (hover: none) {
  .tag-entry-remove { position: static; transform: none; opacity: 1; }
  .tag-entry:hover .tag-count { visibility: visible; }
}
.tag-mode-switch {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px var(--row-inset-end) 4px var(--row-inset);
  font-size: 10px;
  color: var(--fg-dim);
}
.tag-mode-current { color: var(--fg); }
.tag-mode-sep { color: var(--fg-dim); }
.tag-mode-toggle:hover { color: var(--link); }
.tag-entry-branch { color: var(--fg-dim); flex-shrink: 0; font-size: 11px; }
.tag-marker { font-size: 10px; color: var(--fg-dim); flex-shrink: 0; cursor: help; }
.tag-marker-conf { color: var(--tagger); }
.tag-marker-stale { color: var(--warning); }
.tag-entry[data-depth="2"] { padding-left: calc(var(--row-inset) + 12px); }
.tag-entry[data-depth="3"] { padding-left: calc(var(--row-inset) + 24px); }
.tag-entry-implied { opacity: 0.6; }
.tag-entry-implied:hover { opacity: 0.9; }
.tag-entry-stale .tag-link { text-decoration: line-through; }
.tag-entry.focused { outline: 1px solid var(--accent); outline-offset: -1px; }
.tag-stale-footer {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px var(--row-inset-end) 4px var(--row-inset);
  font-size: 11px;
  color: var(--fg-dim);
}

/* /tags page header: dense row of action buttons. */
#tags-page-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.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; flex-direction: column; gap: 1px; }
.source-list .collection-item + .collection-item { margin-top: 4px; }
.source-line { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
.source-line-sp { flex: 1 1 auto; }
.source-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding-left: 2ch; }
.source-verbs { display: flex; align-items: baseline; gap: 0 6px; flex-wrap: wrap; }
.source-verbs:empty { display: none; }
.source-list + .source-add-row { margin-top: 6px; }
.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; }

.source-add-row { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.source-add-row > .field-hint, .source-add-row > .btn-add-source { flex: 0 0 auto; white-space: nowrap; }
.scheduled-lookup { display: grid; grid-template-columns: max-content max-content 1fr; gap: 1px 10px; align-items: baseline; }
.lookup-backend { color: var(--fg-dim); }
.lookup-switch { white-space: nowrap; }
.lookup-status { color: var(--fg-dim); word-break: normal; }
.lookup-status-queued { color: var(--monloader); }
.lookup-status-hit { color: var(--success); }
.lookup-status-verdict { color: var(--fg); }
.lookup-line-off { opacity: 0.55; }
.lookup-history { margin: 4px 0 0; 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; }
.stats-cols > * { min-width: 0; }
@media (max-width: 900px) {
  .stats-cols { grid-template-columns: 1fr; }
}


/* The upgrade prompt puts its file comparison on its own lines. */
#confirm-dialog-msg { white-space: pre-wrap; }
.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: 240px; max-width: 240px; }
section#tagger .tagger-table th:nth-child(2),
section#tagger .tagger-table td:nth-child(2) { width: 1%; white-space: nowrap; text-align: left; }
section#tagger .tagger-table th:nth-child(3),
section#tagger .tagger-table td:nth-child(3) { text-align: left; }
section#tagger .tagger-table th:nth-child(4),
section#tagger .tagger-table td:nth-child(4) { width: 1%; white-space: nowrap; text-align: right; padding-right: 17px; }
.tagger-actions { display: grid; grid-template-columns: repeat(3, 5.5em); gap: 6px; }
.tagger-act-state { grid-column: 1; }
.tagger-act-reset { grid-column: 2; }
.tagger-act-delete { grid-column: 3; }
section#tagger .tagger-table td:nth-child(1) .status-badge { margin-left: 6px; }
section#tagger .tagger-table td:nth-child(2) .status-badge { margin-left: 0; }
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; }
.tagger-config-dialog { width: min(720px, 92vw); max-height: 85vh; overflow-y: auto; }
.tagger-config-dialog .field-hint { margin-bottom: 8px; }
.dialog-tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.dialog-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 14px;
}
.dialog-tab:hover { color: var(--fg); border-color: transparent; border-bottom-color: transparent; }
.dialog-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
.dialog-panel[hidden] { display: none; }

/* Mappings panel */
.tagger-config-dialog:has(.tc-mappings:not([hidden])) { width: min(1200px, 92vw); }
.tc-search-row { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.tc-search-row input[type=search] { flex: 1; min-width: 0; }
.tc-filters { display: flex; gap: 4px; white-space: nowrap; }
.tc-filter {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-size: 12px;
  padding: 2px 6px;
}
.tc-filter:hover { color: var(--fg); border: none; }
.tc-filter.active { color: var(--fg); text-decoration: underline; }
.tagger-labels-table { width: 100%; border-collapse: collapse; }
.tagger-labels-table th, .tagger-labels-table td { white-space: nowrap; }
.tagger-labels-table th { font-size: 12px; text-align: left; }
.tagger-labels-table td { padding: 3px 8px; vertical-align: middle; }
.tagger-labels-table th:nth-child(n+3),
.tagger-labels-table td:nth-child(n+3) { width: 1%; }
.tagger-labels-table td.tc-actions { display: grid; grid-template-columns: repeat(2, 4em); gap: 6px; }
.tagger-labels-table .tc-reset { grid-column: 2; }
.tagger-labels-table tr.tc-more td { color: var(--fg-dim); font-size: 12px; padding-top: 8px; }
.tagger-labels-table .status-badge { margin-left: 0; }
.status-badge.status-custom { color: var(--tagger); border-color: var(--tagger); }
.tc-editor-row td { background: var(--bg); padding: 8px; }
.tc-editor-fields { display: flex; gap: 12px; align-items: center; font-size: 12px; flex-wrap: wrap; }
.tc-editor-fields label { color: var(--fg-dim); white-space: nowrap; }
.tc-editor-fields input[type=text] { width: 12em; }

/* Export panel */
.tc-export-block { max-height: 40vh; overflow-y: auto; }
.tc-export-block span { display: block; white-space: pre; }
.exp-add { color: var(--success); }
.exp-del { color: var(--error); text-decoration: line-through; opacity: 0.75; }
.exp-gap { color: var(--fg-dim); }
.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; }

/* Galleries panel of the Configure dialog */
.tagger-gal-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; align-items: start; }
.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); }

.status-ok { color: var(--success); }
.status-dim { color: var(--fg-dim); opacity: 0.6; }
.status-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  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); }
.status-badge.status-warn { color: var(--warning); border-color: var(--warning); }
.status-badge.status-faint { color: var(--fg-dim); opacity: 0.6; }

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-images-more { font-weight: normal; margin-left: 4px; }
.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: color-mix(in srgb, var(--scrim) 70%, transparent); color: var(--fg); padding: 0 3px; }
.relations-card-date { position: absolute; bottom: 2px; left: 2px; font-size: 10px; background: color-mix(in srgb, var(--scrim) 70%, transparent); 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: color-mix(in srgb, var(--scrim) 70%, transparent); 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-grid.filename-preview .relations-card-id { display: none; }
.collection-order-fname { position: absolute; bottom: 0; left: 0; right: 0; font-size: 11px; line-height: 1.4; padding: 1px 3px; background: color-mix(in srgb, var(--scrim) 65%, transparent); color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.collection-order-fname:empty { display: none; }
.collection-order-fname:hover { text-decoration: underline; }
.collection-order-fname input { width: 100%; font-size: 11px; padding: 0; border: none; background: transparent; color: var(--fg); }
.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: 16px; }
#relations-session-page .detail-topbar { flex-wrap: wrap; row-gap: 8px; }
#relations-session-page .detail-nav-group { flex: 1 0 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: var(--media-bg);
  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; text-align: center; }
.session-distance-sub { align-self: center; font-size: 11px; color: var(--fg-dim); }
.session-source-tags { color: var(--tagger); }
.session-source-review { color: var(--warning); }
.session-bridge:has(.session-parent) .session-distance { flex: 1; justify-content: flex-end; }
.session-parent {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 0;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 6px;
  font-size: 11px;
  color: var(--fg-dim);
}
.session-parent > a:has(img) { display: block; flex: 1; min-height: 0; width: 100%; }
.session-parent img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--media-bg);
  border: 1px solid var(--border);
}
.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(--alternate); color: var(--alternate); }
.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(--alternate) 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; }
.relations-compare-table .cmp-shared-row th,
.relations-compare-table .cmp-shared-row td { border-color: var(--tagger); }
.relations-compare-table tr:has(+ .cmp-shared-row) th,
.relations-compare-table tr:has(+ .cmp-shared-row) td { border-bottom-color: var(--tagger); }
.cmp-shared-tag { display: inline-block; margin-right: 10px; white-space: nowrap; }
.cmp-shared-weight { color: var(--tagger); }
.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%; }
  .session-parent { align-self: center; flex: none; }
  .session-parent > a:has(img) { flex: none; width: auto; }
  .session-parent img { width: 84px; height: 62px; }
}

@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(auto-fill, minmax(120px, 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, .manga-pill {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: color-mix(in srgb, var(--scrim) 70%, transparent);
  color: var(--fg);
  font-size: 10px;
  padding: 1px 4px;
  pointer-events: none;
  z-index: 1;
}
.relation-marker { 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: 1100px) {
  .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; }
}

@media (min-width: 769px) {
  #main-layout.sidebar-collapsed #sidebar { display: none; }
}
@media (max-width: 879px) {
  #topbar { flex-wrap: wrap; height: auto; padding: 4px 16px 0; gap: 0 16px; }
  #nav { flex-basis: 100%; order: 3; margin-left: 0; justify-content: flex-start; column-gap: 0; }
  #nav a { padding-left: 8px; padding-right: 8px; }
  #topbar-right { order: 2; margin-left: auto; }
}

@media (max-width: 480px) {
  #topbar { padding: 4px 8px 0; }
  #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; }
.cat-actions .field-hint { margin: 0; }
.cat-action-spacer { visibility: hidden; }

.cat-color-pair { display: inline-flex; gap: 6px; align-items: center; }
.cat-swatch { padding: 0; width: 30px; height: 22px; }
/* Reads as the plain hex it replaced until it is hovered or focused. */
/* Wide enough for the seven characters plus the datalist indicator. */
.cat-hex { width: 13ch; padding: 1px 4px; background: transparent; border-color: transparent; }
.cat-hex:hover { border-color: var(--border); }
.cat-hex:focus { background: var(--bg-input); }
.cat-hex:invalid { border-color: var(--error); }

.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; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.dialog-actions > button { flex: 0 0 auto; }

.batch-lookup-op { display: block; margin-top: 8px; }
.batch-lookup-op:first-of-type { margin-top: 0; }
.batch-lookup-sub { display: block; padding-left: 2ch; }
.batch-lookup-sub label { display: block; }
.batch-lookup-summary { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 12px; }

/* 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); }

.series-pill {
  position: absolute;
  bottom: 4px;
  left: 4px;
  max-width: 60%;
  background: color-mix(in srgb, var(--scrim) 70%, transparent);
  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: var(--media-bg);
  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: transparent;
  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: color-mix(in srgb, var(--scrim) 45%, transparent);
  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: var(--bg-surface);
  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-extract { 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: color-mix(in srgb, var(--scrim) 85%, transparent); }
.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: var(--media-bg); }
.manga-page-num { display: block; font-size: 11px; color: var(--fg-dim); padding: 2px; }
.manga-page-read .manga-page-thumb { opacity: 0.4; }
.manga-page-bookmark .manga-page-link { border-color: var(--accent); }
.manga-page-bookmark .manga-page-num { background: var(--accent); color: var(--bg); }
#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; }

/* Settings > Plugins */
.theme-cluster { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.theme-cluster-active { color: var(--fg); }
.theme-cluster button {
  background: none; border: none; padding: 0;
  color: var(--link); font: inherit; cursor: pointer;
}
.theme-cluster button:hover { text-decoration: underline; }

#plugin-rows { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; }
@media (max-width: 900px) { #plugin-rows { grid-template-columns: 1fr; } }
.peer-row {
  border: 1px solid var(--border);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}
.peer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.peer-address { color: var(--fg-dim); }
.peer-line { margin-top: 4px; font-size: 12px; }
.peer-label { display: inline-block; min-width: 64px; color: var(--fg-dim); }
#plugins .peer-row .field { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 12px; }
#plugins .peer-row .field label { min-width: 64px; margin-bottom: 0; }
#plugins .peer-row .field input[type="text"] { flex: 1; min-width: 0; max-width: none; }
.peer-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.plugin-button-decl { color: var(--plugin); }

.plugin-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--plugin);
  padding: 8px 10px;
  margin-top: 12px;
}
.plugin-card-title { color: var(--plugin); font-weight: bold; }
.plugin-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.plugin-peer { color: var(--fg-dim); }
.plugin-btn { color: var(--plugin); border-color: var(--plugin); }
.plugin-btn:hover { color: var(--bg); background: var(--plugin); border-color: var(--plugin); }

#plugin-open-dialog { width: 90vw; max-width: 1100px; padding: 10px 12px 12px; }
.plugin-open-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.plugin-open-title { color: var(--plugin); margin-right: auto; }
#plugin-open-frame { display: block; width: 100%; height: 74vh; border: 1px solid var(--border); background: var(--bg); }

/* PTR contribution panel */
.ptr-contrib-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--monloader);
  padding: 8px 10px;
  margin-top: 12px;
}
.ptr-contrib-head { display: flex; justify-content: space-between; align-items: baseline; }
.ptr-contrib-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.ptr-contrib-lines { flex: 1 1 260px; }
.ptr-contrib-lines p { margin: 4px 0; }
.ptr-contrib-lines ul { margin: 4px 0; padding-left: 18px; }
.ptr-contrib-lines li { margin: 2px 0; }
.ptr-contrib-plus { color: var(--success); font-weight: bold; }
.ptr-contrib-minus { color: var(--warning); font-weight: bold; }
.ptr-contrib-same { color: var(--fg-dim); font-weight: bold; }
.ptr-count { cursor: help; text-decoration: underline dotted; }
.ptr-contrib-title { color: var(--monloader); font-weight: bold; }
.ptr-contrib-failed { margin: 4px 0; color: var(--warning); }
.ptr-contrib-unknown { margin: 4px 0; color: var(--warning); }
.ptr-known-as { color: var(--fg); }
.ptr-contrib-actions { display: flex; gap: 8px; flex-shrink: 0; margin-left: auto; }
.btn-ptr-contribute, .btn-ptr-pull { color: var(--monloader); border-color: var(--monloader); }
.btn-ptr-contribute:hover:not(:disabled), .btn-ptr-pull:hover:not(:disabled) { background: var(--monloader); color: var(--bg); }
.ptr-lookup-input { display: flex; gap: 8px; align-items: center; }
.ptr-lookup-input .series-input-wrap { max-width: none; flex: 1; }
.ptr-lookup-input .series-input-wrap input[type="text"] { max-width: none; }
.ptr-lookup-answer { margin: 8px 0 4px; }
.ptr-lookup-head { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; align-items: baseline; }
.ptr-lookup-anywhere { display: flex; align-items: center; gap: 6px; }
.ptr-lookup-anywhere:has(input:disabled) { color: var(--fg-dim); }
.ptr-lookup-note { margin: 10px 0 6px; }
.ptr-lookup-back { margin-right: auto; }
#ptr-lookup-result > .suggest-list { position: static; max-height: 320px; }
.ptr-contrib-dialog { max-width: 640px; width: min(640px, 92vw); max-height: 85vh; overflow-y: auto; }
.ptr-contrib-summary { margin: 10px 0 0; color: var(--fg-dim); }
.ptr-hunk-wrap { margin: 10px 0; }
.ptr-hunk-scroll { max-height: 250px; overflow-y: auto; border: 1px solid var(--border); }
.ptr-hunk-scroll.ptr-hunk-short { max-height: 170px; }
.ptr-hunk {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: baseline; gap: 8px;
  color: var(--monloader); font-size: 12px;
  background: var(--bg-surface);
  padding: 3px 6px;
  border-bottom: 1px solid var(--border);
}
.ptr-hunk .ptr-live { color: var(--fg); }
.ptr-hunk-note { color: var(--fg-dim); font-size: 11px; font-style: italic; white-space: nowrap; }
.ptr-hunk-tools { margin-left: auto; white-space: nowrap; display: flex; align-items: baseline; gap: 4px; }
.ptr-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.1em 2.6em 1fr auto;
  gap: 0 8px;
  padding: 1px 6px;
  align-items: baseline;
  user-select: none;
}
label.ptr-row { cursor: pointer; }
label.ptr-row:hover { background: var(--bg-input); }
.ptr-row input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ptr-gut::before { content: " "; white-space: pre; }
.ptr-mark::before { content: "[ ]"; color: var(--fg-dim); }
.ptr-note { color: var(--fg-dim); font-size: 12px; }
.ptr-note-under { grid-column: 3 / -1; grid-row: 2; }
.ptr-note-warn { color: var(--warning); }
.ptr-row-ctx { color: var(--fg-dim); }
.ptr-row-ctx .ptr-mark::before { content: "   "; white-space: pre; }
.ptr-row-ctx .ptr-name { opacity: 0.55; }
.ptr-row-add:has(input:checked) { color: var(--success); }
.ptr-row-add:has(input:checked) .ptr-gut::before { content: "+"; }
.ptr-row-add:has(input:checked) .ptr-mark::before { content: "[x]"; color: var(--success); }
.ptr-row-pet:has(input:checked) { color: var(--error); }
.ptr-row-pet:has(input:checked) .ptr-gut::before { content: "-"; }
.ptr-row-pet:has(input:checked) .ptr-mark::before { content: "[x]"; color: var(--error); }
.ptr-row:has(input:focus-visible) { outline: 1px solid var(--accent); }
.ptr-row-staged { color: var(--success); }
.ptr-row-staged .ptr-gut::before { content: "+"; }
.ptr-row-staged-pet { color: var(--error); }
.ptr-row-staged-pet .ptr-gut::before { content: "-"; }
.ptr-row-refused { color: var(--warning); }
.ptr-row-refused .ptr-gut::before { content: "!"; }
.ptr-row-staged .ptr-mark::before, .ptr-row-staged-pet .ptr-mark::before,
.ptr-row-refused .ptr-mark::before { content: "   "; white-space: pre; }
.ptr-fold { margin: 3px 0; }
.ptr-fold > summary { color: var(--fg-dim); font-size: 12px; cursor: pointer; list-style: none; padding: 1px 6px; }
.ptr-fold > summary::-webkit-details-marker { display: none; }
.ptr-fold > summary::before { content: "\00b7\00b7\00b7 "; color: var(--border); }
.ptr-fold > summary:hover { color: var(--fg); }
.ptr-fold[open] > summary::before { content: "--- "; }
.ptr-fold-scroll { max-height: 150px; overflow-y: auto; border: 1px solid var(--border); }