/* AnimeRadar v2.4.194 - Library and Favorites route structures matched to the Material 3 reference redesign. */

/* -------------------------------------------------------------------------- */
/* Bibliothek / Favoriten - shared section-hub tabs (Alle / Listen / Favoriten) */
/* -------------------------------------------------------------------------- */

@media (min-width: 1181px) {
  html body #view-lists .library-hub-tabs {
    display: none !important;
  }
}

html body :where(#view-lists, #view-favorites) .library-hub-tabs {
  min-height: 46px;
  display: flex !important;
  align-items: stretch;
  gap: 2px;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow-x: auto;
  border: 0 !important;
  border-bottom: 1px solid var(--md-outline) !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none;
}

html body :where(#view-lists, #view-favorites) .library-hub-tabs::-webkit-scrollbar {
  display: none;
}

html body :where(#view-lists, #view-favorites) .library-hub-tabs .mobile-section-tab {
  position: relative;
  min-width: max-content;
  min-height: 44px;
  display: grid !important;
  place-items: center;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 7px 7px 0 0 !important;
  background: transparent !important;
  color: var(--md-muted) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 520 !important;
}

html body :where(#view-lists, #view-favorites) .library-hub-tabs .mobile-section-tab.active {
  color: var(--md-secondary) !important;
}

html body :where(#view-lists, #view-favorites) .library-hub-tabs .mobile-section-tab.active::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: -1px;
  left: 7px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--md-secondary);
}

/* -------------------------------------------------------------------------- */
/* Bibliothek - toolbar (Sortierung / Ansicht / Suche) and list-tab pills      */
/* -------------------------------------------------------------------------- */

html body #view-lists #customLists.list-tabs {
  gap: 8px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
}

html body #view-lists .list-tab-item {
  border: 1px solid var(--md-outline) !important;
  border-radius: 999px !important;
  background: var(--md-surface-elevated) !important;
  box-shadow: none !important;
}

html body #view-lists .list-tab-item.active {
  border-color: transparent !important;
  background: var(--md-action-fill) !important;
}

html body #view-lists .list-tab-item .list-tab {
  min-height: 40px;
  padding: 0 16px !important;
  border-radius: 999px 0 0 999px !important;
  background: transparent !important;
  color: var(--md-on-surface) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
}

html body #view-lists .list-tab-item .list-tab.active::after {
  content: none !important;
}

html body #view-lists .list-tab-item.active .list-tab {
  color: var(--md-on-primary) !important;
}

html body #view-lists .list-public-dot {
  color: var(--md-secondary) !important;
  text-shadow: none !important;
}

html body #view-lists .list-menu-toggle {
  width: 40px;
  border-left: 1px solid var(--md-outline) !important;
  border-radius: 0 999px 999px 0 !important;
  background: transparent !important;
}

html body #view-lists .list-tab-item.active .list-menu-toggle {
  border-left-color: color-mix(in srgb, var(--md-on-primary) 35%, transparent) !important;
}

html body #view-lists .list-menu-toggle span {
  border-color: var(--md-on-surface) !important;
}

html body #view-lists .list-tab-item.active .list-menu-toggle span {
  border-color: var(--md-on-primary) !important;
}

html body #view-lists .list-tab-item.menu-open .list-menu-toggle {
  background: color-mix(in srgb, var(--md-on-surface) 10%, transparent) !important;
}

html body #view-lists .list-menu {
  border-radius: var(--md-radius-card) !important;
  border: 1px solid var(--md-outline-strong) !important;
  background: var(--md-surface-elevated) !important;
  box-shadow: var(--md-elevation-3) !important;
}

html body #view-lists .list-menu-action {
  border-radius: var(--md-radius-control) !important;
  background: transparent !important;
  color: var(--md-on-surface) !important;
  font-size: 11px !important;
  font-weight: 550 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

html body #view-lists .list-menu-action:hover {
  border-color: var(--md-primary) !important;
  background: color-mix(in srgb, var(--md-primary) 14%, var(--md-surface-elevated)) !important;
  color: var(--md-secondary) !important;
}

html body #view-lists .list-menu-action.danger:hover {
  border-color: color-mix(in srgb, var(--md-error) 55%, transparent) !important;
  background: color-mix(in srgb, var(--md-error) 16%, var(--md-surface-elevated)) !important;
  color: #ffb4c0 !important;
}

