/* ========== Caret ========== */
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 0.30em solid;
  border-right: 0.30em solid transparent;
  border-left: 0.30em solid transparent;
}

/* ========== Badge ========== */
.badge {
  display: inline-block;
  min-width: 0.70em;
  padding: 0.15em 0.5em;
  font-size: 0.75em;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 0.70em;
  background-color: var(--badge-bg);
  color: var(--badge-text);
  line-height: 1;
}

.badge:empty {
  display: none;
}

/* ========== Buttons ========== */
.btn {
  display: inline-block;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 0.05em solid transparent;
  border-radius: var(--btn-border-radius);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s;
  line-height: var(--base-line-height);
}

.btn:active {
  opacity: 0.85;
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-text);
}

.btn-success {
  background-color: var(--btn-success-bg);
  border-color: var(--btn-success-border);
  color: var(--btn-text);
}

.btn-warning {
  background-color: var(--btn-warning-bg);
  border-color: var(--btn-warning-border);
  color: var(--btn-text);
}

.btn-danger {
  background-color: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-text);
}

.btn-info {
  background-color: var(--btn-info-bg);
  border-color: var(--btn-info-border);
  color: var(--btn-text);
}

.btn-default {
  background-color: var(--btn-default-bg);
  border-color: var(--btn-default-border);
  color: var(--btn-default-text);
}

.btn-short {
  padding-left: 0.5em;
  padding-right: 0.5em;
  min-width: 2em;
}

.btn[disabled],
.btn.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.enable-selected.disabled,
li.enable-selected.disabled a {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button groups */
.btn-group {
  position: relative;
  display: inline-flex;
}

.btn-group > .btn + .btn,
.btn-group > .btn + .dropdown-toggle {
  margin-left: -0.05em;
}

.btn-group > .btn:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}

/* ========== Dropdowns ========== */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 10em;
  padding: 0.35em 0;
  background-color: var(--dropdown-bg);
  border: 0.05em solid var(--dropdown-border);
  border-radius: var(--btn-border-radius);
  box-shadow: var(--dropdown-shadow);
}

.dropdown-menu-right {
  left: auto;
  right: 0;
}

.dropdown-menu-tags {
  min-width: 14em;
  max-height: 24em;
  overflow-y: auto;
}

.open > .dropdown-menu,
.btn-group.open > .dropdown-menu {
  display: block;
}

.dropdown-menu > li > a {
  display: block;
  padding: 0.30em 1.20em;
  color: var(--dropdown-text);
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--btn-font-size);
}

.dropdown-menu > li > a:hover {
  background-color: var(--dropdown-hover-bg);
  text-decoration: none;
}
.dropdown-menu > li > a.disabled,
.dropdown-menu > li > a[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


.dropdown-menu > li.divider {
  height: 0;
  margin: 0.35em 0;
  border-top: 0.05em solid var(--dropdown-divider);
}

.check-mark {
  display: inline-block;
  width: 1em;
  text-align: center;
}

.check-mark.checked::before {
  content: "✓";
}

/* ========== Table ========== */
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.70em;
  margin-bottom: 0.60em;
  flex-wrap: wrap;
}

.dt-length {
  display: flex;
  align-items: center;
  gap: 0.35em;
  color: var(--text-color);
}

.table-length-select {
  padding: 0.20em 0.40em;
  font-size: 0.85em;
  border: 0.05em solid var(--border-color);
  border-radius: var(--btn-border-radius);
  background: var(--body-bg);
  color: var(--text-color);
}

.table-page-info {
  color: var(--text-muted);
  font-size: 0.90em;
}

.table-pagination {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-top: 0.60em;
}

.table-pagination-top {
  margin-top: 0;
}

.table-pagination .btn {
  min-width: 2.40em;
  padding: 0.20em 0.55em;
}

.table th,
.table td {
  padding: var(--table-cell-padding);
  border: 0.05em solid var(--table-border);
  text-align: left;
  vertical-align: middle;
}

.table thead th {
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: bold;
  white-space: nowrap;
  cursor: default;
  user-select: none;
  text-align: center;
}

.table thead th.sortable {
  cursor: pointer;
}

.table thead th.sortable:hover {
  opacity: 0.85;
}

.table thead th.active-sort::after {
  content: " ▼";
  font-size: 0.70em;
}

