/* ================================
   RESET & BASE
   ================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #1f2937;
  color: #ffffff;
  padding: 0 16px 16px;
  line-height: 1.5;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

/* ================================
   SCROLLBAR
   ================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #141b2f;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
  border: 2px solid #141b2f;
}

::-webkit-scrollbar-thumb:hover {
  background: #4a5568;
}

/* ================================
   HEADER
   ================================ */
.header-full {
  background-color: #111827;
  width: 100vw;
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: -50vw;
  padding: 16px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 10;
}

.nav-container {
  display: flex;
  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.nav-links {
  display: flex;
  gap: 24px;
}

.nav-link {
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  transition: background 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.nav-link:hover {
  background: rgba(255,255,255,0.15);
}

/* ================================
   CONTROL PANEL
   ================================ */
.control-panel {
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 24px;
  margin: 30px auto 0;
  max-width: 1185px;
  color: white;
  position: relative; /* Allow dropdowns to escape */
  overflow: visible; /* Don't clip dropdowns */
  z-index: 100; /* Ensure dropdowns appear above content */
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  width: 100%;
  margin-bottom: 8px;
  position: relative; /* For dropdown positioning */
  overflow: visible; /* Don't clip dropdowns */
}

.control-row:last-child {
  margin-bottom: 0;
}


.control-group-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.control-group-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.source-health-wrap {
  position: relative;
  display: inline-flex;
}

.source-health-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #e53e3e;
  color: white;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

.source-health-panel {
  position: absolute;
  top: 48px;
  right: 0;
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 30;
}

.source-health-panel.hidden {
  display: none;
}

.source-health-panel-title {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 10px;
}

.source-health-empty {
  color: #64748b;
  font-size: 13px;
  padding: 8px 0;
}

.source-health-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid #263041;
  padding: 8px 4px;
  cursor: pointer;
  color: #e2e8f0;
}

.source-health-item:last-child {
  border-bottom: none;
}

.source-health-item:hover {
  background: #202b40;
}

.source-health-item-title {
  font-weight: 600;
  font-size: 13px;
}

.source-health-item-meta {
  color: #f56565;
  font-size: 12px;
  margin-top: 2px;
}

.source-health-item-error {
  color: #64748b;
  font-size: 11px;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A whole site down: one row, its series listed when expanded */
.source-health-outage {
  border-bottom: 1px solid #263041;
}

.source-health-outage:last-child {
  border-bottom: none;
}

/* Only the site's API is down, its website still loads */
.source-health-outage.api-down .source-health-item-meta {
  color: #fb923c;
}

.source-health-item-note {
  color: #fb923c;
  font-size: 12px;
  margin-top: 2px;
}

.source-health-outage .source-health-outage-head {
  border-bottom: none;
  position: relative;
  padding-right: 20px;
}

.source-health-outage-head::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: rotate(45deg);
  transition: transform 0.15s;
}

.source-health-outage-head[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  top: 17px;
}

.source-health-outage-list {
  max-height: 220px;
  overflow-y: auto;
  margin: 0 0 6px 10px;
  border-left: 2px solid #334155;
}

.source-health-outage-list.hidden {
  display: none;
}

#default-actions,
#bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Base control styles */
.control-input,
.control-button,
.multi-select-trigger,
.single-select-trigger {
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  background: #1a2436;
  border: 1px solid #334155;
  color: white;
  border-radius: 6px;
  transition: background 0.2s;
}

.control-input,
.multi-select-trigger,
.single-select-trigger {
  min-width: 120px;
}

.control-button,
.multi-select-trigger,
.single-select-trigger {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.control-input:hover,
.control-button:hover,
.multi-select-trigger:hover,
.single-select-trigger:hover {
  background: #1e2c40;
}

.control-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Square buttons */
.control-button.square-button,
.sort-toggle {
  width: 46px;
  height: 46px;
  padding: 0;
  min-width: 46px;
}

.control-button.square-button svg,
.sort-toggle svg {
  width: 18px;
  height: 18px;
}

/* Primary button */
.control-button.primary {
  background: #1665f4;
  border-color: #1665f4;
}

.control-button.primary:hover {
  background: #1256d0;
}

/* Refresh button rotation animation */
@keyframes spin {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

.control-button.refreshing svg {
  animation: spin 0.6s linear;
}

/* Optional: Add multiple spins for longer operations */
.control-button.refreshing-long svg {
  animation: spin 1s linear infinite;
}

/* Specific button widths */
#btn-refresh,
#btn-add-series {
  min-width: 138px;
}

/* Sort control group */
.sort-control-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: auto;
}

.sort-control-group .control-input {
  flex: 1;
  min-width: 130px;
  max-width: 180px;
}

/* Search input */
.control-search {
  position: relative;
  width: 230px;
}

.control-search input {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 50px; /* CHANGED: Added right padding for clear button */
  font-size: 15px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  outline: none;
}

.control-search > svg {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #878F9C;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

/* ADDED: Clear button styling */
.search-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.search-clear-btn:hover {
  color: #6b7280; /* CHANGED: Hover color */
}

.search-clear-btn:active {
  color: #6b7280; /* ADDED: Active/click color for mobile */
}

.search-clear-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.search-clear-btn.show {
  display: flex;
}

/* "Did you mean" - closest titles offered when a search finds nothing */
.series-grid > p.has-suggestions {
  padding-bottom: 12px;
}

.search-suggestions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px 60px;
}

.search-suggestions-label {
  color: #94a3b8;
  font-size: 14px;
}

.search-suggestion-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: #1a2436;
  color: white;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  transition: background 0.2s;
}

.search-suggestion-chip:hover {
  background: #2d3f5f;
}

/* Matches that the Status filter is hiding ("3 more in Completed. Search all
   statuses?") - a slim row above the cards, or under "No series found." */
.search-hidden-matches {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 2px 8px 6px;
  color: #94a3b8;
  font-size: 14px;
}

.search-hidden-matches.no-results {
  padding: 0 20px 60px;
}

/* "Not in your library? Search the sources for ..." under "No series found." */
.search-source-offer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 0 20px 60px;
  color: #94a3b8;
  font-size: 14px;
}

/* Stacked under the "Did you mean" chips: one gap below the last box only */
.search-suggestions:has(+ .search-source-offer) {
  padding-bottom: 16px;
}

/* ================================
   MULTI-SELECT DROPDOWNS
   ================================ */
.multi-select,
.single-select {
  position: relative;
  min-width: 140px;
}

.multi-select-trigger,
.single-select-trigger {
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  background: #1a2436;
  border: 1px solid #334155;
  color: white;
  border-radius: 6px;
  transition: background 0.2s;
  white-space: nowrap; /* ADD THIS */
  overflow: hidden; /* ADD THIS */
  text-overflow: ellipsis; /* ADD THIS - optional, shows ... if text is too long */
}

/* Fixed widths for specific dropdowns to prevent resizing */
#filter-status-trigger {
  min-width: 150px;
}

#filter-status-container {
  min-width: 150px;
}

#sort-order-trigger {
  min-width: 180px;
}

#filter-type-trigger {
  min-width: 140px;
}

#filter-genre-trigger {
  min-width: 140px;
}

#filter-pub-status-trigger {
  min-width: 180px;
}

#filter-readable-on-trigger {
  min-width: 140px;
}

.multi-select-trigger::after,
.single-select-trigger::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.2s ease;
}

.multi-select:has(.multi-select-menu:not(.hidden)) .multi-select-trigger::after,
.single-select:has(.single-select-menu:not(.hidden)) .single-select-trigger::after {
  transform: rotate(180deg);
}

.multi-select-menu,
.single-select-menu {
  position: absolute;
  top: calc(100% + 4px); /* 4px gap below the trigger */
  left: 0;
  z-index: 1001;
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-height: 320px;
  overflow-y: auto;
}

.multi-select-menu.hidden,
.single-select-menu.hidden {
  display: none !important;
}

.multi-select-menu label,
.single-select-menu .option-item {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;
  color: white;
}

.multi-select-menu label:hover,
.single-select-menu .option-item:hover {
  background: #1a2436;
}

.single-select-menu .option-item.selected {
  background: #1e2c40;
  color: #678ec9;
  font-weight: 600;
}

/* Bookmark dropdown (saved filter/sort views) */
.bookmark-select-trigger {
  /* .single-select's 140px min-width is wider than "Default" + icon
     content, so without this the trigger button only fills part of its
     wrapper - the wrapper's leftover width still occupies layout space,
     showing up as an unexplained gap before the next control. */
  width: 100%;
  box-sizing: border-box;
}

.bookmark-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1001;
  width: 260px;
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.bookmark-select-menu.hidden {
  display: none !important;
}

.bookmark-search-input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  margin-bottom: 8px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  box-sizing: border-box;
}

.bookmark-list {
  max-height: 220px;
  overflow-y: auto;
}

.bookmark-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: #e2e8f0;
  font-size: 13px;
}

.bookmark-item:hover {
  background: #1a2436;
}

.bookmark-item.active {
  background: #1e2c40;
  color: #678ec9;
  font-weight: 600;
}

.bookmark-item-check {
  color: #678ec9;
  flex-shrink: 0;
  visibility: hidden;
}

.bookmark-item.active .bookmark-item-check {
  visibility: visible;
}

.bookmark-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bookmark-empty {
  color: #64748b;
  font-size: 12px;
  padding: 8px;
  text-align: center;
}

.bookmark-menu-divider {
  border-top: 1px solid #334155;
  margin: 8px 0;
}

.bookmark-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 4px;
  border: none;
  background: none;
  color: #cbd5e1;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.bookmark-action-btn:hover {
  background: #1a2436;
  color: white;
}

.bookmark-action-btn:disabled {
  color: #475569;
  cursor: default;
}

.bookmark-action-btn:disabled:hover {
  background: none;
}

/* Inline "Save as new view" form (swapped in instead of a native prompt()) */
.bookmark-new-view-form.hidden {
  display: none !important;
}

.bookmark-new-view-form .bookmark-search-input {
  margin-bottom: 8px;
}

.bookmark-new-view-form-actions {
  display: flex;
  gap: 8px;
}

/* Only when the "save as new view" form is showing -- the basic menu's
   "Manage views" already sits right after "Save as new view" with no gap
   needed there. */
.bookmark-new-view-form:not(.hidden) + #bookmark-manage-btn {
  margin-top: 8px;
}

.bookmark-form-btn {
  flex: 1;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #334155;
  font-size: 12px;
  cursor: pointer;
}

.bookmark-form-cancel {
  background: #1a2436;
  color: #cbd5e1;
}

.bookmark-form-cancel:hover {
  background: #1e2c40;
  color: white;
}

.bookmark-form-confirm {
  background: #1665f4;
  border-color: #1665f4;
  color: white;
  font-weight: 600;
}

.bookmark-form-confirm:hover {
  background: #1456d1;
}

/* Manage Views modal */
/* Safety margin in case openManageBookmarksModal()'s drawer-close hasn't
   finished its transition yet - the shared .modal class' z-index (1000)
   alone is well below the mobile filter drawer's (3000). */
#manage-bookmarks-modal {
  z-index: 3500;
}

.manage-bookmarks-content {
  width: 400px;
  max-width: calc(100vw - 32px);
}

.manage-bookmarks-list {
  max-height: 360px;
  overflow-y: auto;
  margin: 12px 0;
}

.manage-bookmark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #1e293b;
}

.manage-bookmark-row:last-child {
  border-bottom: none;
}

.manage-bookmark-name-input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  box-sizing: border-box;
}

.manage-bookmark-name-input:disabled {
  color: #94a3b8;
  border-color: #263041;
}

.manage-bookmark-builtin-label {
  color: #64748b;
  font-size: 11px;
  white-space: nowrap;
}

.manage-bookmark-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #1a2436;
  color: #f56565;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.manage-bookmark-delete-btn:hover {
  background: #3a1e24;
  border-color: #f56565;
}

/* Inline "Delete this view?" confirm state, swapped into the row in place
   of the name input + trash icon. */
.manage-bookmark-confirm-text {
  flex: 1;
  color: #e2e8f0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-bookmark-confirm-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.manage-bookmark-confirm-actions .bookmark-form-btn {
  flex: none;
  padding: 0 12px;
}

.bookmark-form-delete-confirm {
  background: #f56565;
  border-color: #f56565;
  color: white;
  font-weight: 600;
}

.bookmark-form-delete-confirm:hover {
  background: #e04b4b;
}

/* Save for Later modal */
.later-list-content {
  width: 420px;
}

.later-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.later-add-form input {
  height: 36px;
  padding: 0 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  box-sizing: border-box;
  width: 100%;
}

.later-add-form textarea {
  min-height: 36px;
  max-height: 160px;
  padding: 8px 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
  resize: none;
  overflow-y: auto;
}

.later-add-form .btn-primary {
  align-self: flex-end;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  background: #3182ce;
  color: white;
  font-size: 13px;
  cursor: pointer;
}

.later-add-form .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.later-list {
  max-height: 320px;
}

.later-empty-state {
  color: #64748b;
  font-size: 13px;
  text-align: center;
  padding: 12px 0;
}

.later-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #1e293b;
}

.later-item-row:last-child {
  border-bottom: none;
}

.later-item-info {
  flex: 1;
  min-width: 0;
}

.later-item-title {
  color: #e2e8f0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.later-item-title:hover {
  color: white;
  text-decoration: underline;
}

/* Popover opened by clicking a (possibly truncated) title - shows the full
   title/link untruncated. position:fixed so it isn't clipped by .later-list's
   overflow:auto, positioned in JS under the clicked title. */