html body #view-lists :where(
  .list-menu-action[data-share-list],
  .list-menu-action[data-export-list],
  .list-menu-action[data-edit-list]
)::before {
  color: var(--md-secondary) !important;
}

html body #view-lists .library-orphan-actions,
html body #view-favorites .library-orphan-actions {
  gap: 8px !important;
}

html body #view-lists .library-remove-button,
html body #view-favorites .library-remove-button {
  border-radius: var(--md-radius-control) !important;
  border-color: color-mix(in srgb, var(--md-error) 55%, transparent) !important;
  background: color-mix(in srgb, var(--md-error) 13%, var(--md-surface-elevated)) !important;
  color: #ffb4c0 !important;
}

html body #view-lists .library-remove-button:hover,
html body #view-favorites .library-remove-button:hover {
  border-color: var(--md-error) !important;
  background: color-mix(in srgb, var(--md-error) 24%, var(--md-surface-elevated)) !important;
  color: #ffd9df !important;
}

/* -------------------------------------------------------------------------- */
/* Bibliothek / Favoriten - card grid                                         */
/* -------------------------------------------------------------------------- */

html body :where(#view-lists, #view-favorites) .library-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body :where(#view-lists, #view-favorites) .library-grid > :where(.empty-state, .ui-state-card) {
  grid-column: 1 / -1;
}

html body :where(#view-lists, #view-favorites) .library-card-quickmeta {
  color: var(--md-muted) !important;
}

html body :where(#view-lists, #view-favorites) .tag-live {
  border-color: color-mix(in srgb, var(--md-success) 55%, transparent) !important;
  background: color-mix(in srgb, var(--md-success) 16%, var(--md-surface-elevated)) !important;
  color: var(--md-success) !important;
}

html body :where(#view-lists, #view-favorites) .library-pager {
  gap: 12px !important;
}

/* -------------------------------------------------------------------------- */
/* Bibliothek - list view                                                     */
/* -------------------------------------------------------------------------- */

html body #view-lists .library-list-thumb {
  overflow: hidden;
  border-radius: var(--md-radius-control) !important;
  background: var(--md-surface-elevated) !important;
}

html body #view-lists .library-list-thumb img {
  border-radius: inherit;
}

html body #view-lists .library-list-sub {
  color: var(--md-muted) !important;
}

html body #view-lists .library-list-cell.progress-cell strong {
  color: var(--md-on-surface) !important;
}

/* -------------------------------------------------------------------------- */
/* Tablet and mobile (max-width: 1180px)                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 1180px) and (min-width: 761px) {
  html body :where(#view-lists, #view-favorites) .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  html body :where(#view-lists, #view-favorites) .library-hub-tabs {
    width: calc(100vw - 24px);
    margin: 0 0 16px !important;
  }

  html body :where(#view-lists, #view-favorites) .library-hub-tabs .mobile-section-tab {
    min-height: 40px;
    padding-inline: 13px !important;
    font-size: 10px !important;
  }

  html body #view-lists #customLists.list-tabs {
    margin-bottom: 16px !important;
  }

  html body #view-lists .list-tab-item .list-tab {
    min-height: 38px;
    font-size: 11px !important;
  }

  html body :where(#view-lists, #view-favorites) .library-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body :where(#view-lists, #view-favorites) .mobile-library-extra {
    border-top-color: var(--md-outline) !important;
  }

  html body :where(#view-lists, #view-favorites) .mobile-library-extra strong {
    color: var(--md-dim) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Bibliothek - Umsetzung des Bibliothek-Golden-Masters                       */
/* Masse aus dem Referenzboard (Desktop-Bereich 1106x884, Content 857 breit)  */
/* auf die reale Contentbreite 1392 skaliert (Faktor 1.624 fuer Layout,       */
/* etwas kleiner fuer Schrift- und Bedienhoehen). Reine Darstellung - Daten,  */
/* Status, Fortschritt und Aktionen bleiben der bestehende Nutzerzustand.     */
/* -------------------------------------------------------------------------- */