.table thead th.active-sort.sort-asc::after {
  content: " ▲";
  font-size: 0.70em;
}

.table tbody tr:nth-child(odd) {
  background-color: var(--table-odd-bg);
}

.table tbody tr:nth-child(even) {
  background-color: var(--table-even-bg);
}

.table tbody tr:hover {
  background-color: var(--table-hover-bg);
}

.table tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999em rgba(255, 212, 0, 0.30);
}

.table tbody tr.selected {
  /* No font-weight: bold — it causes column width reflow (Ruby uses box-shadow only) */
}

.table tbody tr.frozen {
  background-color: var(--table-frozen-tint);
}

.table tbody tr.frozen td {
  color: var(--link-color);
}

.table tbody tr {
  cursor: pointer;
  transition: background-color 0.10s;
  user-select: none;
}

/* Column widths */
.col-id { width: var(--table-col-id-width); text-align: center; }
.col-update { width: var(--table-col-date-width); white-space: nowrap; text-align: center; }
.col-general-lastup { width: var(--table-col-date-width); white-space: nowrap; text-align: center; }
.col-last-check { width: var(--table-col-date-width); white-space: nowrap; text-align: center; }
.col-title { min-width: var(--table-col-title-min-width); }
.col-author { width: var(--table-col-author-width); }
.col-site { width: var(--table-col-site-width); }
.col-novel-type { width: var(--table-col-novel-type-width); text-align: center; }
.col-tags { width: var(--table-col-tags-width); }
.col-episodes { width: var(--table-col-episodes-width); text-align: center; }
.col-length { width: var(--table-col-length-width); text-align: right; }
.col-average-length { width: var(--table-col-average-length-width); text-align: right; }
.col-status { width: var(--table-col-status-width); text-align: center; }
.col-url { width: var(--table-col-url-width); text-align: center; }
.col-download { width: var(--table-col-download-width); text-align: center; }
.col-folder { width: var(--table-col-folder-width); text-align: center; }
.col-update-action { width: var(--table-col-update-action-width); text-align: center; }
.col-story { width: var(--table-col-story-width); text-align: center; }
.col-menu { width: var(--table-col-menu-width); text-align: center; }

.date-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.10em;
  text-align: center;
  line-height: 1.2;
}

.date-cell-date,
.date-cell-extra {
  display: block;
}

.date-cell-inline {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25em;
  white-space: nowrap;
}