.later-detail-menu {
  position: fixed;
  z-index: 1100;
  width: 300px;
  max-width: calc(100vw - 16px);
  max-height: 240px;
  overflow-y: auto;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.later-detail-menu.hidden {
  display: none;
}

.later-detail-title {
  color: white;
  font-size: 13px;
  font-weight: 600;
  white-space: pre-wrap;
  word-break: break-word;
}

.later-detail-link {
  color: #cbd5e1;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 8px;
}

/* :visited too - otherwise the browser's dark purple shows on the dark popover */
.later-detail-link a,
.later-detail-link a:visited {
  color: #63b3ed;
  text-decoration: underline;
}

.later-detail-link a:hover {
  color: #90cdf4;
}

.later-detail-link:empty {
  display: none;
}

.later-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Neutral color override - .manage-bookmark-delete-btn's default red reads
   as destructive, wrong for an edit action. */
.later-item-edit-btn {
  color: #94a3b8;
}

.later-item-edit-btn:hover {
  background: #1e2c40;
  border-color: #475569;
  color: white;
}

.later-item-edit-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.later-item-edit-title {
  height: 32px;
  padding: 0 8px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  box-sizing: border-box;
  width: 100%;
}

.later-item-edit-url {
  min-height: 32px;
  max-height: 140px;
  padding: 6px 8px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  width: 100%;
  resize: none;
  overflow-y: auto;
}

.later-item-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.multi-select-menu input {
  margin-right: 8px;
}

.multi-select-menu .btn-select-all,
.multi-select-menu .btn-select-none {
  width: calc(100% - 16px);
  padding: 6px 8px;
  margin: 8px 8px 0;
  background: #1a2436;
  border: 1px solid #334155;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
}

.multi-select-menu .btn-select-all:hover,
.multi-select-menu .btn-select-none:hover {
  background: #1e2c40;
}

/* Menu whose options scroll on their own while Select All / Clear stay pinned
   underneath (same idea as the Tags menu below) */
.multi-select-menu.multi-select-menu-pinned {
  max-height: 400px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.multi-select-menu-pinned .multi-select-options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.multi-select-menu-pinned .btn-select-all,
.multi-select-menu-pinned .btn-select-none {
  flex-shrink: 0;
}

/* Combined Tags + Rating scrollable list */
#filter-genre-menu {
  max-height: 400px;
  display: flex;
  flex-direction: column;
  padding: 0;
  width: 224px;
  left: 0;
  right: auto;
}

/* Hide the tag-state-indicator spans (we'll use data-mode on checkboxes instead) */
.tag-state-indicator {
  display: none;
}

/* Style ALL checkboxes in multi-select menus with custom appearance */
.multi-select-menu input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 2px solid #64748b;
  margin-right: 8px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
  background: transparent;
}

/* Normal checked state (for Type, Publication Status, Readable On) - gray with checkmark */
.multi-select-menu input[type="checkbox"]:checked {
  background: #64748b;
  border-color: #64748b;
}

.multi-select-menu input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 11px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* TAGS ONLY: Include state - gray with checkmark (overrides :checked for tags) */
.genre-list-section input[type="checkbox"][data-mode="include"],
.rating-section input[type="checkbox"][data-mode="include"] {
  background: #64748b;
  border-color: #64748b;
}

.genre-list-section input[type="checkbox"][data-mode="include"]::after,
.rating-section input[type="checkbox"][data-mode="include"]::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 11px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* TAGS ONLY: Exclude state - red with X */
.genre-list-section input[type="checkbox"][data-mode="exclude"],
.rating-section input[type="checkbox"][data-mode="exclude"] {
  background: #ef4444;
  border-color: #ef4444;
}

.genre-list-section input[type="checkbox"][data-mode="exclude"]::after,
.rating-section input[type="checkbox"][data-mode="exclude"]::after {
  content: '✕';
  position: absolute;
  color: white;
  font-size: 12px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

/* Remove old btn-tags-mode styles if they exist */
.btn-tags-mode {
  display: none !important;
}

.tags-mode-toggle {
  display: none !important;
}

/* Search box above the tags list -- with every source's tags merged in, the
   list runs into the thousands and needs filtering. */
.multi-select-menu .tags-search-input {
  flex-shrink: 0;
  width: calc(100% - 16px);
  height: 34px;
  margin: 8px 8px 0;
  padding: 0 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  box-sizing: border-box;
}

.multi-select-menu .tags-search-input:focus {
  outline: none;
  border-color: #678ec9;
}

#filter-genre-menu .combined-tags-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  flex: 1;
}

#filter-genre-menu .combined-tags-list label {
  display: flex;
  align-items: center;
  padding: 6px 4px;
  cursor: pointer;
  color: white;
}

#filter-genre-menu .combined-tags-list label:hover {
  background: #1a2436;
}

#filter-genre-menu .combined-tags-list input {
  margin-right: 8px;
}


/* Scrollbar for combined list */
#filter-genre-menu .combined-tags-list::-webkit-scrollbar {
  width: 8px;
}

#filter-genre-menu .combined-tags-list::-webkit-scrollbar-track {
  background: #141b2f;
  border-radius: 4px;
}

#filter-genre-menu .combined-tags-list::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

#filter-genre-menu .combined-tags-list::-webkit-scrollbar-thumb:hover {
  background: #4a5568;
}

/* Clear All button at bottom (outside scroll area) */
#filter-genre-menu .btn-select-none {
  flex-shrink: 0;
  margin: 8px;
  width: calc(100% - 16px);
  padding: 6px 8px;
  background: #1a2436;
  border: 1px solid #334155;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
}

#filter-genre-menu .btn-select-none:hover {
  background: #1e2c40;
}

/* ================================
   SERIES GRID
   ================================ */
.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 20px;
  justify-content: center;
  margin-top: 16px !important;
  margin: 30px auto 0; /* Add top margin to prevent overlap */
  max-width: 1185px;
  min-height: 200px; /* Ensure minimum height when empty */
}

/* Empty state styling */
.series-grid > p {
  grid-column: 1 / -1;
  text-align: center;
  color: #64748b;
  padding: 60px 20px;
  font-size: 16px;
}

/* ================================
   SERIES CARD
   ================================ */
.series-card {
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: all 0.2s, opacity 0.3s ease;
  position: relative;
}

/* Skeleton loading card */
.skeleton-card {
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.skeleton-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 221 / 331;
  background: linear-gradient(90deg, #1a2436 25%, #243447 50%, #1a2436 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-content {
  padding: 12px;
}

.skeleton-line {
  height: 14px;
  background: linear-gradient(90deg, #1a2436 25%, #243447 50%, #1a2436 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-line.title {
  width: 80%;
  height: 18px;
  margin-bottom: 8px;
}

.skeleton-line.subtitle {
  width: 60%;
}

.skeleton-line.buttons {
  width: 100%;
  height: 28px;
  margin-bottom: 8px;
}

.skeleton-line.btn-bottom {
  width: 100%;
  height: 40px;
  margin-bottom: 0;
}

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

/* Fade-in animation for loaded cards */
.series-card.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Lazy loading states */
.series-cover.loading {
  background: linear-gradient(90deg, #1a2436 25%, #243447 50%, #1a2436 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.series-cover.loaded {
  animation: none;
}

.series-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.series-card.selected {
  border-color: #eab308;
  box-shadow: 0 0 0 2px #eab308;
}

.series-card.bulk-mode {
  cursor: pointer;
}

/* Selection checkbox */
.series-checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: rgba(20, 27, 47, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 3;
  cursor: pointer;
  /* Keeps the box legible over both light and dark cover art -- the dark
     fill alone used to blend into dark covers since its border matched. */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.series-card:hover .series-checkbox,
.series-card.bulk-mode .series-checkbox {
  opacity: 1;
}

.series-card.selected .series-checkbox {
  background: #eab308;
  border-color: #eab308;
  opacity: 1;
}

.series-checkbox svg {
  width: 16px;
  height: 16px;
  color: white;
  display: none;
}

.series-card.selected .series-checkbox svg {
  display: block;
}

.series-cover-container {
  width: 100%;
  height: auto;
  aspect-ratio: 221 / 331;
  position: relative;
}

.series-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #edf2f7;
}

/* Top-left row on the cover: unread count, then the Notes pill. Spans the
   cover (left/right 8px) so the note tooltip inside it can too; clicks pass
   through everywhere except the badges themselves. */
.card-cover-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  pointer-events: none;
}

.card-cover-badges > * {
  pointer-events: auto;
}

.card-cover-badges .unread-badge {
  position: static;
}

.unread-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #e53e3e;
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 10px;
  z-index: 2;
}

.last-release {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
}

/* Warning shown when a series is missing chapters in between (1, 2, 3, 5 ->
   4). Same dark plate as the selection checkbox so it stays legible over any
   cover art. */
.missing-chapters-flag {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 27, 47, 0.85);
  border: 1px solid rgba(250, 204, 21, 0.55);
  border-radius: 6px;
  color: #facc15;
  cursor: help;
  z-index: 3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.missing-chapters-flag:hover,
.missing-chapters-flag.open {
  background: rgba(20, 27, 47, 1);
  border-color: #facc15;
}

/* The selection checkbox fades into that same corner on hover and in bulk
   mode. On a card that has the warning it takes the slot to its left, so
   neither one ever has to move out of the other's way. */
.series-card.has-missing-chapters .series-checkbox {
  right: 40px;
}

.missing-chapters-tip {
  display: none;
  position: absolute;
  top: 38px;
  left: 8px;
  right: 8px;
  padding: 8px 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  z-index: 4;
  pointer-events: none;
}

.missing-chapters-tip > div + div {
  margin-top: 3px;
}

.missing-chapters-tip-title {
  color: #facc15;
  font-weight: 600;
}

.missing-chapters-flag:focus-visible + .missing-chapters-tip,
.missing-chapters-flag.open + .missing-chapters-tip {
  display: block;
}

/* "Notes" pill next to the unread count; hover (tap on touch) shows the
   note. Same open/close rules as the missing-chapters warning above. */
.card-note-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 1px 6px;
  background: rgba(20, 27, 47, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 10px;
  color: white;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  cursor: help;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.card-note-flag svg {
  flex-shrink: 0;
}

.card-note-flag:hover,
.card-note-flag.open {
  background: rgba(20, 27, 47, 1);
  border-color: #94a3b8;
}

.card-note-tip {
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow: hidden;
  padding: 8px 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.card-note-tip.note-markdown h3 { font-size: 14px; }
.card-note-tip.note-markdown h4 { font-size: 13px; }
.card-note-tip.note-markdown h5 { font-size: 12px; }
.card-note-tip.note-markdown code { font-size: 11px; }
.card-note-tip.note-markdown ul,
.card-note-tip.note-markdown ol { padding-left: 18px; }
.card-note-tip.note-markdown p,
.card-note-tip.note-markdown ul,
.card-note-tip.note-markdown ol,
.card-note-tip.note-markdown blockquote,
.card-note-tip.note-markdown pre { margin-bottom: 6px; }

.card-note-flag:focus-visible + .card-note-tip,
.card-note-flag.open + .card-note-tip {
  display: block;
}

/* Hover only reveals it on devices that can really hover. On touch, :hover
   sticks to whatever was last tapped, so the tooltip would never close -
   there it opens on tap (.open) and closes on the next touch instead. */
@media (hover: hover) {
  .missing-chapters-flag:hover + .missing-chapters-tip,
  .card-note-flag:hover + .card-note-tip {
    display: block;
  }
}

.card-info {
  padding: 12px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  min-height: 39px;
  cursor: pointer;
}

.card-chapters {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #4a5568;
  margin-bottom: 10px;
}

.chapter-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
}

.chapter-link:hover {
  color: #cbd5e1;
}

.chapter-not-started {
  color: #4a5568;
  font-size: 13px;
}

/* Card buttons */
.button-group.single-group {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 8px;
}

.button-group.single-group button:disabled {
  background: #151d2e;
  color: #4a5568;
  cursor: not-allowed;
  opacity: 0.6;
}

.button-group.single-group button:disabled:hover {
  background: #151d2e;
  color: #4a5568;
}

.button-group.single-group button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #334155;
  border-radius: 4px;
  background: #1a2436;
  color: white;
  cursor: pointer;
  transition: background 0.2s;
}

.button-group.single-group button:hover {
  background: #1e2c40;
}

.button-group.single-group button svg {
  width: 14px;
  height: 14px;
}

/* "» Max" popup above the card's + button. Hover-only devices get it after a
   short delay; the popup sits inside .inc-wrap (with a padding bridge down to
   the +) so moving the mouse onto it keeps it open. */
.inc-wrap {
  position: relative;
  display: flex;
}

.inc-max-popup {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .inc-max-popup {
    display: block;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 6px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s, visibility 0s linear 0.12s;
  }

  .inc-wrap:hover .inc-max-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.12s 0.2s, visibility 0s linear 0.2s;
  }
}

/* Already on the latest chapter: + is disabled, nothing to jump to */
.inc-wrap .btn-inc:disabled + .inc-max-popup {
  display: none;
}

.button-group.single-group .inc-max-popup .btn-inc-max {
  width: auto;
  height: 28px;
  padding: 0 10px 0 8px;
  gap: 4px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: #94a3b8;
  background: #0f1626;
  border-color: #334155;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.button-group.single-group .inc-max-popup .btn-inc-max:hover {
  background: #1a2436;
  color: #e2e8f0;
}