html body #view-lists {
  --lib-gap: 14px;
  --lib-radius: 16px;
  --lib-radius-sm: 12px;
  --lib-pad: 20px;
  --lib-surface: #121214;
  --lib-surface-soft: #17161a;
  --lib-border: rgba(255, 255, 255, .07);
  --lib-border-strong: rgba(255, 255, 255, .13);
  --lib-text: #ececec;
  --lib-muted: #a9a3a5;
  --lib-dim: #7d7679;
  --lib-accent: #e53949;
  --lib-accent-soft: rgba(229, 57, 73, .14);
  --lib-accent-line: rgba(229, 57, 73, .42);
  --lib-rating: #f4b95f;
}

/* Kopfzeile ---------------------------------------------------------------- */

html body #view-lists .lib-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
}

html body #view-lists .lib-head-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

html body #view-lists .lib-head-copy .page-main-title {
  margin: 0 !important;
  color: var(--lib-text) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
}

html body #view-lists .lib-head-copy p {
  max-width: 720px;
  margin: 0 !important;
  color: var(--lib-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}

html body #view-lists .lib-head-actions {
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 !important;
}

/* Statistik-Kacheln ------------------------------------------------------- */

html body #view-lists .lib-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 22px;
}

html body #view-lists .lib-stat {
  min-height: 148px;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--lib-border);
  border-radius: var(--lib-radius);
  background: var(--lib-surface);
  box-shadow: none;
  color: inherit;
  font-family: var(--font-body);
  text-align: left;
  cursor: default;
}

html body #view-lists .lib-stat[disabled],
html body #view-lists .lib-stat.is-static {
  cursor: default;
}

html body #view-lists .lib-stat:not([disabled]):not(.is-static):hover {
  border-color: var(--lib-border-strong);
}

/* Ohne Icon steht die Beschriftung allein im Kopf der Karte. */
html body #view-lists .lib-stat.is-static .lib-stat-head {
  justify-content: flex-start;
}

html body #view-lists .lib-stat.is-active {
  border-color: var(--lib-accent-line);
  background: linear-gradient(180deg, rgba(229, 57, 73, .1), rgba(18, 18, 20, 1) 70%);
}

html body #view-lists .lib-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html body #view-lists .lib-stat-head small {
  color: var(--lib-muted);
  font-size: 13px;
}

html body #view-lists .lib-stat strong {
  color: var(--lib-text);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
}

html body #view-lists .lib-stat-hint {
  color: var(--lib-dim);
  font-size: 11.5px;
}

/* Kachel-Symbole: schlichte CSS-Formen, kein neues Icon-Set. */
html body #view-lists .lib-stat-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  position: relative;
  border-radius: 8px;
  background: var(--lib-accent-soft);
}

html body #view-lists .lib-stat-icon::after {
  content: "";
  position: absolute;
  display: block;
  border: 1.5px solid var(--lib-accent);
}

html body #view-lists .lib-stat-icon.bookmark::after {
  inset: 6px 8px;
  border-bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

html body #view-lists .lib-stat-icon.eye::after {
  inset: 8px 5px;
  border-radius: 50% / 100%;
}

html body #view-lists .lib-stat-icon.calendar::after {
  inset: 6px 6px;
  border-radius: 3px;
  border-top-width: 4px;
}

html body #view-lists .lib-stat-icon.heart::after {
  content: "♥";
  position: static;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 0;
  color: var(--lib-accent);
  font-size: 13px;
  line-height: 1;
}

html body #view-lists .lib-stat-icon.heart {
  display: grid;
  place-items: center;
}

/* Werkzeugleiste ---------------------------------------------------------- */

html body #view-lists .lib-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 18px;
}

html body #view-lists .lib-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

html body #view-lists .lib-tab {
  height: 46px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border: 1px solid var(--lib-border);
  border-radius: 11px;
  background: var(--lib-surface);
  color: var(--lib-muted);
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}

html body #view-lists .lib-tab b {
  color: var(--lib-dim);
  font-size: 12px;
  font-weight: 600;
}

html body #view-lists .lib-tab:hover {
  border-color: var(--lib-border-strong);
  color: var(--lib-text);
}

html body #view-lists .lib-tab.is-active {
  border-color: transparent;
  background: var(--lib-accent);
  color: #fff;
}

html body #view-lists .lib-tab.is-active b {
  color: rgba(255, 255, 255, .72);
}