.date-cell-inline-extra {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.date-cell-time,
.date-cell-label {
  display: inline-block;
}

.date-cell-date,
.date-cell-time,
.date-cell-extra {
  font-size: 1em;
}

.date-cell-label {
  font-size: 0.75em;
  font-weight: bold;
}

.btn-story {
  background: none; border: 0.05em solid var(--border-color); border-radius: var(--border-radius);
  cursor: pointer; font-size: 0.85em; padding: 0.05em 0.35em; color: var(--text-color);
}
.btn-story:hover { background: var(--dropdown-hover-bg); }

.btn-link-icon {
  color: var(--text-color);
}

.btn-link-icon:hover {
  color: var(--text-color);
}

.btn-story .material-symbols-outlined,
.btn-download .material-symbols-outlined,
.btn-folder .material-symbols-outlined,
.btn-update-action .material-symbols-outlined,
.btn-menu-icon .material-symbols-outlined,
.btn-link-icon .material-symbols-outlined {
  font-size: 1em;
}

.story-popover {
  position: absolute; z-index: 10000;
  background: var(--dropdown-bg); border: 0.05em solid var(--dropdown-border); border-radius: var(--border-radius);
  box-shadow: var(--dropdown-shadow);
  max-width: 25em; min-width: 12.5em; padding: 0;
}
.story-popover-title {
  font-weight: bold; padding: 0.5em 0.75em;
  border-bottom: 0.05em solid var(--dropdown-divider); font-size: 0.95em;
}
.story-popover-body {
  padding: 0.5em 0.75em; font-size: 0.90em;
  max-height: 18.75em; overflow-y: auto; line-height: 1.5;
}

/* ========== Tags ========== */
.tag-label {
  display: inline-block;
  padding: 0.10em 0.40em;
  font-size: 0.80em;
  font-weight: bold;
  border-radius: 0.20em;
  color: var(--btn-text);
  margin: 0.10em;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1.30;
}

.tag-green { background-color: var(--tag-green); }
.tag-yellow { background-color: var(--tag-yellow); color: var(--tag-yellow-text); }
.tag-blue { background-color: var(--tag-blue); }
.tag-magenta { background-color: var(--tag-magenta); }
.tag-cyan { background-color: var(--tag-cyan); }
.tag-red { background-color: var(--tag-red); }
.tag-white { background-color: var(--tag-white-bg); border: 0.05em solid var(--tag-white-border); color: var(--tag-white-text); }
.tag-default { background-color: var(--tag-default-bg); color: var(--tag-default-text); }

.tag-list-canvas {
  padding: 0.30em 0.60em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.20em;
}

/* ========== Status Badges ========== */
.status-new {
  color: var(--new-arrival-color);
  font-weight: bold;
}

.status-updated {
  color: var(--new-update-color);
  font-weight: bold;
}

/* narou.rb parity: the date text itself is NOT colored. Only the pseudo-element
   " 新着" / " 更新" label following the date is colored, matching style.scss
   `span.new-arrivals:after { color: magenta; content: " 新着" }` etc. */
.new-arrivals::after {
  content: " 新着";
  color: var(--new-arrival-color);
  font-weight: bold;
}

.new-update::after {
  content: " 更新";
  color: var(--new-update-color);
  font-weight: bold;
}

/* narou.rb: hint when general_lastup > last_update (new content available) */
.hint-new-arrival {
  position: relative;
}

.hint-new-arrival::before {
  position: absolute;
  content: "●";
  color: var(--new-arrival-color);
  opacity: 0.6;
  top: var(--hint-new-arrival-dot-top);
  left: var(--hint-new-arrival-dot-left);
  font-size: var(--hint-new-arrival-dot-size);
  line-height: 1;
}

/* narou.rb parity: general-lastup time-ago pill is injected via pseudo-element
   on a single `<span class="general-lastup gl-XXhour">` so there's no extra DOM.
   Matches style.scss `.gl-60minutes &::after { content: "1h"; background-color: ... }`. */
.general-lastup {
  position: relative;
}

.general-lastup.gl-60minutes::after,
.general-lastup.gl-6hour::after,
.general-lastup.gl-24hour::after,
.general-lastup.gl-3days::after,
.general-lastup.gl-1week::after {
  position: relative;
  left: 0.30em;
  padding: 1px 0.20em;
  font-size: 0.75em;
  font-weight: bold;
  color: var(--btn-text);
  border-radius: 0.20em;
  white-space: nowrap;
}

.general-lastup.gl-60minutes::after {
  content: "1h";
  background-color: var(--gl-1h-bg);
}
.general-lastup.gl-6hour::after {
  content: "6h";
  background-color: var(--gl-6h-bg);
}
.general-lastup.gl-24hour::after {
  content: "24h";
  background-color: var(--gl-24h-bg);
}
.general-lastup.gl-3days::after {
  content: "3d";
  background-color: var(--gl-3d-bg);
  color: var(--text-color);
}
.general-lastup.gl-1week::after {
  content: "1w";
  background-color: var(--gl-1w-bg);
  color: var(--gl-1w-text);
}

.gl-badge {
  display: inline-block;
  padding: 0.05em 0.35em;
  font-size: 0.75em;
  font-weight: bold;
  color: var(--btn-text);
  border-radius: 0.20em;
  line-height: 1.20;
  margin-left: 0.25em;
}

/* ========== Context Menu ========== */
.context-menu {
  position: fixed;
  z-index: 1060;
  min-width: 12em;
  padding: 0.35em 0;
  background-color: var(--dropdown-bg);
  border: 0.05em solid var(--dropdown-border);
  border-radius: var(--btn-border-radius);
  box-shadow: var(--dropdown-shadow);
  list-style: none;
  margin: 0;
}

.context-menu > li > a {
  display: block;
  padding: 0.30em 1.20em;
  color: var(--dropdown-text);
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--btn-font-size);
  cursor: pointer;
}

.context-menu > li > a:hover {
  background-color: var(--dropdown-hover-bg);
}

.context-menu > li.divider {
  height: 0;
  margin: 0.35em 0;
  border-top: 0.05em solid var(--dropdown-divider);
}

/* ========== Tag Editor ========== */
.tag-editor-summary {
  margin: 0 0 0.80em;
  color: var(--text-muted);
  font-size: 0.90em;
  line-height: 1.5;
}