.card-buttons-bottom .btn-next {
  width: 100%;
  padding: 10px 0;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.card-buttons-bottom .btn-next:not(:disabled) {
  background: #2b4275;
  color: #678ec9;
}

.card-buttons-bottom .btn-next:not(:disabled):hover {
  background: #294785;
}

.card-buttons-bottom .btn-next:disabled {
  background: #2b3a5b;
  color: #5e7295;
  cursor: not-allowed;
}

/* Bulk edit menu styles */
.bulk-edit-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.bulk-edit-option,
.status-option {
  width: 100%;
  padding: 12px 16px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  transition: background 0.2s;
}

.bulk-edit-option:hover,
.status-option:hover {
  background: #1e2c40;
}

.bulk-edit-option svg {
  flex-shrink: 0;
}

/* Bulk Custom Tags sub-modal (reuses the Series Settings tag list rows) */
.bulk-tags-hint {
  font-size: 12px;
  color: #64748b;
  margin: -4px 0 12px;
}

.settings-tag-item.mixed .settings-tag-checkbox {
  background: #334155;
  border-color: #475569;
}

#btn-bulk-tags-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ================================
   PAGINATION
   ================================ */
.pagination-kenmei {
  display: flex;
  justify-content: center;
  min-width: 0;
}

#pagination,
#pagination-bottom {
  margin-top: 16px; /* Add space above pagination */
}

.pagination-kenmei nav {
  display: inline-flex;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border-radius: 0.375rem;
  background: #0f172a;
  border: 1px solid #475569;
}

.pagination-kenmei a,
.pagination-kenmei span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 1rem;
  font-size: 0.875rem;
  color: #e2e8f0;
  text-decoration: none;
  border-left: 1px solid #334155;
  min-width: 2.5rem;
  height: 2.25rem;
}

.pagination-kenmei a.loading {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.pagination-kenmei a:first-child,
.pagination-kenmei span:first-child {
  border-left: none;
}

.pagination-kenmei a:hover:not(.page__current) {
  background: #1e293b;
  color: #ffffff;
}

.pagination-kenmei .page__current {
  background: #678ec9;
  color: #0f172a;
  font-weight: 700;
}

.pagination-kenmei .left-chevron,
.pagination-kenmei .right-chevron {
  padding: 0.25rem 0.5rem;
  min-width: 2.5rem;
}

.pagination-kenmei .left-chevron svg,
.pagination-kenmei .right-chevron svg {
  width: 1.25rem;
  height: 1.25rem;
}

.pagination-kenmei .gap {
  color: #64748b;
  pointer-events: none;
}

.pagination-kenmei .gap.gap-jump {
  pointer-events: auto;
  cursor: pointer;
}

/* "Go to page" box opened from a pagination "…" (portaled to <body>) */
#page-jump-popover {
  position: fixed;
  z-index: 10050;
  width: 180px;
  padding: 10px;
  background: #0f172a;
  border: 1px solid #475569;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  color: #e2e8f0;
  font-size: 0.8125rem;
}

#page-jump-popover .page-jump-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

#page-jump-popover .page-jump-row {
  display: flex;
  gap: 6px;
}

#page-jump-popover input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  background: #1e293b;
  border: 1px solid #475569;
  border-radius: 6px;
  color: #f1f5f9;
  font-size: 16px; /* >=16px keeps iOS from zooming in on focus */
  -moz-appearance: textfield;
}

#page-jump-popover input::-webkit-outer-spin-button,
#page-jump-popover input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#page-jump-popover input:focus {
  outline: none;
  border-color: #678ec9;
}

#page-jump-popover .page-jump-go {
  height: 32px;
  padding: 0 12px;
  background: #678ec9;
  border: none;
  border-radius: 6px;
  color: #0f172a;
  font-weight: 700;
  cursor: pointer;
}

#page-jump-popover .page-jump-go:hover {
  background: #7fa2d6;
}

#page-jump-popover .page-jump-hint {
  margin-top: 6px;
  color: #64748b;
  font-size: 0.75rem;
}

#page-jump-popover.invalid input {
  border-color: #ef4444;
}

#page-jump-popover.invalid .page-jump-hint {
  color: #f87171;
}

.pagination-kenmei .cursor-not-allowed {
  color: #64748b;
  opacity: 1;
  pointer-events: none;
}

/* ================================
   MODALS
   ================================ */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: #141b2f;
  border: 1px solid #334155;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.modal-content h3 {
  margin-bottom: 16px;
}

.modal-content label {
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
}

.modal-content input,
.modal-content select {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px solid #334155;
  border-radius: 4px;
  background: #1a2436;
  color: white;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.modal-buttons button {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}

.modal-buttons #btn-edit-cancel,
.modal-buttons #btn-add-cancel,
.modal-buttons #btn-add-search-cancel,
.modal-buttons #btn-add-related-back {
  background: #334155;
  color: white;
}

.modal-buttons #btn-edit-save,
.modal-buttons #btn-add-submit,
.modal-buttons #btn-add-series-search-submit {
  background: #3182ce;
  color: white;
}

/* Add Series modal: header row + cross-source search view */
.add-series-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

.add-series-modal-header h3 {
  margin-bottom: 0;
}

.icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #cbd5e1;
  cursor: pointer;
}

.icon-btn:hover {
  background: #1e2c40;
  color: white;
}

/* Cross-source search is a PC-only addition to the Add Series modal - the
   modal itself is shared with mobile's own add-series flow, so hide just
   its toggle button there instead of touching the mobile UI. (Related
   series has a phone layout: "RELATED SERIES - MOBILE".) */
@media (max-width: 768px) {
  #btn-add-series-search-toggle {
    display: none;
  }
}

/* Related series: left of the search toggle, with a badge counting the new
   ones. The view lists your series that have related series you don't
   track yet, one card each. */
#btn-add-series-related-toggle {
  position: relative;
  margin-left: auto;
}

#btn-add-series-related-toggle.hidden,
#btn-add-series-search-toggle.hidden {
  display: none;
}

/* Styled like the nav's Errors count */
.add-related-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #e53e3e;
  color: white;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.add-related-badge.hidden {
  display: none;
}

#add-series-modal .modal-content.add-series-related {
  max-width: 760px;
}

.add-related-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.add-related-status {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.add-related-status .error {
  color: #f87171;
}

.add-related-toolbar button {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid #334155;
  border-radius: 4px;
  background: #1a2436;
  color: #cbd5e1;
  cursor: pointer;
}

.modal-content .add-related-toolbar select {
  flex-shrink: 0;
  width: auto;
  margin-top: 0;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}

.add-related-toolbar button:hover:not(:disabled) {
  border-color: #678ec9;
  color: white;
}

.add-related-toolbar button:disabled {
  opacity: 0.5;
  cursor: default;
}

.add-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.add-related-chip {
  padding: 3px 9px;
  border: 1px solid #334155;
  border-radius: 999px;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
}

.add-related-chip span {
  opacity: 0.7;
}

.add-related-chip:hover {
  border-color: #678ec9;
}

.add-related-chip.active {
  background: #1e2c40;
  border-color: #678ec9;
  color: #e2e8f0;
}

.add-related-chip-hidden {
  border-style: dashed;
}

.add-related-chip-all {
  color: #cbd5e1;
  font-weight: 600;
}

.add-related-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(62vh, 600px);
  overflow-y: auto;
}

.add-related-empty {
  padding: 24px 8px;
  text-align: center;
  font-size: 13px;
  color: #94a3b8;
}

/* One of your series: its cover, then its related series one per row */
.add-related-group {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 6px;
}

.add-related-cover {
  width: 56px;
  height: 80px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 4px;
  background: #0f172a;
}

.add-related-group-body {
  flex: 1;
  min-width: 0;
}

.add-related-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.add-related-series {
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: white;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.add-related-series:hover {
  text-decoration: underline;
}

/* Your reading status on the series */
.add-related-status-pill {
  flex-shrink: 0;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.add-related-status-pill[data-status="reading"] { color: #4ade80; }
.add-related-status-pill[data-status="completed"] { color: #60a5fa; }
.add-related-status-pill[data-status="on_hold"] { color: #fbbf24; }
.add-related-status-pill[data-status="dropped"] { color: #f87171; }
.add-related-status-pill[data-status="plan_to_read"] { color: #c084fc; }

/* The series' own sources, then the button that opens its related list */
.add-related-group-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.add-related-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid #334155;
  border-radius: 4px;
  background: #1e2c40;
  color: #cbd5e1;
  font-size: 12px;
  cursor: pointer;
}

.add-related-toggle:hover,
.add-related-toggle.open {
  border-color: #678ec9;
  color: white;
}

.add-related-rows {
  margin-top: 8px;
  padding-top: 2px;
  border-top: 1px solid #243044;
}

.add-related-dismiss {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 10px;
  border: 1px solid #334155;
  border-radius: 4px;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
}

.add-related-dismiss:hover {
  border-color: #f87171;
  color: #f87171;
}

.add-related-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #243044;
}

.add-related-row:first-of-type {
  border-top: none;
}

.add-related-row-info {
  flex: 1;
  min-width: 0;
}

/* The related series' own cover (placeholder until it's looked up) */
.add-related-row-cover {
  width: 40px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 3px;
  background: #0f172a;
}

.add-related-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #e2e8f0;
}

.add-related-relation {
  flex-shrink: 0;
  color: #678ec9;
  font-weight: 600;
}

.add-related-row-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.add-related-new {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #4ade80;
  border: 1px solid #4ade80;
  border-radius: 4px;
  padding: 0 5px;
}

.add-related-meta {
  margin-top: 1px;
  font-size: 12px;
  color: #64748b;
}

.add-related-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.add-related-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid #334155;
  border-radius: 4px;
  font-size: 12px;
  color: #cbd5e1;
  text-decoration: none;
}

.add-related-link:hover {
  border-color: #678ec9;
  color: white;
}

.add-related-use {
  padding: 3px 10px;
  border: none;
  border-radius: 4px;
  background: #3182ce;
  color: white;
  font-size: 12px;
  cursor: pointer;
}

.add-related-use:hover {
  background: #2b6cb0;
}

/* A related series you already track */
.add-related-use.secondary {
  background: #334155;
}

.add-related-use.secondary:hover {
  background: #475569;
}

.add-related-in-library {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #94a3b8;
  border: 1px solid #475569;
  border-radius: 4px;
  padding: 0 5px;
}

.add-related-row.tracked .add-related-row-name {
  color: #94a3b8;
}

.add-related-show-more {
  padding: 8px;
  border: 1px dashed #334155;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}

.add-related-show-more:hover {
  border-color: #678ec9;
  color: white;
}

/* ================================
   RELATED SERIES - MOBILE
   The Add modal's Related view goes full screen (the compact add card
   would squeeze it): a header with the back button first, the filters in
   one row, the chips in one sideways-scrolling line, and cards whose
   related rows run the card's whole width with their buttons on a line of
   their own. Series Settings' Related window is full screen too, with the
   same rows.
   ================================ */
@media (max-width: 768px) {
  #add-series-modal .modal-content.add-series-related {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0 16px max(12px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .add-series-related .add-series-modal-header {
    flex-shrink: 0;
    justify-content: flex-start;
    gap: 12px;
    margin: 0;
    padding: max(14px, env(safe-area-inset-top)) 0 10px;
  }

  .add-series-related .add-series-modal-header h3 {
    font-size: 20px;
  }

  /* the back button, first */
  .add-series-related #btn-add-series-related-toggle {
    order: -1;
    margin-left: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  #add-series-related-view:not(.hidden) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  #add-series-related-view .modal-buttons {
    display: none;
  }

  /* status line + Check now, then the two selects half and half */
  .add-related-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* the status line fills the first row beside Check now, so the
     selects wrap onto the second */
  .add-related-toolbar .add-related-status {
    flex: 1 1 calc(100% - 130px);
    order: -2;
  }

  .add-related-toolbar button {
    order: -1;
    height: 34px;
    align-self: center;
  }

  .modal-content .add-related-toolbar select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    height: 36px;
  }

  .add-related-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px 10px;
    padding: 2px 16px;
    scrollbar-width: none;
  }

  .add-related-chips::-webkit-scrollbar {
    display: none;
  }

  .add-related-chip {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 5px 11px;
  }

  #add-series-related-view .add-related-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    -webkit-overflow-scrolling: touch;
  }

  /* Card: cover beside the title and buttons, the related rows under both */
  .add-related-group {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
  }

  .add-related-cover {
    grid-row: 1 / span 2;
    width: 60px;
    height: 86px;
  }

  .add-related-group-body {
    display: contents;
  }

  .add-related-group-head,
  .add-related-group-actions {
    grid-column: 2;
    margin: 0;
  }

  .add-related-group-head {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .add-related-series {
    flex-basis: calc(100% - 60px);
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .add-related-dismiss {
    order: -1;
    margin-left: auto;
    align-self: flex-start;
  }

  .add-related-group-head .add-related-series {
    order: -2;
  }

  .add-related-toggle {
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
    padding: 7px 10px;
  }

  .add-related-rows {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* cover on the left, the text and then the buttons beside it */
  .add-related-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
    padding: 8px 0;
  }

  .add-related-row-cover {
    grid-row: 1 / span 2;
    width: 44px;
    height: 62px;
  }

  .add-related-row-info,
  .add-related-row .add-related-links {
    grid-column: 2;
  }

  .add-related-row-title {
    flex-wrap: wrap;
    row-gap: 3px;
  }

  .add-related-row-name {
    flex-basis: 100%;
    white-space: normal;
  }

  .add-related-links {
    flex-wrap: wrap;
  }

  .add-related-link,
  .add-related-use {
    padding: 6px 10px;
  }

  .add-related-use {
    margin-left: auto;
  }

  /* Series Settings' Related window */
  #related-modal .related-modal-content {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: max(16px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
  }

  #related-modal h3 {
    font-size: 20px;
  }

  /* the window is a flex column here: its status line mustn't grow */
  #related-modal .add-related-status {
    flex: none;
  }

  #related-modal .related-modal-list {
    flex: 1;
    min-height: 0;
    max-height: none;
  }

  #related-modal .modal-buttons {
    margin-top: 12px;
  }

  #related-modal .modal-buttons button {
    flex: 1;
    height: 42px;
  }
}