html body #view-lists .lib-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Eine gemeinsame Hoehe fuer alle Toolbar-Controls. Vorher stylte die Regel
   nur das native <select>; sichtbar ist aber die geteilte ar-select-Komponente,
   deshalb lag das Sortierfeld nicht auf der Hoehe der Ansichts-Icons. */
html body #view-lists .lib-tools {
  --lib-control-height: 48px;
}

html body #view-lists .lib-create-list {
  height: var(--lib-control-height) !important;
  min-height: var(--lib-control-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: var(--lib-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  white-space: nowrap !important;
}

html body #view-lists .lib-create-list:hover {
  filter: brightness(1.08);
}

html body #view-lists .lib-sort-field {
  display: block;
  margin: 0;
}

html body #view-lists .lib-sort-field .ar-select {
  width: 210px;
}

html body #view-lists .lib-sort-field .ar-select-btn {
  height: var(--lib-control-height) !important;
  min-height: var(--lib-control-height) !important;
  padding: 0 !important;
  border: 1px solid var(--lib-border) !important;
  border-radius: 11px !important;
  background: var(--lib-surface) !important;
  color: var(--lib-text) !important;
  box-shadow: none !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
}

html body #view-lists .lib-sort-field .ar-select-text {
  padding: 0 0 0 16px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 550 !important;
}

html body #view-lists .lib-sort-field .ar-select-arrow {
  border-left: 0 !important;
  background: transparent !important;
}

html body #view-lists .lib-sort-field select {
  height: var(--lib-control-height);
  min-height: 0 !important;
  padding: 0 38px 0 16px !important;
  border: 1px solid var(--lib-border) !important;
  border-radius: 11px !important;
  background: var(--lib-surface) !important;
  color: var(--lib-text) !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}

html body #view-lists .lib-hidden-field {
  display: none !important;
}

html body #view-lists .lib-view-toggle {
  height: var(--lib-control-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--lib-border);
  border-radius: 12px;
  background: var(--lib-surface);
}

html body #view-lists .lib-view-btn {
  width: 36px;
  height: 36px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

html body #view-lists .lib-view-btn.is-active {
  background: var(--lib-accent);
}

html body #view-lists .lib-view-icon {
  width: 16px;
  height: 16px;
  display: block;
  opacity: .72;
}

html body #view-lists .lib-view-btn.is-active .lib-view-icon {
  opacity: 1;
}

html body #view-lists .lib-view-icon.is-grid {
  background:
    linear-gradient(#fff, #fff) 0 0 / 7px 7px no-repeat,
    linear-gradient(#fff, #fff) 9px 0 / 7px 7px no-repeat,
    linear-gradient(#fff, #fff) 0 9px / 7px 7px no-repeat,
    linear-gradient(#fff, #fff) 9px 9px / 7px 7px no-repeat;
}

html body #view-lists .lib-view-icon.is-list {
  background:
    linear-gradient(#fff, #fff) 0 1px / 16px 3px no-repeat,
    linear-gradient(#fff, #fff) 0 7px / 16px 3px no-repeat,
    linear-gradient(#fff, #fff) 0 13px / 16px 3px no-repeat;
}

/* Layout: Hauptspalte plus Filterpanel ------------------------------------ */

html body #view-lists .lib-layout {
  display: grid;
  grid-template-columns: minmax(0, 687fr) minmax(0, 157fr);
  align-items: start;
  gap: 23px;
}

html body #view-lists .lib-main {
  min-width: 0;
  display: grid;
  gap: var(--lib-gap);
  align-content: start;
}

html body #view-lists .lib-side {
  min-width: 0;
  display: grid;
  gap: var(--lib-gap);
  align-content: start;
}

html body #view-lists .lib-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--lib-pad);
  border: 1px solid var(--lib-border);
  border-radius: var(--lib-radius);
  background: var(--lib-surface);
  line-height: 1.42;
}

/* display:flex wuerde das hidden-Attribut der Insights-Card aushebeln. */
html body #view-lists .lib-card[hidden] {
  display: none !important;
}

html body #view-lists .lib-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

html body #view-lists .lib-card-head h3 {
  margin: 0;
  color: var(--lib-text);
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.25;
  text-transform: none;
}