.tag-editor-current {
  display: flex;
  flex-wrap: wrap;
  gap: 0.30em;
  margin-bottom: 0.80em;
  min-height: 2em;
}

.tag-editor-empty {
  color: var(--text-muted);
  font-size: 0.90em;
}

.tag-editable {
  position: relative;
  padding-right: var(--tag-edit-padding-right);
}

.tag-editable-partial {
  outline: 0.05em dashed var(--border-color);
  outline-offset: 0.05em;
}

.tag-edit-count {
  margin-left: 0.35em;
  font-size: 0.85em;
  opacity: 0.80;
}

.tag-remove {
  position: absolute;
  right: 0.20em;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-weight: bold;
  opacity: 0.5;
}

.tag-remove:hover {
  opacity: 1;
}

.tag-color-edit {
  position: absolute;
  right: var(--tag-color-edit-right);
  top: var(--tag-color-edit-top);
  transform: translateY(var(--tag-color-edit-translate-y));
  padding: var(--tag-color-edit-padding-y) var(--tag-color-edit-padding-x);
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: var(--tag-color-edit-font-size);
  opacity: var(--tag-color-edit-opacity);
}

.tag-color-edit:hover,
.tag-color-edit:focus-visible {
  opacity: var(--tag-color-edit-active-opacity);
}

.tag-editor-input {
  display: flex;
  gap: 0.5em;
}

.new-tag-input {
  flex: 1;
  padding: 0.40em 0.60em;
  font-size: 0.90em;
  border: 0.05em solid var(--border-color);
  border-radius: var(--btn-border-radius);
  background: var(--body-bg);
  color: var(--text-color);
}

.tag-suggestions {
  margin-top: 0.35em;
  border: 0.05em solid var(--dropdown-border);
  border-radius: var(--btn-border-radius);
  background: var(--dropdown-bg);
  box-shadow: var(--dropdown-shadow);
  max-height: 12em;
  overflow-y: auto;
}

.tag-suggestion-option {
  display: block;
  width: 100%;
  padding: 0.35em 0.60em;
  border: 0;
  background: transparent;
  color: var(--dropdown-text);
  text-align: left;
  cursor: pointer;
}

.tag-suggestion-option:hover,
.tag-suggestion-option.active {
  background: var(--dropdown-hover-bg);
}

.tag-fixed-width {
  display: inline-block;
  min-width: 5em;
  text-align: center;
}

/* ========== Notification Container ========== */
.notification-container {
  position: fixed;
  top: calc(var(--navbar-height) + 0.5em);
  right: 1em;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 0.40em;
  pointer-events: none;
}

.notification {
  padding: 0.60em 1.20em;
  border-radius: var(--btn-border-radius);
  font-size: 0.90em;
  color: var(--btn-text);
  pointer-events: auto;
  opacity: 1;
  transition: opacity 0.5s;
}

.notification-info { background-color: var(--btn-info-bg); }
.notification-success { background-color: var(--btn-success-bg); }
.notification-error { background-color: var(--btn-danger-bg); }
.notification-warning { background-color: var(--btn-warning-bg); }
.notification-fadeout { opacity: 0; }

/* ========== Move-to-top ========== */
.move-to-top {
  position: fixed;
  bottom: 1.5em;
  right: 1.5em;
  z-index: 1020;
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1em;
  opacity: 0.70;
  transition: opacity 0.20s;
}

.move-to-top:hover {
  opacity: 1;
}

/* ========== New Arrival Dot ========== */
.status-new-dot {
  color: var(--new-arrival-color);
  font-size: 0.70em;
  vertical-align: middle;
}

/* ========== Per-row action button ========== */
.row-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.15em 0.30em;
  font-size: 1.10em;
  color: var(--text-color);
  line-height: 1;
}

.row-action-btn:hover {
  opacity: 0.75;
}

/* ========== Filterable text ========== */
.filterable {
  cursor: pointer;
}

.filterable:hover {
  text-decoration: underline;
}

/* ========== Queue task list ========== */
.queue-section {
  margin-bottom: 1em;
}

.queue-section h5 {
  margin: 0 0 0.5em;
  font-size: 1rem;
}

.queue-hint {
  font-size: 0.85em;
  color: var(--text-muted);
}