/* Add Series modal link preview. The modal widens to Series Settings' size
   once there's a preview to show (phones: see "ADD SERIES MODAL - MOBILE").
   Status is picked in the preview, so the plain Status select is only its
   hidden value holder. */
#add-series-modal .modal-content.add-series-wide {
  max-width: 720px;
}

/* Desktop, with a preview showing: Cancel/Add move into the details column,
   their bottom level with the cover's. The link view becomes a two-column
   grid (the preview's own flex box dissolved into it) where the cover spans
   the details row and the buttons row - whatever height the cover adds to
   those rows, the buttons sit at the bottom of it. Phones reflow this same
   markup their own way (see "ADD SERIES MODAL - MOBILE"). */
@media (min-width: 769px) {
  .add-series-wide #add-series-url-view {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 20px;
  }

  .add-series-wide #add-series-url-label { grid-column: 1 / -1; grid-row: 1; }
  .add-series-wide #add-preview-message { grid-column: 1 / -1; grid-row: 2; }
  .add-series-wide #add-preview { display: contents; }
  .add-series-wide .add-preview-cover-col { grid-column: 1; grid-row: 3 / span 2; align-self: start; }
  .add-series-wide .add-preview-fields { grid-column: 2; grid-row: 3; }

  .add-series-wide .modal-buttons {
    grid-column: 2;
    grid-row: 4;
    align-self: end;
    margin-top: 12px;
  }
}

#new-series-status-label {
  display: none;
}

#add-series-modal #btn-add-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.add-preview-message {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  font-size: 13px;
  color: #94a3b8;
}

.add-preview-message.hidden {
  display: none;
}

.add-preview-message.error {
  color: #f87171;
}

.add-preview-message a {
  color: #678ec9;
  cursor: pointer;
  text-decoration: none;
}

.add-preview-message a:hover {
  text-decoration: underline;
}

.add-preview-spinner {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 2px solid #334155;
  border-top-color: #678ec9;
  border-radius: 50%;
  animation: add-preview-spin 0.8s linear infinite;
}

@keyframes add-preview-spin {
  to { transform: rotate(360deg); }
}

.add-preview {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.add-preview.hidden {
  display: none;
}

.add-preview-cover-col {
  flex-shrink: 0;
  width: 220px;
}

.add-preview.loading .settings-cover-img {
  animation: add-preview-pulse 1.4s ease-in-out infinite;
}

@keyframes add-preview-pulse {
  50% { opacity: 0.5; }
}

.add-preview-title {
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: white;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.add-preview-subtitle {
  margin-bottom: 12px;
  font-size: 13px;
  color: #64748b;
}

/* Shows which site the link is from - not a picker here, so no hover */
.add-preview-source,
.add-preview-source:hover {
  cursor: default;
  border-color: #334155;
}

/* ...until there's more than one link: then it opens the list of them */
.add-preview-source.has-choices {
  cursor: pointer;
}

.add-preview-source.has-choices:hover {
  border-color: #678ec9;
}

/* Source / Status / Custom Tags menus are positioned against their button
   (not the whole field with its label) - which matters on phones, where
   they open upwards and would otherwise sit above the label */
.add-menu-anchor {
  position: relative;
}

.add-source-more {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}

.add-source-list {
  margin-bottom: 0;
}

.add-source-item-choice {
  cursor: pointer;
}

.add-source-item-status {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.add-source-item-status.warn {
  color: #fbbf24;
}

.add-source-item .settings-source-item-actions {
  margin-left: 0;
}

/* The "open source" icons here and in Series Settings are real links (so
   middle-click / Ctrl+click open a tab) - no link underline */
a.btn-icon {
  text-decoration: none;
}

.add-preview-cover-col {
  position: relative;
}

.add-preview-back {
  display: none;
}

.add-chapter-select-group {
  position: relative;
}

/* Chevrons at the right edge of the Last Read / Status pickers (Source's
   chapter number already pushes right, and "+N" stays beside the name) */
.add-preview .settings-source-selector:not(.add-preview-source) .settings-source-name {
  flex: 1;
  min-width: 0;
}

.add-preview-controls.hidden {
  display: none;
}

/* Tags sits in the right-hand column here, so its wide popover opens
   leftwards instead of running past the modal's edge. */
#add-tags-menu {
  left: auto;
  right: 0;
}

.add-preview-warning {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: #fbbf24;
}

.add-preview-warning.hidden {
  display: none;
}

.add-preview-warning-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.add-preview-warning button {
  margin-left: 6px;
  padding: 2px 10px;
  border: 1px solid #678ec9;
  border-radius: 4px;
  background: none;
  color: #678ec9;
  font-size: 12px;
  cursor: pointer;
}

.add-preview-warning-actions button {
  margin-left: 0;
}

.add-preview-warning button:hover {
  background: #1a2436;
}

/* Confirmation modal specific styles */
.confirm-modal .modal-content {
  max-width: 400px;
  text-align: center;
}

.confirm-modal .warning-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
}

.confirm-modal .warning-icon svg {
  width: 100%;
  height: 100%;
}

.confirm-modal h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.confirm-modal p {
  color: #94a3b8;
  margin-bottom: 20px;
  font-size: 14px;
}

.confirm-modal .modal-buttons {
  justify-content: center;
  gap: 12px;
}

.confirm-modal .modal-buttons button {
  min-width: 100px;
}

.confirm-modal .btn-confirm-danger {
  background: #e53e3e;
  color: white;
}

.confirm-modal .btn-confirm-danger:hover {
  background: #c53030;
}

.confirm-modal .btn-confirm-warning {
  background: #eab308;
  color: #1f2937;
  font-weight: 600;
}

.confirm-modal .btn-confirm-warning:hover {
  background: #ca8a04;
}

/* ================================
   UTILITIES
   ================================ */
.hidden {
  display: none;
}

/* Back to Top Button */
#back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1665f4;
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(22, 101, 244, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background: #1256d0;
  box-shadow: 0 6px 16px rgba(22, 101, 244, 0.5);
  transform: translateY(-2px);
}

#back-to-top svg {
  width: 20px;
  height: 20px;
}

.settings-modal {
  max-width: 700px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #334155;
  position: sticky;
  top: 0;
  background: #141b2f;
  z-index: 10;
}

.settings-header h3 {
  font-size: 20px;
  margin: 0;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.settings-title-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* #settings-title-selector also carries the shared .settings-source-selector
   class, declared later in this file - an ID selector is used here instead
   of a second class so these overrides win regardless of declaration order. */
#settings-title-selector {
  height: auto;
  padding: 4px 10px;
  background: transparent;
  border-color: transparent;
}

#settings-title-selector:hover {
  background: #1a2436;
  border-color: #334155;
}

#settings-title-selector .settings-source-name {
  font-size: 20px;
  font-weight: 600;
  color: white;
}

#settings-title-menu {
  min-width: 320px;
}

.btn-close-modal {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.btn-close-modal:hover {
  background: #1a2436;
  color: white;
}

.settings-section {
  padding: 24px;
  border-bottom: 1px solid #334155;
}

.settings-section:last-of-type {
  border-bottom: none;
}

.settings-cover-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  padding-top: 0;
}

.settings-cover-col {
  flex-shrink: 0;
  width: 322px;
  position: relative;
}

.settings-cover-edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.settings-cover-col:hover .settings-cover-edit-btn,
.settings-cover-col.cover-menu-open .settings-cover-edit-btn {
  opacity: 1;
}

.settings-cover-edit-btn:hover {
  background: rgb(2, 60, 191);
}

.settings-cover-menu {
  position: absolute;
  top: 48px;
  right: 10px;
  width: 260px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.settings-cover-menu.hidden {
  display: none;
}

/* Applied once openCoverMenu() reparents the menu to <body>, same as
   .settings-typetags-menu-portal: inside the modal it was clipped and gave
   the modal a scrollbar. Position is set inline from the pencil button. */
.settings-cover-menu-portal {
  position: fixed;
  z-index: 1001;
  overflow-y: auto;
}

.settings-cover-menu-section + .settings-cover-menu-section {
  margin-top: 0;
}

.settings-cover-menu-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 0 0 8px;
}

.settings-cover-menu-divider {
  height: 1px;
  background: #334155;
  margin: 14px 0;
}

.settings-cover-menu-empty {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

.settings-cover-source-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-cover-source-thumb {
  width: 50px;
  height: 71px;
  border-radius: 4px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  background: #0f172a;
}

.settings-cover-source-thumb:hover {
  border-color: rgb(2, 60, 191);
}

/* #settings-cover-gallery-list reuses .settings-cover-source-list's grid
   styling (display:flex) for the thumbnails, but the carousel + page
   counter below it need to stack vertically, not sit side by side as
   flex items - override back to block just for this one list. */
#settings-cover-gallery-list {
  display: block;
}

.gallery-cover-carousel {
  position: relative;
  display: flex;
  justify-content: center;
}

.gallery-cover-page {
  display: flex;
  gap: 8px;
}

.gallery-cover-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 4px;
  z-index: 2;
}

.gallery-cover-arrow:hover {
  color: white;
}

.gallery-cover-arrow-prev {
  left: -10px;
}

.gallery-cover-arrow-next {
  right: -10px;
}

.gallery-cover-counter {
  text-align: center;
  color: #64748b;
  font-size: 11px;
  margin: 6px 0 0;
}

.settings-cover-upload-item {
  position: relative;
  width: 50px;
  height: 71px;
  flex-shrink: 0;
}

.settings-cover-upload-item .settings-cover-source-thumb {
  width: 100%;
  height: 100%;
}

.settings-cover-upload-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #db2b42;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.settings-cover-upload-item:hover .settings-cover-upload-delete {
  opacity: 1;
}

.settings-cover-upload-delete:hover {
  background: #b91c3c;
}

.settings-cover-url-row {
  display: flex;
  gap: 6px;
}

.settings-cover-url-input {
  flex: 1;
  min-width: 0;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 8px;
  color: white;
  font-size: 13px;
  font-family: inherit;
}

.settings-cover-url-input:focus {
  outline: none;
  border-color: #678ec9;
}

.settings-cover-url-apply,
.settings-cover-upload-btn {
  background: #263449;
  border: 1px solid #334155;
  color: white;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.settings-cover-url-apply:hover,
.settings-cover-upload-btn:hover {
  background: #334155;
}

.settings-source-search-toggle {
  flex-shrink: 0;
  width: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #263449;
  border: 1px solid #334155;
  color: #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
}

.settings-source-search-toggle:hover {
  background: #334155;
  color: white;
}

.settings-cover-upload-btn {
  width: 100%;
}

.settings-cover-upload-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─── Series Settings modal: note button + note dialog ─── */
/* Opens #note-modal (Write / Preview). */
.settings-note-btn {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.settings-note-btn:hover {
  border-color: #678ec9;
  color: #e2e8f0;
}

.settings-note-btn.has-note {
  color: #e2e8f0;
}

.settings-note-btn svg {
  flex-shrink: 0;
}

/* Desktop only: the modal is pinned to the cover's height, so room for the
   Notes row comes from every field and button being a little shorter (32px
   instead of 36-40px, Save 36px) and the 6px gaps used everywhere else in
   the column. Phones scroll the modal instead and keep their own sizes. */
@media (min-width: 769px) {
  #edit-series-modal .settings-chapter-col .settings-source-selector,
  #edit-series-modal .settings-tags-selector,
  #edit-series-modal .settings-stepper,
  #edit-series-modal .settings-note-btn,
  #edit-series-modal .settings-action-btn {
    height: 32px;
  }

  #edit-series-modal .settings-save-btn {
    height: 36px;
  }

  #edit-series-modal .settings-actions-buttons-secondary {
    margin-top: 6px;
  }
}

/* The related series of the series in Settings - on top of it, like the
   note (below). Its rows are the Add modal's Related list rows. */
#related-modal {
  z-index: 1200;
}

#related-modal .related-modal-content {
  max-width: 680px;
  outline: none;
}

#related-modal h3 {
  margin-bottom: 4px;
}

#related-modal .add-related-status {
  margin-bottom: 10px;
}

.related-modal-list {
  max-height: min(60vh, 520px);
  overflow-y: auto;
}

/* All / Not added / In library */
.related-modal-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.related-modal-filter.hidden {
  display: none;
}

.related-modal-filter-btn {
  padding: 4px 12px;
  border: 1px solid #334155;
  border-radius: 999px;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
}

.related-modal-filter-btn span {
  opacity: 0.7;
}

.related-modal-filter-btn:hover {
  border-color: #678ec9;
}

.related-modal-filter-btn.active {
  background: #1e2c40;
  border-color: #678ec9;
  color: #e2e8f0;
}

.modal-buttons #btn-related-modal-close {
  background: #334155;
  color: white;
}

/* Opens on top of Series Settings (same .modal z-index otherwise) but
   under showConfirmDialog's overlay (5000). */
#note-modal {
  z-index: 1200;
}

#note-modal .note-modal-content {
  width: min(460px, calc(100% - 32px));
  max-width: none;
  box-sizing: border-box;
  padding: 16px;
  background: #141b2f;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.note-modal-tabs {
  display: inline-flex;
  align-self: flex-start;
  gap: 2px;
  padding: 3px;
  background: #0f1626;
  border: 1px solid #1e293b;
  border-radius: 8px;
}