html body #view-lists .lib-card-count {
  color: var(--lib-dim);
  font-size: 12.5px;
}

html body #view-lists .lib-card-action {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--lib-accent);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-lists .lib-card-action:hover {
  text-decoration: underline;
}

html body #view-lists .lib-empty {
  margin: 0;
  color: var(--lib-dim);
  font-size: 13px;
}

/* Weiter schauen ---------------------------------------------------------- */

html body #view-lists .lib-continue-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

html body #view-lists .lib-continue-card {
  min-width: 0;
  display: grid;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

html body #view-lists .lib-continue-art {
  position: relative;
  display: block;
  aspect-ratio: 175 / 120;
  overflow: hidden;
  border-radius: var(--lib-radius-sm);
  background: #201a1c;
}

html body #view-lists .lib-continue-art img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center 22%;
}

html body #view-lists .lib-continue-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

html body #view-lists .lib-continue-copy strong {
  overflow: hidden;
  color: var(--lib-text);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-lists .lib-continue-copy small {
  color: var(--lib-muted);
  font-size: 12.5px;
}

/* Fortschrittsbalken ------------------------------------------------------ */

html body #view-lists .lib-progress {
  display: flex;
  align-items: center;
  gap: 9px;
}

html body #view-lists .lib-progress i {
  height: 5px;
  flex: 1 1 auto;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

html body #view-lists .lib-progress i b {
  height: 100%;
  display: block;
  border-radius: 999px;
  background: var(--lib-accent);
}

html body #view-lists .lib-progress em {
  color: var(--lib-muted);
  font-size: 11.5px;
  font-style: normal;
  white-space: nowrap;
}

html body #view-lists .lib-progress.is-compact em {
  font-size: 11px;
}

/* Favoriten-Knopf --------------------------------------------------------- */

html body #view-lists .lib-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(12, 10, 11, .68);
  color: #fff;
  box-shadow: none;
  font-size: 14px;
  cursor: pointer;
  z-index: 2;
}

html body #view-lists .lib-fav-btn.is-active {
  border-color: transparent;
  background: var(--lib-accent);
}

/* Anime-Grid -------------------------------------------------------------- */

html body #view-lists .lib-grid-card #libraryGrid.library-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 13px !important;
}

html body #view-lists .lib-card-item {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

html body #view-lists .lib-card-art {
  position: relative;
  display: block;
  aspect-ratio: 101 / 136;
  overflow: hidden;
  border-radius: var(--lib-radius-sm);
  background: #201a1c;
}

html body #view-lists .lib-card-art img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}

html body #view-lists .lib-card-flag {
  position: absolute;
  bottom: 7px;
  left: 7px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border-radius: 6px;
  background: var(--lib-accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
}

html body #view-lists .lib-card-title {
  overflow: hidden;
  color: var(--lib-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-lists .lib-card-item:hover .lib-card-title {
  color: #fff;
}

html body #view-lists .lib-card-meta {
  color: var(--lib-dim);
  font-size: 11.5px;
}

html body #view-lists .lib-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--lib-text);
  font-size: 12px;
  font-weight: 600;
}

html body #view-lists .lib-card-rating i {
  color: var(--lib-rating);
  font-style: normal;
}

html body #view-lists .lib-card-rating.is-empty {
  color: var(--lib-dim);
  font-weight: 400;
}

html body #view-lists .lib-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

html body #view-lists .lib-chip {
  height: 24px;
  min-height: 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 0 9px;
  border: 1px solid var(--lib-border-strong);
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
  color: #cfc8ca;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

html body #view-lists .lib-chip.is-watching {
  border-color: rgba(158, 118, 255, .38);
  background: rgba(158, 118, 255, .14);
  color: #c3aaff;
}

html body #view-lists .lib-chip.is-planned {
  border-color: rgba(244, 185, 95, .34);
  background: rgba(244, 185, 95, .12);
  color: #f0c579;
}

html body #view-lists .lib-chip.is-completed {
  border-color: rgba(79, 191, 122, .34);
  background: rgba(79, 191, 122, .12);
  color: #74cf96;
}

html body #view-lists .lib-chip.is-paused,
html body #view-lists .lib-chip.is-dropped {
  border-color: var(--lib-border-strong);
  background: rgba(255, 255, 255, .04);
  color: #b3abad;
}

