:root {
  --accent: #3B82F6
}

body {
  font-family: system-ui, sans-serif
}

.masonry {
  column-width: 130px;
  column-gap: 8px
}

.gallery-item {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  margin: 0 0 8px;
  break-inside: avoid;
  vertical-align: top;
  position: relative;
  background: #111827;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: transform .1s, border-color .1s
}

.gallery-item:hover {
  transform: scale(1.03);
  border-color: #60A5FA;
  z-index: 10
}

.selected-item {
  border-color: #3B82F6 !important;
  box-shadow: 0 0 0 2px #3B82F6
}

.multi-selected {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 2px #22c55e
}

.sel-check {
  pointer-events: none
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .2s
}

.gallery-item img.loaded {
  opacity: 1
}

.label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .8);
  font-size: 10px;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .15s
}

.gallery-item:hover .label {
  opacity: 1
}

.tag-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  background: #2563eb;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 99px
}

.comic-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  background: #7c3aed;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 99px;
  display: flex;
  gap: 2px;
  align-items: center
}

.subchip {
  background: #374151;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: #d1d5db;
  white-space: nowrap;
  cursor: pointer
}

.subchip:hover {
  background: #4b5563
}

.cstrip {
  box-sizing: border-box
}

.skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite
}

@keyframes shimmer {
  0% {
    background-position: 200% 0
  }

  100% {
    background-position: -200% 0
  }
}

canvas {
  cursor: crosshair;
  display: block
}

/* Drag splitters between resizable panes. The vertical bar sits between the
   left column and the editor, and between the viewer and the controls pane;
   in horizontal (stacked) layout the controls splitter becomes a row-resizer.
   JS (panes_resize.js) does the actual sizing + persistence. */
.pane-splitter {
  flex: 0 0 6px;
  background: transparent;
  position: relative;
  z-index: 20;
  cursor: col-resize;
}
.pane-splitter:hover, .pane-splitter.dragging {
  background: #374151;
}
.pane-splitter::after {
  content: '';
  position: absolute;
  left: 2px; top: 50%;
  width: 2px; height: 28px;
  transform: translateY(-50%);
  background: #4B5563;
  border-radius: 1px;
}
#editor_region.horizontal #controls_splitter {
  flex-basis: 6px;
  cursor: row-resize;
  width: 100%;
}
#editor_region.horizontal #controls_splitter::after {
  left: 50%; top: 2px;
  width: 28px; height: 2px;
  transform: translateX(-50%);
}
/* When the media viewer is hidden the controls splitter has nothing to drag
   against; hide it. */
.pane-splitter.hidden { display: none; }

.rv {
  resize: vertical;
  overflow: hidden;
  position: relative
}

.rv::after {
  content: '=';
  position: absolute;
  right: 4px;
  bottom: 0;
  font-size: 18px;
  color: #9CA3AF;
  pointer-events: none;
  line-height: 1
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px
}

::-webkit-scrollbar-track {
  background: #1f2937
}

::-webkit-scrollbar-thumb {
  background: #4B5563;
  border-radius: 3px
}

#editor_region.vertical {
  flex-direction: row
}

#editor_region.horizontal {
  flex-direction: column
}

#image_pane,
#book_reader {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0
}

/* The reader occupies the same slot as the image viewer, so it must inherit the
   same flex behaviour in BOTH editor_region orientations — otherwise switching
   to book mode in the horizontal (stacked) layout collapses it to zero height.
   Tailwind's flex-1 is `flex:1 1 0%`, which is close but not identical to the
   `auto` basis #image_pane relies on, so it's set explicitly here rather than
   left to a utility class. */

/* Reading surface. The measure is capped in ch (set by reader.js from the
   Measure slider) and centred; the column gap only matters in two-up mode. */
#reader_content {
  transition: font-size .12s ease, background .15s ease, color .15s ease;
  scroll-behavior: smooth;
}

#reader_content p {
  margin: 0 0 .85em;
  text-align: justify;
  hyphens: auto;
}

#reader_content h1,
#reader_content h2,
#reader_content h3 {
  font-weight: 700;
  line-height: 1.25;
  margin: 1.4em 0 .6em;
  text-align: left;
}

#reader_content blockquote {
  margin: 1em 0 1em 1.5em;
  padding-left: .9em;
  border-left: 2px solid currentColor;
  opacity: .8;
}

#reader_content img {
  max-width: 100%;
  height: auto;
}

/* Break-inside avoidance keeps a heading from being orphaned at the foot of a
   column in two-up mode. */
#reader_content h1,
#reader_content h2,
#reader_content h3,
#reader_content blockquote {
  break-inside: avoid;
}

.reader-page {
  image-rendering: auto;
  box-shadow: 0 0 18px rgba(0, 0, 0, .6);
}

#controls_pane {
  background: #161c27
}

#editor_region.vertical #controls_pane {
  width: 420px;
  min-width: 340px;
  max-width: 52%;
  height: 100%;
  border-left: 1px solid #374151
}

#editor_region.horizontal #controls_pane {
  width: 100%;
  height: 40%;
  min-height: 170px;
  border-top: 1px solid #374151
}

.tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 12px;
  color: #e5e7eb
}

.tag-row:hover {
  border-color: #4b5563
}

.tag-row .tag-x {
  cursor: pointer;
  color: #9ca3af;
  font-weight: 700;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0
}

.tag-row .tag-x:hover {
  color: #f87171
}

.tag-row .tag-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.tag-row .tag-edit {
  color: #e5e7eb;
  font-size: 12px;
  padding: 0
}

.tag-row.tag-unconfirmed {
  border-style: dashed;
  border-color: #b45309;
  background: #2a1f12
}

.tag-row.tag-unconfirmed .tag-edit {
  color: #fcd34d;
  font-style: italic
}

.tag-row .tag-ok {
  cursor: pointer;
  color: #4ade80;
  font-weight: 700;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0
}

.tag-row .tag-ok:hover {
  color: #86efac
}

#meta_stars .star {
  cursor: pointer;
  color: #4b5563;
  transition: color .08s
}

#meta_stars .star.on {
  color: #fbbf24
}

#meta_stars:hover .star {
  color: #4b5563
}

#meta_stars .star:hover,
#meta_stars .star:hover~.star {
  color: #4b5563
}

.iqa-stars {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(0, 0, 0, .7);
  border-radius: 99px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  color: #cbd5e1;              /* IQA estimate: muted */
  letter-spacing: 1px;
  line-height: 1.2
}
.iqa-stars-manual { color: #fbbf24; }   /* a rating you set: amber */