.note-modal-tab {
  padding: 5px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.note-modal-tab:hover {
  color: #e2e8f0;
}

.note-modal-tab.active {
  background: #1a2436;
  color: #e2e8f0;
}

.note-modal-input,
.note-modal-preview {
  width: 100%;
  height: 180px;
  box-sizing: border-box;
  padding: 10px 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #e2e8f0;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}

.note-modal-input {
  resize: vertical;
  min-height: 100px;
  max-height: 60vh;
}

.note-modal-input:focus {
  outline: none;
  border-color: #678ec9;
}

.note-modal-input::placeholder {
  color: #64748b;
}

.note-modal-preview {
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.note-modal-preview.hidden,
.note-modal-input.hidden {
  display: none;
}

.note-modal-preview-empty {
  color: #64748b;
  font-style: italic;
}

/* Rendered note markdown (see renderNoteMarkdown in dashboard.js): the
   note dialog's Preview tab and the card's note tooltip */
.note-markdown > :first-child { margin-top: 0; }
.note-markdown > :last-child { margin-bottom: 0; }
.note-markdown p,
.note-markdown ul,
.note-markdown ol,
.note-markdown blockquote,
.note-markdown pre { margin: 0 0 8px; }
.note-markdown h3,
.note-markdown h4,
.note-markdown h5 { margin: 10px 0 6px; line-height: 1.3; color: white; }
.note-markdown h3 { font-size: 17px; }
.note-markdown h4 { font-size: 15px; }
.note-markdown h5 { font-size: 14px; }
.note-markdown ul,
.note-markdown ol { padding-left: 22px; }
.note-markdown a { color: #678ec9; }
.note-markdown blockquote {
  padding-left: 10px;
  border-left: 3px solid #334155;
  color: #94a3b8;
}
.note-markdown code {
  padding: 1px 5px;
  background: #0f1626;
  border-radius: 4px;
  font-size: 13px;
}
.note-markdown pre {
  padding: 8px 10px;
  background: #0f1626;
  border-radius: 6px;
  overflow-x: auto;
}
.note-markdown pre code { padding: 0; background: none; }
.note-markdown hr {
  border: none;
  border-top: 1px solid #334155;
  margin: 10px 0;
}

.note-modal-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
}

.note-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.note-modal-count {
  margin-right: auto;
  font-size: 12px;
  color: #64748b;
}

.note-modal-count.over {
  color: #f87171;
}

.note-modal-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.note-modal-btn-secondary {
  background: #1a2436;
  border: 1px solid #334155;
  color: #e2e8f0;
}

.note-modal-btn-secondary:hover {
  border-color: #678ec9;
}

.note-modal-btn-primary {
  background: rgb(2, 60, 191);
  border: 1px solid rgb(2, 60, 191);
  color: white;
}

.note-modal-btn-primary:hover:not(:disabled) {
  background: rgb(18, 80, 220);
}

.note-modal-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Series Settings modal: Actions row (Reset to Not Started / Check Now) ─── */
.settings-actions-row > label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  margin-bottom: 4px;
}

.settings-actions-buttons {
  display: flex;
  gap: 12px;
}

.settings-actions-buttons-secondary {
  margin-top: 8px;
}

.settings-action-btn {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: 40px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 4px;
  color: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.settings-action-btn:hover {
  border-color: #678ec9;
  background: #1e2c40;
}

.settings-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-action-btn-danger {
  color: #f87171;
  border-color: #7f1d1d;
}

.settings-action-btn-danger:hover {
  color: white;
  background: #e53e3e;
  border-color: #e53e3e;
}

/* Series Settings modal only: sit higher in the viewport (like Kenmei)
   and drop the divider line under the title, without touching the
   shared .modal/.settings-header/.settings-modal rules mobile uses. */
#edit-series-modal {
  align-items: flex-start;
}

#edit-series-modal .settings-modal {
  margin-top: 64px;
}

#edit-series-modal .settings-header {
  border-bottom: none;
}

.settings-cover-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 221 / 331;
  object-fit: cover;
  border-radius: 8px;
  background: #1a2436;
  border: 1px solid #334155;
}

.settings-chapter-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.settings-chapter-col .form-group {
  margin-bottom: 6px;
}

#chapter-select-group {
  position: relative;
}

.settings-chapter-col .form-group label {
  margin-bottom: 4px;
}

.settings-manual-hint {
  margin-top: 4px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
}

.settings-manual-hint a {
  color: #678ec9;
  text-decoration: none;
  cursor: pointer;
}

.settings-manual-hint a:hover {
  text-decoration: underline;
}

.settings-manual-group {
  display: flex;
  justify-content: center;
}

.settings-manual-group.hidden {
  display: none;
}

.settings-stepper-row {
  display: flex;
  gap: 12px;
}

.settings-stepper-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.settings-chapter-col .settings-stepper-col label {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin-bottom: 10px;
  text-align: center;
}

/* Boxed the same way as .form-input (the "Last Read Chapter" select this
   replaces) so auto/manual mode read as the same weight of control. */
.settings-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  height: 36px;
  padding: 6px 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 4px;
}

.settings-stepper-btn {
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}

.settings-stepper-btn:hover {
  background: #334155;
}

.settings-stepper-value {
  min-width: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.settings-stepper-value-muted {
  color: #64748b;
  font-weight: 600;
}

/* Specificity note: .modal-content input has (0,1,1) via the element part
   of the selector, which beats a bare .settings-stepper-input class alone
   -- scope to the parent class too so this actually wins the cascade. The
   box itself now lives on .settings-stepper (above), so the input stays
   borderless/transparent and just fills the space between the +/- buttons. */
.settings-manual-group .settings-stepper-input {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  border: none;
  border-radius: 0;
  background: none;
  outline: none;
  padding: 0;
  font-family: inherit;
}

.settings-stepper-input::placeholder {
  color: #64748b;
  opacity: 1;
  font-weight: 600;
}

/* Hide native number spinner arrows -- the +/- buttons already do that job */
.settings-stepper-input::-webkit-outer-spin-button,
.settings-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ─── Series Settings modal: Source selector ─── */
.settings-source-group {
  position: relative;
}

.settings-source-selector {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 4px;
  color: white;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}

.settings-source-selector:hover {
  border-color: #678ec9;
}

.settings-source-selector.open .settings-source-chevron {
  transform: rotate(180deg);
}

.settings-source-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ade80;
  flex-shrink: 0;
}

.settings-source-dot.inactive {
  background: #64748b;
}

/* The source's last fetch failed (site down...) */
.settings-source-dot.down {
  background: #ef4444;
}

/* Only the site's API is down, its website still loads */
.settings-source-dot.down.api-down {
  background: #f97316;
}

.settings-source-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-source-chapter {
  margin-left: auto;
  padding-left: 8px;
  color: #64748b;
  font-size: 13px;
  flex-shrink: 0;
}

.settings-source-chevron {
  flex-shrink: 0;
  color: #64748b;
  transition: transform 0.15s;
}

.settings-source-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

.settings-source-menu.hidden {
  display: none;
}

/* Narrow variant for popovers that sit in a half-width column (Status) --
   overrides the full-width left:0;right:0 above with a fixed width anchored
   to the left edge, so it doesn't stretch to match its cramped trigger. */
.settings-dropdown-menu-narrow {
  right: auto;
  width: 200px;
}

.settings-dropdown-search {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-family: inherit;
}

.settings-dropdown-search:focus {
  outline: none;
  border-color: #678ec9;
}

.settings-dropdown-search::placeholder {
  color: #64748b;
}

.settings-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
}

.settings-dropdown-item {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: white;
}

.settings-dropdown-item:hover {
  background: #263449;
}

.settings-dropdown-item.selected {
  background: rgb(2, 60, 191);
}

.settings-title-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.settings-dropdown-item-chapter {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.settings-dropdown-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-dropdown-item-date {
  flex-shrink: 0;
  font-size: 12px;
  color: #64748b;
}

.settings-title-item-label {
  flex-shrink: 0;
  width: 56px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
}

.settings-title-item-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-source-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.settings-source-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
}

.settings-source-item:hover {
  background: #263449;
}

.settings-source-item-name {
  font-weight: 600;
  color: white;
  font-size: 14px;
}

.settings-source-item-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #4ade80;
  border: 1px solid #4ade80;
  border-radius: 4px;
  padding: 1px 5px;
}

.settings-source-item-actions {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.settings-source-item-actions .btn-icon {
  padding: 5px;
}

/* Inline "Remove this source?" confirm state, swapped into the row in
   place of the name/badge/actions - same pattern as Manage Views' delete
   confirm (.manage-bookmark-confirm-*), just source-scoped. */
.settings-source-confirm-text {
  flex: 1;
  color: #e2e8f0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-source-confirm-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.settings-source-confirm-actions .bookmark-form-btn {
  flex: none;
  padding: 0 12px;
}

/* ─── Series Settings modal: Status + Tags row ─── */
.settings-status-tags-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.settings-status-col,
.settings-tags-col {
  flex: 1;
  min-width: 0;
  position: relative;
}

/* #edit-status is a <select>, which defaults to inline-block and so doesn't
   margin-collapse with the label above it the way the Tags box's block-level
   div does -- the two 4px margins stacked instead of collapsing, leaving
   Status sitting 4px lower. Zero it out so both rely solely on the label's
   margin-bottom for spacing, which does collapse identically either way. */
#edit-status {
  margin-top: 0;
}

.settings-tags-col {
  position: relative;
}

.settings-tags-selector {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 4px;
  color: white;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}

.settings-tags-selector:hover {
  border-color: #678ec9;
}

.settings-tags-selector-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-tags-selector-muted {
  color: #64748b;
}

.settings-tags-selector svg {
  flex-shrink: 0;
  color: #64748b;
}

/* Wider than the Tags column itself (which only gets half the row, split
   with Status) so it needs an explicit width rather than left:0;right:0;
   anchored to the left edge to line up with Status's popover next to it. */
.settings-tags-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

/* Applied once openTagsMenu() reparents the menu to <body> to escape the
   modal's overflow-x clipping (see that function for why). top/left are set
   inline from the trigger's live position at that point; position just
   needs to switch from absolute (relative to .settings-tags-col) to fixed
   (relative to the viewport), and z-index needs to clear the modal
   backdrop's 1000. */
.settings-tags-menu-portal {
  position: fixed;
  z-index: 1001;
}

.settings-tags-menu.hidden {
  display: none;
}

.settings-tags-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  max-height: 240px;
  overflow-y: auto;
}

.settings-tag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.settings-tag-item:hover {
  background: #263449;
}