html body #view-lists .lib-more {
  width: 22px;
  height: 24px;
  min-height: 0;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--lib-dim);
  font-size: 14px;
  cursor: pointer;
}

html body #view-lists .lib-more:hover {
  color: var(--lib-text);
}

/* Filterpanel ------------------------------------------------------------- */

html body #view-lists .lib-side-card {
  gap: 16px;
}

html body #view-lists .lib-search input {
  width: 100%;
  height: 40px;
  min-height: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--lib-border) !important;
  border-radius: 10px !important;
  background: var(--lib-surface-soft) !important;
  color: var(--lib-text) !important;
  box-shadow: none !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
}

html body #view-lists .lib-facets {
  display: grid;
  gap: 18px;
}

html body #view-lists .lib-facet {
  display: grid;
  gap: 10px;
}

html body #view-lists .lib-facet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

html body #view-lists .lib-facet-head small {
  color: var(--lib-text);
  font-size: 13px;
  font-weight: 600;
}

html body #view-lists .lib-facet-rows {
  display: grid;
  gap: 7px;
}

html body #view-lists :where(.lib-genre-row, .lib-status-row, .lib-rating-row, .lib-quick-row) {
  min-height: 0;
  display: grid;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--lib-muted);
  font-family: var(--font-body);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

html body #view-lists :where(.lib-genre-row, .lib-status-row, .lib-rating-row, .lib-quick-row):hover {
  background: rgba(255, 255, 255, .04);
  color: var(--lib-text);
}

html body #view-lists :where(.lib-genre-row, .lib-status-row, .lib-rating-row, .lib-quick-row).is-active {
  border-color: var(--lib-accent-line);
  background: var(--lib-accent-soft);
  color: var(--lib-text);
}

html body #view-lists .lib-genre-row {
  grid-template-columns: minmax(0, 58px) minmax(0, 1fr) 30px;
}

html body #view-lists .lib-genre-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body #view-lists .lib-genre-row i {
  height: 5px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

html body #view-lists .lib-genre-row i b {
  height: 100%;
  display: block;
  border-radius: 999px;
  background: var(--lib-accent);
}

html body #view-lists .lib-genre-row em {
  color: var(--lib-dim);
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

html body #view-lists .lib-status-row {
  grid-template-columns: 8px minmax(0, 1fr) auto;
}

html body #view-lists .lib-rating-row,
html body #view-lists .lib-quick-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

html body #view-lists :where(.lib-status-row, .lib-rating-row, .lib-quick-row) b {
  color: var(--lib-text);
  font-size: 11.5px;
  font-weight: 650;
}

html body #view-lists .lib-rating-row span {
  color: var(--lib-rating);
  font-size: 12px;
  letter-spacing: 1px;
}

html body #view-lists .lib-rating-row em {
  color: rgba(255, 255, 255, .14);
  font-style: normal;
}

html body #view-lists .lib-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lib-dim);
}

html body #view-lists .lib-dot.is-watching { background: #9e76ff; }
html body #view-lists .lib-dot.is-planned { background: #f4b95f; }
html body #view-lists .lib-dot.is-completed { background: #4fbf7a; }
html body #view-lists .lib-dot.is-paused { background: #8a8285; }
html body #view-lists .lib-dot.is-dropped { background: #6a6265; }

html body #view-lists .lib-facet-reset {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--lib-border-strong);
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: var(--lib-muted);
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
}

html body #view-lists .lib-facet-reset:hover {
  border-color: var(--lib-accent-line);
  color: var(--lib-text);
}

html body #view-lists .lib-insight-rows {
  display: grid;
  gap: 10px;
}

html body #view-lists .lib-insight {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

html body #view-lists .lib-insight small {
  color: var(--lib-muted);
  font-size: 12px;
}

html body #view-lists .lib-insight strong {
  color: var(--lib-text);
  font-size: 14px;
  font-weight: 650;
}

/* Die Listenleiste ist der einzige Listenbereich der Bibliothek: "Alle",
   "Favoriten" und die selbst erstellten Listen. Die alte Regel
   `#view-lists.mobile-library-mode-all #customLists { display: none }` aus
   styles-v2-4-141.css greift auch auf dem Desktop und hat die eigenen Listen
   unsichtbar gemacht - sie wird hier fuer alle Bibliotheks-Modi aufgehoben. */