.queue-task-list {
  min-height: 2em;
  background: var(--table-odd-bg);
  border-radius: var(--btn-border-radius);
  padding: 0.5em;
}

.queue-task-item {
  padding: 0.30em 0.5em;
  border-bottom: 0.05em solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.queue-task-item[draggable="true"] {
  cursor: grab;
}

.queue-task-item.queue-drag-source {
  opacity: 0.65;
}

.queue-task-item.queue-drop-before {
  box-shadow: inset 0 0.15em 0 0 var(--btn-primary-bg);
}

.queue-task-item.queue-drop-after {
  box-shadow: inset 0 -0.15em 0 0 var(--btn-primary-bg);
}

.queue-task-item:last-child {
  border-bottom: none;
}

.queue-task-icon {
  flex-shrink: 0;
  width: 1.20em;
  text-align: center;
}

.queue-task-icon .material-symbols-outlined,
.queue-task-cancel .material-symbols-outlined,
.queue-task-up .material-symbols-outlined,
.queue-task-down .material-symbols-outlined,
.queue-task-delete .material-symbols-outlined,
.btn-diff-clean .material-symbols-outlined,
.filter-search-icon .material-symbols-outlined,
.move-to-top .material-symbols-outlined {
  font-size: 1em;
}

.queue-task-label {
  flex-shrink: 0;
  font-weight: bold;
  min-width: 5em;
}

.queue-task-target {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-task-time {
  flex-shrink: 0;
  font-size: 0.85em;
  color: var(--text-muted);
}

.queue-task-delete {
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 0.30em;
  color: var(--text-color);
  font-size: 1em;
}

.queue-task-delete:hover {
  opacity: 0.70;
}

.queue-task-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.15em;
}

.queue-task-cancel,
.queue-task-up,
.queue-task-down {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 0.25em;
  font-size: 0.85em;
  color: var(--text-color);
  line-height: 1;
}

.queue-task-cancel {
  color: var(--text-color);
}

.queue-task-cancel:hover,
.queue-task-up:hover,
.queue-task-down:hover {
  opacity: 0.70;
}

.queue-task-up:disabled,
.queue-task-down:disabled {
  opacity: 0.30;
  cursor: default;
}

.queue-running {
  font-weight: bold;
}

.queue-actions {
  padding-top: 0.5em;
}

/* ========== Shortcut labels in menu ========== */
.shortcut {
  float: right;
  margin-left: 2em;
  color: var(--text-muted);
  font-size: 0.85em;
}

/* ========== Dropdown wide ========== */
.dropdown-menu-wide {
  min-width: 18em;
}

/* ========== Theme selector ========== */
.theme-selector {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.30em 1.20em;
}

.theme-label {
  font-size: var(--btn-font-size);
  color: var(--dropdown-text);
}

.theme-select {
  padding: 0.20em 0.40em;
  font-size: 0.85em;
  border: 0.05em solid var(--border-color);
  border-radius: var(--btn-border-radius);
  background: var(--body-bg);
  color: var(--text-color);
}

/* ========== Diff display ========== */
.diff-list-container {
  max-height: 30em;
  overflow-y: auto;
}

.diff-entry {
  margin-bottom: 1em;
}

.diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.30em;
}

.diff-entry h5 {
  margin: 0;
  font-size: 1rem;
}

.btn-diff-clean {
  padding: 0.125em 0.5em;
  font-size: 0.80rem;
  cursor: pointer;
}

.diff-content {
  background: var(--console-bg);
  color: var(--console-text);
  padding: 0.5em;
  border-radius: var(--btn-border-radius);
  font-family: "Consolas", "Liberation Mono", "Courier New", monospace;
  font-size: 0.85em;
  white-space: pre-wrap;
  overflow-x: auto;
  max-height: 20em;
}

/* ========== Queue badge active ========== */
.queue-size {
  display: inline-flex;
  align-items: center;
}

.queue-size-active {
  background-color: var(--btn-warning-bg);
  color: var(--btn-text);
  padding: 0.15em 0.40em;
  border-radius: 0.70em;
  font-size: 0.75em;
  font-weight: bold;
}

.queue-size-default {
  font-size: 0.90em;
  color: var(--navbar-text);
}

.queue-size-divider {
  padding-right: 0.10em;
  padding-left: 0.10em;
  color: var(--navbar-text);
}