.settings-tag-checkbox {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.settings-tag-item.checked .settings-tag-checkbox {
  background: rgb(2, 60, 191);
  border-color: rgb(2, 60, 191);
}

.settings-tag-item-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-tag-delete {
  margin-left: auto;
  flex-shrink: 0;
  padding: 5px;
}

/* ─── Series Settings modal: Content Type + the series' own Tags ─── */
.settings-segmented {
  display: flex;
  border: 1px solid #334155;
  border-radius: 4px;
  overflow: hidden;
  background: #1a2436;
}

.settings-segmented-btn {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  border: none;
  border-right: 1px solid #334155;
  color: #94a3b8;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-segmented-btn:last-child {
  border-right: none;
}

.settings-segmented-btn:hover {
  background: #263449;
  color: white;
}

.settings-segmented-btn.active {
  background: rgb(2, 60, 191);
  color: white;
  font-weight: 600;
}

/* Content type / rating colours -- the same ones the /stats breakdowns use
   (COLOR_MAP in stats.html), so a value reads the same colour in both places.
   Each button carries a bar of its colour along the bottom edge (a dot inside
   the button would eat the width the labels need -- they truncate as it is);
   the selected one is tinted with the colour instead of the generic blue and
   gets an inset ring so it still stands out when the tint is faint. */
.settings-segmented-btn[data-value="manga"],
.settings-summary-dot[data-value="manga"]     { --seg-color: #3b82f6; }
.settings-segmented-btn[data-value="manhwa"],
.settings-summary-dot[data-value="manhwa"]    { --seg-color: #10b981; }
.settings-segmented-btn[data-value="manhua"],
.settings-summary-dot[data-value="manhua"]    { --seg-color: #f59e0b; }
.settings-segmented-btn[data-value="other"],
.settings-summary-dot[data-value="other"]     { --seg-color: #6366f1; }
.settings-segmented-btn[data-value="safe"],
.settings-summary-dot[data-value="safe"]      { --seg-color: #22c55e; }
.settings-segmented-btn[data-value="mild"],
.settings-summary-dot[data-value="mild"]      { --seg-color: #eab308; }
.settings-segmented-btn[data-value="mature"],
.settings-summary-dot[data-value="mature"]    { --seg-color: #f97316; }
.settings-segmented-btn[data-value="explicit"],
.settings-summary-dot[data-value="explicit"]  { --seg-color: #ef4444; }

.settings-segmented-btn[data-value] {
  box-shadow: inset 0 -3px 0 var(--seg-color);
}

.settings-segmented-btn[data-value].active {
  background: #263449; /* fallback where color-mix() isn't supported */
  background: color-mix(in srgb, var(--seg-color) 24%, #1a2436);
  box-shadow: inset 0 0 0 1.5px var(--seg-color);
}

/* The Type, Rating & Tags button's summary line: type, rating and tag count
   as separate flex items so each dot is centred on its label's line box
   (vertical-align on an inline dot sits it visibly low against the text). */
#settings-typetags-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.settings-summary-part {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  white-space: nowrap;
}

/* If the line ever runs out of room, the tag count gives way (with an
   ellipsis, as the plain-text summary did) rather than the type or rating. */
.settings-summary-part:last-child {
  display: block;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-summary-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--seg-color);
}

/* Phone widths: each of the four options is only ~70-80px wide, and the
   selected one is bold, so "Suggestive" got cut to "Suggesti…". A little
   less side padding and a 13px label lets it (and "Manhwa") fit down to
   ~360px. Scoped to the menu, not #edit-series-modal: the menu is moved to
   <body> when it opens, so it is no longer inside the modal. */
@media (max-width: 768px) {
  .settings-typetags-menu .settings-segmented-btn {
    padding: 0 3px;
    font-size: 13px;
  }
}

/* The Content Type & Tags button (a full-width selector like Source/Status whose
   text summarises both) and the menu it opens. */
.settings-typetags-group {
  position: relative;
}

/* Something in the menu differs from what's saved */
.settings-source-selector.changed .settings-source-name {
  color: #678ec9;
}

.settings-typetags-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  box-sizing: border-box;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 20;
}

/* Applied once openTypeTagsMenu() reparents the menu to <body> -- the modal
   scrolls, which would clip an absolutely-positioned menu at its edge. The
   position (top/bottom/left/width/max-height) is set inline from the button's
   live coordinates; z-index has to clear the modal backdrop's 1000. */
.settings-typetags-menu-portal {
  position: fixed;
  z-index: 1001;
  overflow-y: auto;
}

.settings-typetags-menu.hidden {
  display: none;
}

.settings-typetags-menu-label {
  margin: 0 0 6px 0;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.settings-typetags-menu-label:not(:first-child) {
  margin-top: 14px;
}

.settings-typetags-done {
  width: 100%;
  height: 32px;
  margin-top: 12px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #cbd5e1;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}

.settings-typetags-done:hover {
  background: #263449;
  color: white;
}

.settings-scraped-tags-count {
  color: #64748b;
  font-weight: 400;
}

.settings-scraped-tags-box {
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 8px;
}

.settings-scraped-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 110px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.settings-scraped-tags-empty {
  color: #64748b;
  font-size: 13px;
}

.settings-scraped-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 999px;
  color: #e2e8f0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Added in this session, not saved yet */
.settings-scraped-tag.pending {
  border-color: #678ec9;
}

.settings-scraped-tag-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.settings-scraped-tag-x:hover {
  background: #334155;
  color: white;
}

.settings-scraped-tags-input {
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  padding: 0 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 4px;
  color: white;
  font-family: inherit;
  font-size: 14px;
}

.settings-scraped-tags-input:focus {
  outline: none;
  border-color: #678ec9;
}

.settings-scraped-tags-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Suggestions sit inline under the input (not a popover) -- the modal scrolls,
   so an absolutely-positioned list would be clipped at its edge. */
.settings-scraped-tags-suggest {
  margin-top: 6px;
  max-height: 132px;
  overflow-y: auto;
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 6px;
}

.settings-scraped-tags-suggest.hidden {
  display: none;
}

.settings-scraped-tag-option {
  padding: 6px 10px;
  color: #e2e8f0;
  font-size: 13px;
  cursor: pointer;
}

.settings-scraped-tag-option:hover {
  background: #263449;
}

.settings-scraped-tag-option.add-new {
  color: #678ec9;
}

.settings-scraped-tags-suggest-empty {
  padding: 8px 10px;
  color: #64748b;
  font-size: 13px;
}

.settings-save-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
  background: rgb(2, 60, 191);
  border-color: rgb(2, 60, 191);
}

.settings-save-btn:disabled {
  background: rgb(2, 60, 191);
  border-color: rgb(2, 60, 191);
  opacity: 0.5;
  cursor: not-allowed;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.section-header svg {
  color: #678ec9;
}

.section-header h4 {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 10px 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: #678ec9;
}

.form-actions-inline {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* Sources List */
.sources-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.source-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
  transition: background 0.2s;
}

.source-item.primary {
  border-color: #678ec9;
  background: rgba(103, 142, 201, 0.1);
}

.source-item:hover {
  background: #1e2c40;
}

.source-radio {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  accent-color: #678ec9;
  flex-shrink: 0;
}

.source-info {
  flex: 1;
  min-width: 0;
}

.source-type {
  font-size: 12px;
  font-weight: 600;
  color: #678ec9;
  margin-bottom: 2px;
}

.source-url {
  font-size: 12px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-actions {
  display: flex;
  gap: 4px;
}

.btn-icon {
  padding: 6px;
  background: none;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #1a2436;
  border-color: #678ec9;
  color: white;
}

.btn-icon.danger:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.btn-add-source {
  width: 100%;
  padding: 10px;
  background: #1a2436;
  border: 1px dashed #334155;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-add-source:hover {
  border-color: #678ec9;
  color: #678ec9;
  background: rgba(103, 142, 201, 0.05);
}

.add-source-form {
  margin-top: 12px;
  padding: 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
}

.add-source-form input {
  width: 100%;
  padding: 10px 12px;
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  margin-bottom: 12px;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Footer Buttons */
.settings-footer {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #334155;
  background: #0f1419;
  position: sticky;
  bottom: 0;
}

.spacer {
  flex: 1;
}

.btn-primary,
.btn-secondary,
.btn-cancel,
.btn-danger {
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-primary {
  background: #1665f4;
  color: white;
  border-color: #1665f4;
}

.btn-primary:hover {
  background: #1256d0;
}

.btn-secondary {
  background: #1a2436;
  color: #cbd5e1;
  border-color: #334155;
}

.btn-secondary:hover {
  background: #1e2c40;
  border-color: #678ec9;
}

.btn-cancel {
  background: transparent;
  color: #94a3b8;
  border-color: #334155;
}

.btn-cancel:hover {
  background: #1a2436;
  color: white;
}

.btn-danger {
  background: #e53e3e;
  color: white;
  border-color: #e53e3e;
}

.btn-danger:hover {
  background: #c53030;
}

.loading-text {
  text-align: center;
  color: #64748b;
  font-size: 14px;
  padding: 12px;
}

/* Sources List */
.sources-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.source-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #1a2436;
  border: 1px solid #334155;
  border-radius: 8px;
  transition: all 0.2s;
  cursor: grab;
}

.source-item:active {
  cursor: grabbing;
}

.source-item.primary {
  border-color: #678ec9;
  background: rgba(103, 142, 201, 0.1);
}

.source-item:hover {
  background: #1e2c40;
}

.source-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* Drag Handle */
.source-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #64748b;
  cursor: grab;
  flex-shrink: 0;
}

.source-drag-handle:active {
  cursor: grabbing;
}

.source-drag-handle svg {
  width: 16px;
  height: 16px;
}

.source-info {
  flex: 1;
  min-width: 0;
}

.source-type {
  font-size: 12px;
  font-weight: 600;
  color: #678ec9;
  margin-bottom: 2px;
}

.source-type .primary-badge {
  background: #678ec9;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-left: 6px;
}

.source-url {
  font-size: 12px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-actions {
  display: flex;
  gap: 4px;
}

.btn-icon {
  padding: 6px;
  background: none;
  border: 1px solid #334155;
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #1a2436;
  border-color: #678ec9;
  color: white;
}

.btn-icon.danger:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.sources-help-text {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 12px;
  padding: 8px;
  background: rgba(103, 142, 201, 0.05);
  border-radius: 6px;
  border-left: 3px solid #678ec9;
}

/* ================================
   NOTIFICATION SYSTEM
   ================================ */
/* Confirm dialog (showConfirmDialog in notifications.js) -- replaces the
   browser's native confirm(). z-index sits above the app's own modals (up to
   4000) but below the toast notifications (9999). */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
  animation: confirm-dialog-fade 0.12s ease-out;
}

@keyframes confirm-dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.confirm-dialog {
  width: 100%;
  max-width: 420px;
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.confirm-dialog-title {
  margin: 0 0 8px 0;
  color: white;
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.confirm-dialog-message {
  margin: 0 0 20px 0;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* A dialog with no message: the buttons follow the title directly */
.confirm-dialog-title + .confirm-dialog-actions {
  margin-top: 12px;
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.confirm-dialog-actions button {
  min-width: 88px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #334155;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}

.confirm-dialog-actions button:focus-visible {
  outline: 2px solid #678ec9;
  outline-offset: 2px;
}

.confirm-dialog-cancel,
.confirm-dialog-alternate {
  background: #1a2436;
  color: #cbd5e1;
}

.confirm-dialog-cancel:hover,
.confirm-dialog-alternate:hover {
  background: #1e2c40;
  color: white;
}

.confirm-dialog-confirm {
  background: #1665f4;
  border-color: #1665f4;
  color: white;
  font-weight: 600;
}

.confirm-dialog-confirm:hover {
  background: #1256d0;
}

.confirm-dialog-confirm.danger {
  background: #e04b4b;
  border-color: #e04b4b;
}

.confirm-dialog-confirm.danger:hover {
  background: #c93c3c;
}

@media (max-width: 480px) {
  .confirm-dialog-actions button {
    flex: 1;
  }
}

/* Three answers (Cancel / alternate / Confirm): a wider dialog, since the
   labels are longer, and on a phone the buttons stack with Confirm on top. */
.confirm-dialog.has-alternate {
  max-width: 480px;
}

.confirm-dialog.has-alternate .confirm-dialog-actions {
  flex-wrap: wrap;
}

.confirm-dialog.has-alternate .confirm-dialog-actions button {
  height: auto;
  min-height: 38px;
  padding: 8px 14px;
}

@media (max-width: 480px) {
  .confirm-dialog.has-alternate .confirm-dialog-actions {
    flex-direction: column-reverse;
  }

  .confirm-dialog.has-alternate .confirm-dialog-actions button {
    flex: none;
  }
}

.notification-container {
  position: fixed;
  top: 16px; /* Below header */
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* Allow clicks through empty space */
}

.notification {
  pointer-events: auto; /* Enable clicks on notifications */
  background: #141b2f;
  border: 1px solid #334155;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  min-width: 320px;
  max-width: 400px;
  animation: slideIn 0.3s ease-out;
  overflow: hidden;
  touch-action: none; /* let JS own vertical drag for swipe-to-dismiss */
}

.notification.closing {
  animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.notification-content {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.notification-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Icon colors based on type */
.notification-icon.delete { color: #ef4444; }
.notification-icon.edit { color: #a855f7; }
.notification-icon.read { color: #3b82f6; }
.notification-icon.error { color: #ef4444; }
.notification-icon.added { color: #22c55e; }
.notification-icon.undo { color: #eab308; }
.notification-icon.backup { color: #678ec9; }
.notification-icon.source_added { color: #22c55e; }
.notification-icon.source_removed { color: #ef4444; }
.notification-icon.bookmark_added { color: #22c55e; }
.notification-icon.bookmark_updated { color: #a855f7; }
.notification-icon.bookmark_deleted { color: #ef4444; }
.notification-icon.copy { color: #06b6d4; }

.notification-message {
  flex: 1;
  min-width: 0; /* Allow text truncation */
  padding-top: 2px;
}

.notification-message p {
  font-size: 14px;
  font-weight: 500;
  color: white;
  margin: 0;
  /* ADDED: Limit text to 2 lines with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.notification-series-name {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-weight: 600;
  color: #94a3b8
}

.notification-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.notification-close:hover {
  background: #1a2436;
  color: white;
}

.notification-close svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Narrow desktop / small laptop windows — below this the filters and
   search/action buttons no longer fit on one line. Stack them as clean
   full-width rows instead of leaving them wrap in place with a dead gap
   between the left-aligned filters and the right-pinned buttons. */
@media (max-width: 1060px) and (min-width: 769px) {
  .control-row {
    flex-direction: column;
    align-items: stretch;
  }

  .control-group-left,
  .control-group-right {
    width: 100%;
    flex: unset;
  }

  .control-group-right {
    justify-content: flex-start;
  }

  .sort-control-group {
    width: auto;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .notification-container {
    top: 70px;
    right: 12px;
    left: 12px;
  }
  
  .notification {
    min-width: 0;
    max-width: 100%;
  }
  
  /* ADDED: Remove line clamp on mobile to prevent ellipsis */
  .notification-message p {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    line-clamp: unset;
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
    max-height: none;
  }
}

/* ================================
   MOBILE STYLES
   ================================ */

@media (max-width: 768px) {
  /* CRITICAL: Remove ALL body padding/margin on mobile to fix offset */
  body {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* ================================
     MOBILE HEADER - CLEAN VERSION
     ================================ */
  .header-full {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: transform 0.3s ease;
    height: 56px;
    display: flex;
    align-items: center;
  }

  .header-full.hidden-mobile {
    transform: translateY(-100%);
  }

  .nav-container {
    height: 100%;
    width: 100%;
    padding: 0 16px;
    display: flex;
    align-items: center;
  }

  .mobile-header {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    height: 40px;
    width: 100%;
  }

  .hamburger-btn {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  .hamburger-btn svg {
    width: 24px;
    height: 24px;
  }

  #mobile-menu-btn {
    position: relative;
  }

  .hamburger-btn-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    background: #e53e3e;
    border-radius: 50%;
  }

  .mobile-header h1 {
    font-size: 16px !important;
    font-weight: 600;
    margin: 0 !important;
    line-height: 56px !important;
    text-align: center;
  }

  .nav-links {
    display: none !important;
  }

  /* ================================
     MOBILE MENU (LEFT DRAWER)
     ================================ */
  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: #111827;
    z-index: 4000;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
  }

  .mobile-menu.active {
    transform: translateX(0);
  }

  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #334155;
  }

  .mobile-menu-header h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
  }

  .mobile-menu-links {
    padding: 16px 0;
  }

  .mobile-menu-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: white;
    text-decoration: none;
    font-size: 16px;
    min-height: 44px;
  }

  .mobile-menu-links a:hover {
    background: #1a2436;
  }

  /* ================================
     MOBILE CONTROL PANEL
     ================================ */
  /* Plain, normal document flow -- no position:fixed/sticky. The panel
     scrolls away with the rest of the page like ordinary content, which
     is the actual desired behavior (an earlier round of fixes chased the
     opposite -- keeping it pinned in place -- based on a misreading of
     the original request). */
  .control-panel {
    border-radius: 0;
    margin: 0;
    padding: 12px;
    border-left: none;
    border-right: none;
    background: #141b2f;
  }

  /* Add padding back to content areas */
  .series-grid {
    padding-left: 12px;
    padding-right: 12px;
  }

  #pagination,
  #pagination-bottom {
    padding-left: 12px;
    padding-right: 12px;
    margin-top: 0px !important;
  }

  /* Both rows should be flex containers */
  .control-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
    width: 100%;
  }

  /* Add gap between row 1 and row 2 */
  .control-row:nth-child(1) {
    margin-bottom: 8px;
  }

  /* ===== ROW 1: Status + Sort (2 columns with proper sizing) ===== */
  .control-row:nth-child(1) .control-group-left {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  /* Hide desktop elements in row 1 - the bookmark dropdown has its own
     place at the bottom of the mobile filter drawer instead. */
  .control-row:nth-child(1) .control-group-right,
  .control-row:nth-child(1) #btn-sort-direction,
  .control-row:nth-child(1) #btn-reset-filters,
  .control-row:nth-child(1) #filter-bookmark-container {
    display: none !important;
  }

  /* Make sort-control-group display its child (sort select) only */
  .control-row:nth-child(1) .sort-control-group {
    display: contents;
  }

  /* Ensure status and sort take appropriate width */
  #filter-status-container {
    width: 100%;
    min-width: 0;
    flex: 1;
  }

  /* Status trigger button should fill container */
  #filter-status-container #filter-status-trigger {
    width: 100%;
    min-width: 0;
  }

  #sort-order-container {
    width: auto;
    min-width: 180px; /* Match the desktop min-width to align with row 2 */
    flex-shrink: 0;
  }

  /* Sort trigger button should fill container */
  #sort-order-container #sort-order-trigger {
    width: 100%;
    min-width: 180px;
  }

  /* ===== ROW 2: Filter + Sort Direction + Search ===== */
  .control-row:nth-child(2) {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px;
  }

  /* Hide desktop row 2 content */
  .control-row:nth-child(2) .control-group-left,
  .control-row:nth-child(2) .control-group-right {
    display: none !important;
  }

  /* Mobile row 2 container */
  .mobile-control-row-2 {
    display: flex !important;
    gap: 8px;
    width: 100%;
    align-items: center;
  }

  /* Button sizing */
  .control-input,
  .control-button,
  .multi-select-trigger,
  .single-select-trigger {
    height: 44px;
    font-size: 14px;
  }

  /* Square buttons */
  .control-button.square-button,
  .sort-toggle,
  #mobile-filter-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    flex-shrink: 0;
  }

  /* Search input container takes remaining space */
  .mobile-control-row-2 .control-search {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .mobile-control-row-2 .control-search input {
    width: 100%;
    height: 44px;
  }

  /* Ensure desktop search is hidden */
  .control-row:nth-child(1) .control-search {
    display: none;
  }

  /* Hide desktop-only buttons globally */
  #btn-refresh,
  #btn-add-series,
  #btn-reset-filters,
  .source-health-wrap {
    display: none !important;
  }

  /* Source Alerts, mobile header's right-hand button (mirrors the
     hamburger button on the left so the title stays centered). */
  .mobile-source-health-wrap {
    position: relative;
    display: inline-flex;
  }

  /* Full-width sheet under the sticky header instead of a small dropdown -
     a 320px dropdown anchored to a 40px button in the header's right grid
     column would either overflow the screen or need right:0 tricks. */
  .mobile-source-health-panel {
    position: fixed;
    top: 56px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 60vh;
    z-index: 1001;
  }

  /* Ensure mobile-only elements are visible */
  #mobile-filter-btn,
  #mobile-search-input {
    display: flex !important;
  }

  /* ================================
     FILTER DRAWER (RIGHT SIDE)
     ================================ */
  .filter-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .filter-drawer-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .filter-drawer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: #111827;
    z-index: 3000;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

  .filter-drawer.active {
    transform: translateX(0);
  }

  .filter-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #334155;
    position: sticky;
    top: 0;
    background: #111827;
    z-index: 10;
  }

  .filter-drawer-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
  }

  .filter-drawer .filter-section {
    margin-bottom: 0;
  }

  .filter-drawer .filter-section h3 {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .filter-drawer .multi-select-trigger {
    width: 100%;
    height: 44px;
    margin-bottom: 8px;
  }
  

  /* Adjust dropdown positioning for filter drawer */
  .filter-drawer .multi-select-menu {
    max-height: 60vh;
    /* Override fixed positioning for mobile drawer */
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* The bookmark dropdown's menu is its own class (not .multi-select-menu),
     so it wasn't covered by the override above - same fix, same reason:
     without it the popup doesn't respect the drawer's own stacking/
     positioning and can render behind/outside the visible drawer panel. */
  .filter-drawer .bookmark-select-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 3001;
  }

  /* Cap to ~4 visible rows instead of desktop's ~7 (220px), so a long
     list of views doesn't push Update/Save/Manage out of easy reach
     without scrolling. */
  .filter-drawer .bookmark-list {
    max-height: 130px;
  }

  .filter-drawer .multi-select-menu label {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    color: white;
    min-height: 44px;
  }

  .filter-drawer .multi-select-menu input[type="checkbox"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
  }

  #mobile-filter-genre-menu .combined-tags-list {
    flex: 1;
    overflow-y: auto;
    max-height: none;
    min-height: 0;
  }

  #mobile-btn-clear-all-tags {
    margin-left: 8px;
    margin-right: 8px;
  }


  #mobile-filter-genre-menu {
    display: flex;
    flex-direction: column;
    max-height: 300px;
  }

  /* 16px keeps iOS from zooming the page when the search box is focused */
  #mobile-filter-genre-menu .tags-search-input {
    height: 40px;
    font-size: 16px;
  }

  .filter-section {
    margin-bottom: 24px;
  }

  .filter-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .filter-section label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    cursor: pointer;
    min-height: 44px;
  }

  .filter-section input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .filter-drawer-footer {
    padding: 16px;
    border-top: 1px solid #334155;
    background: #111827;
    position: sticky;
    bottom: 0;
  }

  .btn-reset-filters-mobile {
    width: 100%;
    padding: 12px;
    background: #e53e3e;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    font-size: 14px;
  }

  
  .btn-reset-filters-mobile:hover {
    background: #c53030;
  }


  /* ================================
     SERIES GRID - 2 COLUMNS
     ================================ */
  .series-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 12px;
    /* A fixed, always-on gap rather than 0 -- #pagination sits between
       the control panel and this grid and only reserves visible space
       (padding) when there's more than one page of results, so relying
       on it for spacing meant skeleton cards (pagination not yet hidden)
       and loaded single-page results (pagination hidden) ended up with
       two different, inconsistent gaps above the first row. */
    padding-top: 12px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }

  .series-card {
    border-radius: 12px;
  }

  .series-cover-container {
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    position: relative;
  }

  /* Unread badge - TOP LEFT */
  .unread-badge {
    top: 8px;
    left: 8px;
  }

  /* Hide last release time on mobile */
  .last-release {
    display: none !important;
  }

  /* ================================
     SERIES CARD - MOBILE INTERACTIONS
     ================================ */

  /* Hide checkbox completely on mobile */
  .series-checkbox {
    display: none !important;
  }

  /* Visual indicator for selected cards - ONLY YELLOW BORDER */
  .series-card.selected {
    border-color: #eab308 !important;
    box-shadow: 0 0 0 2px #eab308 !important;
    animation: pulseSelected 0.3s ease;
  }

  /* Remove the checkmark pseudo-elements */
  .series-card.selected::after,
  .series-card.selected::before {
    display: none !important;
  }

  /* Add touch feedback */
  .series-card {
    transition: transform 0.1s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .series-card:active:not(.selected) {
    transform: scale(0.98);
  }

  @keyframes pulseSelected {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.97);
    }
  }

  /* *** NEW: Hide card-info and move title to cover *** */
  .card-info {
    display: none !important;
  }

  .series-cover-container {
    position: relative;
    overflow: hidden;
  }

  .mobile-card-title {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 8px 8px 8px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    padding-top: 24px;
    z-index: 1;
  }
  
  .mobile-card-title > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* Add standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    margin-bottom: -2px;
  }


  /* Hide all buttons on mobile cards */
  .button-group.single-group,
  .card-buttons-bottom {
    display: none;
  }

  /* ================================
     SKELETON CARD - MOBILE
     Mirrors .card-info being hidden on mobile (createSkeletonCard()
     switches to just the cover, no title placeholder, on mobile) --
     without it the skeleton showed a block of content lines the real
     card never has here, collapsing away the instant data loads in.
     ================================ */
  .skeleton-content {
    display: none;
  }

  /* ================================
     BOTTOM SHEET MODAL
     ================================ */
  .bottom-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .bottom-sheet-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .bottom-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #141b2f;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    z-index: 2000;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
  }

  .bottom-sheet.active {
    transform: translateY(0);
  }

  .bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: #334155;
    border-radius: 2px;
    margin: 12px auto;
  }

  .bottom-sheet-content {
    padding: 0 20px 20px;
  }

  .bottom-sheet-header {
    display: flex;
    align-items: center;  
    justify-content: space-between;
    margin-bottom: 20px;
    /* REMOVED: position: relative - wrapper handles this now */
  }

  .bottom-sheet-header h2 {
    font-size: 20px;
    font-weight: 600;
    flex: 1;
    margin: 0;
  }

  .settings-wrapper {
    position: relative; /* ADDED: Positioning context for the menu */
    display: flex;
    align-items: center;
  }

  .btn-sheet-settings {
    width: 32px;
    height: 32px;
    padding: 0;
    background: #1a2436;
    border: 1px solid #334155;
    border-radius: 6px;
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
  }

  .btn-sheet-settings svg {
    width: 16px;
    height: 16px;
  }

  .btn-sheet-settings:hover {
    background: #1e2c40;
    border-color: #4a5568;
    color: white;
  }

  .btn-sheet-settings:active {
    transform: scale(0.95);
  }

/* ADDED: Settings dropdown menu */
  .sheet-settings-menu {
    position: absolute;
    top: calc(100% + 4px); /* CHANGED: Position below the button with 4px gap */
    right: 0;
    background: #1a2436;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 2002; /* CHANGED: Higher than everything else in bottom sheet */
    min-width: 160px;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: none;
  }

  .sheet-settings-menu.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    display: block; /* ADDED: Show when active */
  }

  .sheet-settings-option {
    display: flex;
    align-items: center;
    gap: 8px; /* CHANGED: from 12px */
    padding: 8px 12px; /* CHANGED: from 12px 16px */
    color: white;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 13px; /* CHANGED: from 14px */
    min-height: auto; /* CHANGED: from 44px - removes minimum height */
    transition: background 0.2s;
    border-bottom: 1px solid #334155;
  }

  .sheet-settings-option:last-child {
    border-bottom: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .sheet-settings-option:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .sheet-settings-option:hover {
    background: #1e2c40;
  }

  .sheet-settings-option svg {
    width: 18px; /* CHANGED: from 20px */
    height: 18px; /* CHANGED: from 20px */
    flex-shrink: 0;
  }

  .sheet-settings-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .sheet-settings-option.danger {
    color: #ef4444;
  }

  .sheet-settings-option.danger:hover {
    background: rgba(239, 68, 68, 0.1);
  }
  
  .sheet-progress-section {
    margin-bottom: 20px;
  }

  .sheet-chapter-row {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* CHANGED: from space-between to flex-end */
    margin-bottom: 12px;
  }

  .sheet-chapter-label {
    color: #94a3b8;
    font-size: 14px;
  }

  .sheet-chapter-value {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
  }

  .btn-chapter-adjust {
    width: 32px;
    height: 32px;
    background: #1a2436;
    border: 1px solid #334155;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation; /* ADDED: Disable double-tap zoom */
    user-select: none; /* ADDED: Prevent text selection */
    -webkit-user-select: none; /* ADDED: Safari support */
    -webkit-tap-highlight-color: transparent; /* ADDED: Remove tap highlight */
  }

  .sheet-progress-bar {
    width: 100%;
    height: 8px;
    background: #1a2436;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .sheet-progress-fill {
    height: 100%;
    background:  #3b82f6;
    border-radius: 4px;
    transition: width 0.3s ease;
  }

  .sheet-metadata {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 20px;
  }

  .sheet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .btn-sheet-action {
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.2s, opacity 0.2s; /* ADDED: Smooth transition */
  }

  .btn-sheet-action.secondary {
    background: #1a2436;
    border: 1px solid #334155;
    color: white;
  }

  .btn-sheet-action.primary {
    background: #1665f4;
    color: white;
  }

  /* ADDED: Disabled state styling */
  .btn-sheet-action:disabled {
    background: #1f2937;
    color: #64748b;
    cursor: not-allowed;
    opacity: 0.6;
  }

  .btn-sheet-action.primary:disabled {
    background: #1f2937;
    border: 1px solid #334155;
  }

  /* ================================
     BULK ACTION TOOLBAR
     ================================ */
  .bulk-toolbar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2499;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .bulk-toolbar-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  .bulk-toolbar {
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: #141b2f;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 16px;
    z-index: 2500;
    min-width: 280px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transform: translateY(120%);
    transition: transform 0.2s ease;
  }

  .bulk-toolbar.active {
    transform: translateY(0);
  }

  .bulk-toolbar-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
  }

  .btn-close-bulk {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bulk-toolbar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .btn-bulk-action {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #334155;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    font-size: 14px;
  }

  .btn-bulk-action.read {
    background: #1665f4;
    border-color: #1665f4;
  }

  .btn-bulk-action.edit {
    background: #1a2436;
  }

  .btn-bulk-action.delete {
    background: #e53e3e;
    border-color: #e53e3e;
  }

  /* ================================
     FAB BUTTONS
     ================================ */
  .fab-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 999;
    transition: opacity 0.2s ease, transform 0.2s ease;
    align-items: center;
  }

  .fab-container.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
  }

  .fab-secondary {
    width: 38px;
    height: 38px;
    background: #334155;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
  }

  /* Disabled state darker without transparency */
  .fab-secondary:disabled {
    cursor: not-allowed;
    background: #1f2937;
  }

  /* Add rotation animation for refresh */
  .fab-secondary.refreshing svg {
    animation: spin 0.6s linear;
  }

  .fab-secondary svg {
    flex-shrink: 0;
  }

  .fab-primary {
    width: 50px;
    height: 50px;
    background: #334155;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .fab-primary svg {
    flex-shrink: 0;
  }

  /* Bulk Edit FAB - gray like refresh button */
  .fab-bulk-edit {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 50px;
    height: 50px;
    background: #334155;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    transition: all 0.2s ease;
  }

  .fab-bulk-edit svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .fab-bulk-edit:active {
    transform: scale(0.95);
  }

  /* Active state when bulk edit menu is open */
  .fab-bulk-edit.active {
    background: #1f2937;
    z-index: 3001; /* Above overlay */
  }

  /* Bulk edit action FABs (Read, Edit, Delete) */
  .fab-bulk-action {
    position: fixed;
    bottom: 82px; /* 16px (base) + 50px (close FAB) + 16px (gap) */
    right: 22px; /* 16px + ((50px - 38px) / 2) = centered with close FAB */
    width: 38px;
    height: 38px;
    background: #334155;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(20px) scale(0.8);
    pointer-events: none;
    z-index: 3001;
  }

  .fab-bulk-action::before {
    content: attr(data-label);
    position: absolute;
    right: calc(100%);
    white-space: nowrap;
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; /* Don't block clicks */
  }
  
  /* Show labels when FAB is visible */
  .fab-bulk-action.show::before {
    opacity: 1;
  }

  /* Optional: Add slight animation delay for labels */
  #fab-bulk-delete-action::before {
    transition-delay: 0.05s;
  }

  #fab-bulk-edit-action::before {
    transition-delay: 0.1s;
  }

  #fab-bulk-read::before {
    transition-delay: 0.15s;
  }

  .fab-bulk-action svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  /* Show bulk action FABs when menu is open */
  .fab-bulk-action.show {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  /* Position each FAB with proper spacing (bottom to top order) */
  #fab-bulk-delete-action {
    bottom: 74px;
  }

  #fab-bulk-edit-action {
    bottom: 120px;
  }

  #fab-bulk-read {
    bottom: 166px;
  }

  /* Stagger animation delays (bottom to top) */
  #fab-bulk-delete-action {
    transition-delay: 0.05s;
  }

  #fab-bulk-edit-action {
    transition-delay: 0.1s;
  }

  #fab-bulk-read {
    transition-delay: 0.15s;
  }

  /* Bulk edit menu overlay (darkened background) */
  .bulk-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 3000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .bulk-edit-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* ================================
     BACK TO TOP IN BULK MODE
     ================================ */
  /* Center aligned with other FABs */
  #back-to-top {
    position: fixed;
    bottom: 74px; /* 16px (base) + 50px (fab-primary) + 8px (gap) = 74px */
    right: 22px; /* 16px + ((50px - 38px) / 2) = 22px to center with fab-primary */
    width: 38px;
    height: 38px;
    background: #334155;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    z-index: 999;
    transition: all 0.3s ease;
  }

  /* Show back-to-top in bulk mode when scrolled */
  #back-to-top.show-bulk {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  #back-to-top:hover {
    background: #4a5568;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  }

  #back-to-top svg {
    width: 20px;
    height: 20px;
  }

  /* ================================
     PAGINATION - MOBILE
     ================================ */
  .pagination-kenmei {
    padding: 16px 12px;
  }

  .pagination-kenmei nav {
    font-size: 14px;
  }

  .pagination-kenmei a,
  .pagination-kenmei span {
    padding: 8px 12px;
    min-width: 40px;
    height: 40px;
  }

  /* ================================
     MODALS - MOBILE ADJUSTMENTS
     ================================ */
  .modal-content {
    width: 95%;
    max-width: none;
    margin: 20px auto;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* ================================
     SERIES SETTINGS MODAL - MOBILE FULL-SCREEN LAYOUT
     Mirrors the desktop modal 1:1 (same IDs, same JS) -- this is purely a
     reflow: cover goes edge-to-edge on top instead of beside the details,
     and the close button becomes a floating circular back-style button
     overlaid on the cover instead of sitting in a title bar above it.
     Selectors are scoped to #edit-series-modal (ID + 2 classes) so they
     reliably beat the generic .modal-content mobile rule above despite
     appearing earlier in the cascade.
     ================================ */
  #edit-series-modal {
    align-items: stretch;
  }

  #edit-series-modal .modal-content.settings-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  /* .settings-cover-row is a flex row with two children: the cover and
     a column holding literally everything else (chapter, source,
     status, tags, actions, save). display:contents drops the row's own
     box from layout entirely, promoting those two children to be direct
     flex items of .settings-modal itself -- which is what makes it
     possible to interleave .settings-header (title) between them via
     order below (cover image, then title, then the rest), instead of
     the header being forced entirely before or entirely after the row
     as a whole. */
  #edit-series-modal .settings-cover-row {
    display: contents;
  }

  #edit-series-modal .settings-cover-col {
    order: -1;
    width: 100%;
  }

  #edit-series-modal .settings-cover-img {
    width: 100%;
    /* Keep the real 221/331 cover aspect (inherited, not overridden)
       instead of forcing a fixed viewport-height box -- that cropped
       the top of the artwork (logo/title art) whenever a phone's aspect
       ratio didn't happen to match the forced height. */
    border-radius: 0;
    border: none;
  }

  /* No :hover on touch -- the edit-cover button needs to just be visible,
     not conditional on a hover state that mobile can't produce. */
  #edit-series-modal .settings-cover-edit-btn {
    opacity: 1;
    top: max(16px, env(safe-area-inset-top));
  }

  /* Same :hover-gated-visibility issue as the cover-edit button above --
     the delete X on a previously-uploaded cover thumbnail never showed
     on touch, so there was no way to remove an uploaded cover on mobile.
     Scoped to the menu, not #edit-series-modal: openCoverMenu() moves it
     to <body> (its width is capped to the screen there too). */
  .settings-cover-menu .settings-cover-upload-delete {
    opacity: 1;
  }

  /* Header (title + close) moves below the cover in visual order.
     Sticky/solid title bar doesn't make sense once it's not pinned above
     scrolling content anymore -- the close button is pulled back out via
     position:fixed to float over the cover instead, so it stays
     reachable without the header bar needing to follow it. */
  #edit-series-modal .settings-header {
    order: 0;
    position: static;
    background: none;
    border-bottom: none;
    padding: 16px 20px 12px;
  }

  #edit-series-modal .btn-close-modal {
    position: fixed;
    top: max(16px, env(safe-area-inset-top));
    left: 16px;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    color: white;
  }

  #edit-series-modal .settings-header h3 {
    font-size: 22px;
    white-space: normal;
  }

  #edit-series-modal .settings-chapter-col {
    order: 1;
    padding: 4px 20px max(20px, env(safe-area-inset-bottom));
  }

  /* .settings-save-btn's margin-top:auto pins it to the bottom of the
     desktop modal by consuming whatever free space is left in the
     column -- on mobile the content generally exceeds the viewport
     height and scrolls instead, leaving no free space for auto to
     consume, so it collapsed to 0 and the button sat flush against
     Delete Series. Matches .settings-actions-buttons-secondary's 8px
     (the gap above Delete Series) rather than an arbitrary value, so
     the rhythm between sections stays even the rest of the way down. */
  #edit-series-modal .settings-save-btn {
    margin-top: 8px;
  }

  /* ================================
     ADD SERIES MODAL - MOBILE (Kenmei-style)
     Until a link is recognised it's the plain compact card with the link
     field. Once its preview shows (.add-series-wide, set by the dashboard's
     syncAddModalWidth) it goes full-screen: the cover edge-to-edge on top
     and the details as a sheet overlapping its bottom edge. Same DOM as
     desktop, reflowed: the wrapper boxes get display:contents so their
     pieces become flex items of .modal-content and can be put in Kenmei's
     order, with the link field (always shown) between Last Read and
     Source: title, Last Read, link, Source, Status/Tags, Add.
     ================================ */
  #add-series-modal .modal-content.add-series-wide {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 0 20px max(20px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .add-series-wide .add-series-modal-header {
    display: none;
  }

  .add-series-wide #add-series-url-view,
  .add-series-wide #add-preview,
  .add-series-wide .add-preview-fields,
  .add-series-wide #add-preview-controls {
    display: contents;
  }

  .add-series-wide #add-preview-controls.hidden {
    display: none;
  }

  /* Those pieces are the column's flex items now, and the column is taller
     than the screen (it scrolls): without this they shrink to fit it - the
     title (overflow:hidden for its line clamp) all the way to nothing. */
  .add-series-wide #add-series-url-view > *,
  .add-series-wide #add-preview > *,
  .add-series-wide .add-preview-fields > *,
  .add-series-wide #add-preview-controls > * {
    flex-shrink: 0;
  }

  .add-series-wide .add-preview-cover-col {
    order: 1;
    width: auto;
    flex-shrink: 0;
    /* edge to edge, and tucked under the sheet's rounded top */
    margin: 0 -20px -24px;
  }

  .add-series-wide .add-preview-cover-col .settings-cover-img {
    border: none;
    border-radius: 0;
  }

  .add-series-wide .add-preview-back {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: max(16px, env(safe-area-inset-top));
    left: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.6);
    color: white;
    cursor: pointer;
  }

  /* The sheet's top edge: the title carries the rounded, solid top that
     overlaps the cover; everything after it sits on .modal-content's own
     (same) background */
  .add-series-wide .add-preview-title {
    order: 2;
    position: relative;
    margin: 0 -20px;
    padding: 20px 20px 0;
    background: #141b2f;
    border-radius: 16px 16px 0 0;
    font-size: 22px;
    -webkit-line-clamp: 3;
    /* still covers the cover's tucked-under 24px while it's empty
       (loading, or a fetch that failed) - border-box, so padding included */
    min-height: 32px;
  }

  .add-series-wide .add-preview-subtitle { order: 3; }
  /* labelled like the fields under it (Last Read, Source...) */
  .add-series-wide #add-series-url-label { order: 7; margin-bottom: 6px; font-size: 14px; color: #cbd5e1; }
  /* "Fetching from..." / a fetch error, right under the link it's about */
  .add-series-wide #add-preview-message { order: 8; margin: 0 0 6px; }
  .add-series-wide #add-chapter-select-group { order: 4; }

  /* A shorter Last Read list than desktop's 240px: ~4.5 rows, the half row
     showing there's more to scroll */
  .add-series-wide #add-chapter-list {
    max-height: 176px;
  }
  .add-series-wide #add-chapter-manual-group { order: 5; }
  .add-series-wide #add-preview-controls > .settings-manual-hint { order: 6; margin-bottom: 6px; }
  .add-series-wide .add-preview-source-group { order: 9; }
  .add-series-wide .settings-status-tags-row { order: 10; margin-top: 6px; }

  /* Source / Status / Custom Tags sit near the bottom of the sheet: opening
     their menus downwards ran past the end and stretched the page to make
     room (a 3+ link Source list also covered Add), so they open upwards,
     over the fields above instead */
  .add-series-wide #add-source-menu,
  .add-series-wide #add-status-menu,
  .add-series-wide #add-tags-menu {
    top: auto;
    bottom: calc(100% + 4px);
  }
  .add-series-wide #add-preview-warning { order: 11; }
  .add-series-wide .modal-buttons { order: 12; }

  /* The back button closes it instead of Cancel; Add goes full width */
  .add-series-wide #btn-add-cancel {
    display: none;
  }

  .add-series-wide #btn-add-submit {
    flex: 1;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
  }

  /* ================================
     SAFE AREA INSETS (iPhone notch/home indicator)
     ================================ */
  .header-full {
    padding-top: env(safe-area-inset-top);
  }

  .fab-container,
  .fab-bulk-edit,
  .bulk-toolbar {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  #back-to-top {
    bottom: calc(74px + env(safe-area-inset-bottom));
  }

  .bottom-sheet {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ================================
   MOBILE ICONS (SVG)
   ================================ */
.icon-menu,
.icon-close,
.icon-filter,
.icon-plus,
.icon-refresh,
.icon-chevron-up,
.icon-check,
.icon-edit,
.icon-trash,
.icon-settings {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}