html body #view-lists.mobile-library-mode-all #customLists.list-tabs,
html body #view-lists.mobile-library-mode-lists #customLists.list-tabs,
html body #view-lists.mobile-library-mode-favorites #customLists.list-tabs,
html body #view-lists #customLists.list-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 0 0 16px !important;
}

/* Die deaktivierte Folgen-Kachel darf nicht ausgegraut wirken. */
html body #view-lists .lib-stat[disabled] {
  opacity: 1;
  color: inherit;
}

/* Bibliotheksaktionen bleiben erhalten, treten aber zurueck (das Board zeigt
   im Kopf keine Buttons). */
html body #view-lists .lib-head-actions .ghost-action,
html body #view-lists .lib-head-actions .solid-action {
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
}

/* Listenansicht bleibt vollflaechig in der Hauptspalte. */
html body #view-lists .lib-grid-card #libraryGrid.library-list {
  display: grid !important;
  gap: 8px !important;
}

/* Mobile ------------------------------------------------------------------ */

@media (max-width: 1180px) and (min-width: 761px) {
  html body #view-lists .lib-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html body #view-lists .lib-grid-card #libraryGrid.library-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body #view-lists .lib-continue-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html body #view-lists .lib-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0 0 14px;
  }

  /* Aktionen bleiben verfuegbar, aber in einer kompakten Zeile. */
  html body #view-lists .lib-head-actions {
    display: flex;
    gap: 6px;
  }

  html body #view-lists .lib-head-actions .ghost-action,
  html body #view-lists .lib-head-actions .solid-action {
    flex: 1 1 0;
    min-height: 34px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
    white-space: nowrap;
  }

  html body #view-lists .lib-head-copy .page-main-title {
    font-size: 24px !important;
  }

  html body #view-lists .lib-head-copy p {
    font-size: 13px !important;
  }

  html body #view-lists .lib-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 14px;
  }

  html body #view-lists .lib-stat {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "value" "label";
    align-content: center;
    gap: 2px;
    padding: 12px 13px;
    border-radius: 13px;
  }

  html body #view-lists .lib-stat-head {
    display: contents;
  }

  html body #view-lists .lib-stat-head small {
    grid-area: label;
    font-size: 11.5px;
  }

  html body #view-lists .lib-stat-icon {
    grid-area: icon;
    align-self: center;
  }

  html body #view-lists .lib-stat strong {
    grid-area: value;
    font-size: 20px;
  }

  html body #view-lists .lib-stat-hint {
    display: none;
  }

  /* Statusreiter und Werkzeuge scrollen waagerecht wie im Mobile-Board. */
  html body #view-lists .lib-toolbar {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 0 12px;
  }

  html body #view-lists .lib-tabs {
    flex-wrap: nowrap;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  html body #view-lists .lib-tabs::-webkit-scrollbar {
    display: none;
  }

  html body #view-lists .lib-tab {
    height: 34px;
    flex: 0 0 auto;
    padding: 0 13px;
    border-radius: 9px;
    font-size: 12.5px;
  }

  html body #view-lists .lib-tab b {
    display: none;
  }

  html body #view-lists .lib-tools {
    flex: 0 0 auto;
    gap: 6px;
  }

  html body #view-lists .lib-sort-field {
    display: none;
  }

  html body #view-lists .lib-view-toggle {
    padding: 3px;
    border-radius: 10px;
  }

  html body #view-lists .lib-view-btn {
    width: 28px;
    height: 28px;
  }

  html body #view-lists .lib-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  html body #view-lists .lib-card {
    --lib-pad: 14px;
    gap: 12px;
    border-radius: 14px;
  }

  html body #view-lists .lib-card-head h3 {
    font-size: 15px;
  }

  /* Weiter schauen wird zur kompakten Zeilenliste. */
  html body #view-lists .lib-continue-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  html body #view-lists .lib-continue-card {
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    padding: 8px;
    border: 1px solid var(--lib-border);
    border-radius: var(--lib-radius-sm);
    background: var(--lib-surface-soft);
  }

  html body #view-lists .lib-continue-art {
    aspect-ratio: 96 / 60;
  }

  html body #view-lists .lib-fav-btn {
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  html body #view-lists .lib-grid-card #libraryGrid.library-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body #view-lists .lib-card-title {
    font-size: 11.5px;
  }

  html body #view-lists .lib-card-meta,
  html body #view-lists .lib-card-rating {
    font-size: 10.5px;
  }

  html body #view-lists .lib-chip {
    height: 20px;
    padding: 0 7px;
    font-size: 9.5px;
  }

  html body #view-lists .lib-side {
    gap: 12px;
  }
}