.queue-size-convert {
  font-size: 0.90em;
  color: var(--navbar-text);
}

/* ========== TOC link ========== */
.toc-link {
  color: var(--link-color);
  text-decoration: none;
  font-size: 1.10em;
}

.toc-link:hover {
  text-decoration: underline;
}

/* ========== Wide mode ========== */
.container-main.wide-mode {
  max-width: none !important;
  width: 100% !important;
}

#novel-list.episodes-width-target .col-episodes {
  width: calc(var(--table-col-episodes-width) + var(--table-col-episodes-reflow-extra));
}

#novel-list.episodes-width-target .col-title {
  min-width: calc(var(--table-col-title-min-width) + var(--table-col-title-reflow-extra));
}

#novel-list.episodes-width-target .col-author {
  width: calc(var(--table-col-author-width) + var(--table-col-author-reflow-extra));
}

#novel-list.episodes-width-target .col-site {
  width: calc(var(--table-col-site-width) + var(--table-col-site-reflow-extra));
}

/* ========== Modal size variants ========== */
.modal-dialog-sm {
  max-width: 24rem;
}

.modal-dialog-lg {
  max-width: 50rem;
}

/* ========== Bookmarklet register modal ========== */
.register-url-wrap {
  margin: 0.6em 0 0;
  word-break: break-all;
}

.register-url {
  display: inline-block;
  max-width: 100%;
  padding: 0.4em 0.6em;
  background: var(--bg-secondary);
  border-radius: var(--border-radius);
  font-size: 0.9em;
  color: var(--text-color);
  word-break: break-all;
}

/* ========== Feature tour ========== */
.feature-tour-lead {
  margin: 0 0 1em;
  color: var(--text-color);
}

.feature-tour-empty {
  margin: 0;
  color: var(--text-muted);
}

.feature-tour-list {
  display: grid;
  gap: 0.75em;
}

.feature-tour-entry {
  border: 0.05em solid var(--border-color);
  border-left: 0.25em solid var(--btn-primary-bg);
  border-radius: var(--border-radius);
  padding: 0.85em;
  background: var(--body-bg);
}

.feature-tour-entry-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1em;
  margin-bottom: 0.35em;
}

.feature-tour-entry-header h5 {
  margin: 0;
  font-size: 1.05em;
}

.feature-tour-version {
  color: var(--text-muted);
  font-size: 0.90em;
  white-space: nowrap;
}

.feature-tour-body-text {
  margin: 0.35em 0 0.55em;
}

.feature-tour-items {
  margin: 0;
  padding-left: 1.4em;
}

.feature-tour-items li + li {
  margin-top: 0.25em;
}

.feature-tour-disable {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-right: auto;
  color: var(--text-muted);
}

/* ========== Filter search icon ========== */
.filter-search-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85em;
  color: var(--text-color);
  pointer-events: none;
  display: none;
}

/* ========== Enable-selected pattern ========== */
.enable-selected {
  opacity: 0.5;
  pointer-events: none;
}

.enable-selected.active {
  opacity: 1;
  pointer-events: auto;
}

/* ========== Progress Bar ========== */
.console-progress-host {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  pointer-events: none;
  padding: 0 0.7em 0.5em;
  background: linear-gradient(to bottom, transparent, var(--console-bg) 35%);
}

.console-progress-item {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.console-progress-topic {
  align-self: flex-end;
  padding: 0.1em 0.45em;
  border-radius: var(--border-radius);
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  box-shadow: var(--dropdown-shadow);
  font-size: 0.85em;
}

.progress {
  width: 100%;
  height: 1.20em;
  background-color: var(--input-bg);
  border-radius: var(--border-radius);
  margin: 0;
  overflow: hidden;
  box-shadow: var(--dropdown-shadow);
}

.progress-bar {
  height: 100%;
  background-color: var(--btn-success-bg);
  transition: width 0.30s ease;
}

/* 0.4.0 storage migration prompt (feature tour) */
.feature-tour-storage {
  margin-top: 1em;
  padding: 0.75em 1em;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 0.5em;
}
.feature-tour-storage-title {
  font-weight: bold;
  margin: 0 0 0.5em;
}
.feature-tour-storage-desc {
  margin: 0 0 0.75em;
  font-size: 0.95em;
}
.feature-tour-storage-actions {
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap;
}