/* ========================================================================== */
/* Listenmenue als Overlay - keine Layoutspruenge                             */
/* ========================================================================== */

/* styles-v2-4-141.css setzt unter "V2.2.4: Listenmenue nimmt Layoutplatz ein"
   `position: static !important` auf das offene Menue. Der Reiter wuchs damit
   beim Oeffnen von 95x42 auf 222x152 und hat Toolbar, Filterpanel und Tabelle
   um rund 110px nach unten geschoben. Das Menue ist hier wieder ein echtes
   Overlay: Der Reiter behaelt seine Groesse, darunter bewegt sich nichts. */
html body #view-lists #customLists .list-tab-item.menu-open {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  overflow: visible !important;
}

html body #view-lists #customLists .list-tab-item.menu-open .list-actions-wrap {
  display: flex !important;
}

html body #view-lists #customLists .list-tab-item.menu-open .list-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  width: max-content !important;
  min-width: 210px !important;
  max-width: min(280px, 86vw) !important;
  margin-top: 0 !important;
  grid-column: auto !important;
  /* Sichere Grundausrichtung ohne !important, damit positionOpenListMenu()
     die Kante per Inline-Style korrigieren kann. Linksbuendig laeuft nie
     ueber den linken Rand; nach rechts korrigiert das Skript. */
  left: 0;
  right: auto;
}

/* Der zusaetzliche Platzhalter unter der Leiste entfaellt damit ebenfalls. */
html body #view-lists #customLists.list-tabs.has-open-menu {
  padding-bottom: 0 !important;
  margin: 0 0 16px !important;
  align-items: center !important;
}

/* Reiter und Werkzeuge duerfen ihre Groesse im aktiven, fokussierten oder
   geoeffneten Zustand nicht aendern - kein Skalieren, kein Verschieben. */
html body #view-lists :where(.list-tab-item, .list-tab, .list-menu-toggle, .lib-quick-row, .lib-genre-row, .lib-status-row, .lib-rating-row, .lib-create-list, .lib-view-toggle button):where(:hover, :focus, :focus-visible, :active, .is-active) {
  transform: none !important;
}

html body #view-lists .lib-sort-field .ar-select-btn:where(:hover, :focus, :focus-visible, :active),
html body #view-lists .ar-select.is-open .ar-select-btn {
  transform: none !important;
  height: var(--lib-control-height) !important;
  min-height: var(--lib-control-height) !important;
}

/* ========================================================================== */
/* Listenexport: Auswahl der Liste                                            */
/* ========================================================================== */

html body .list-export-dialog .list-export-picker {
  display: grid;
  gap: 8px;
  margin: 16px 0 6px;
  text-align: left;
}

html body .list-export-dialog .list-export-picker > span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body .list-export-dialog .list-export-picker .ar-select {
  width: 100%;
}

html body .list-export-dialog .list-export-picker .ar-select-btn {
  min-height: 50px;
}

html body .list-export-dialog .list-export-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

html body .list-export-dialog .export-format-card[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* ========================================================================== */
/* Import: Vorschau-Filter und Abschlussbericht                               */
/* ========================================================================== */

html body .list-import-dialog .import-result-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

html body .list-import-dialog .import-report-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html body .list-import-dialog .import-report-block {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  text-align: left;
}

html body .list-import-dialog .import-report-block > strong {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body .list-import-dialog .import-report-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  max-height: 190px;
  overflow-y: auto;
  list-style: none;
}

html body .list-import-dialog .import-report-list li {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
}

html body .list-import-dialog .import-report-list li span {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
}

html body .list-import-dialog .import-report-list li small {
  color: var(--muted);
  font-size: 11.5px;
}

@media (max-width: 560px) {
  html body .list-import-dialog .import-result-summary,
  html body .list-import-dialog .import-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}