/* Earshot — visual design matched to Seerr (https://github.com/seerr-team/seerr, MIT).
   Colors are the Tailwind default palette values Seerr uses; font is Inter. */

:root {
  --g950: #0b101c;
  --g900: #111827;
  --g800: #1f2937;
  --g700: #374151;
  --g600: #4b5563;
  --g500: #6b7280;
  --g400: #9ca3af;
  --g300: #d1d5db;
  --g200: #e5e7eb;
  --g100: #f3f4f6;
  --indigo-700: #4338ca;
  --indigo-600: #4f46e5;
  --indigo-500: #6366f1;
  --indigo-400: #818cf8;
  --purple-700: #7e22ce;
  --purple-600: #9333ea;
  --purple-500: #a855f7;
  --purple-400: #c084fc;
  --green-500: #22c55e;
  --green-400: #4ade80;
  --yellow-500: #eab308;
  --yellow-400: #facc15;
  --red-600: #dc2626;
  --red-500: #ef4444;
  --red-400: #f87171;
  --red-300: #fca5a5;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --sidebar-w: 256px;
  --topbar-h: 64px;
}

* { box-sizing: border-box; }

html {
  scrollbar-width: thin;
  scrollbar-color: var(--g600) var(--g800);
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--g800); }
html::-webkit-scrollbar-thumb { background-color: var(--g600); }

html {
  /* Stops mobile browsers inflating text in landscape. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--g900);
  color: var(--g100);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* A single wide element must never make the whole page pan sideways. */
  overflow-x: hidden;
}

img { display: block; }
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: inherit; text-decoration: none; }

/* ==========================================================
   App layout: ambient gradient, sidebar, topbar
   ========================================================== */

.layout { min-height: 100vh; }

.ambient {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 16rem;
  background: linear-gradient(to bottom left, var(--g800), var(--g900));
  pointer-events: none;
}
.ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--g900), transparent);
}

.sidebar {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--sidebar-w);
  z-index: 40;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--g700);
  background: linear-gradient(180deg, #1f2937 0%, #131928 100%);
  overflow-y: auto;
  padding-bottom: 16px;
  transition: transform .3s ease-in-out;
}

.sidebar__logo {
  display: block;
  padding: 8px 16px;
}
.sidebar__logo img { width: 100%; height: 96px; object-fit: contain; }

.sidebar__nav {
  margin-top: 32px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  border-radius: 6px;
  padding: 8px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5rem;
  color: #fff;
  transition: background .15s ease-in-out;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.sidebar__link svg { margin-right: 12px; width: 24px; height: 24px; flex: none; }
.sidebar__link:hover { background: var(--g700); }
.sidebar__link[aria-current='page'] {
  background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600));
}
.sidebar__link[aria-current='page']:hover {
  background: linear-gradient(to bottom right, var(--indigo-500), var(--purple-500));
}

.sidebar__count {
  margin-left: auto;
  display: inline-flex;
  padding: 0 8px;
  font-size: .75rem;
  line-height: 1.25rem;
  font-weight: 600;
  border-radius: 6px;
  color: #fff;
  border: 1px solid var(--indigo-500);
  background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600));
}

/* Mobile slide-over */
.sidebar { transform: translateX(-100%); }
.sidebar[data-open='true'] { transform: translateX(0); }
.mobile-scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(17, 24, 39, .9);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s linear;
}
.mobile-scrim[data-open='true'] { opacity: 1; pointer-events: auto; }

.content { position: relative; min-height: 100vh; }

@media (min-width: 1024px) {
  .sidebar { transform: none; }
  .content { margin-left: var(--sidebar-w); }
  .mobile-scrim { display: none; }
}

/* Topbar / searchbar */
.searchbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  background: transparent;
  transition: background .3s;
}
@media (min-width: 1024px) {
  .searchbar { left: var(--sidebar-w); }
}
.searchbar--scrolled {
  background: rgba(55, 65, 81, .8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Seerr shows the sidebar toggle only on tablets: phones get the bottom bar
   instead, and desktops have the sidebar pinned open. */
.menubtn {
  border: none;
  background: transparent;
  color: #fff;
  opacity: .7;
  padding: 0;
  margin-right: 8px;
  display: none;
  transition: opacity .3s;
}
.menubtn:hover { opacity: 1; }
.menubtn svg { width: 28px; height: 28px; }
@media (min-width: 640px) { .menubtn { display: flex; } }
@media (min-width: 1024px) { .menubtn { display: none; } }

/* ==========================================================
   Mobile bottom bar (Seerr's MobileMenu) — phones only
   ========================================================== */

.mobilemenu {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
}
@media (min-width: 640px) { .mobilemenu { display: none; } }

.mobilemenu__bar {
  border-top: 1px solid var(--g600);
  background: rgba(31, 41, 55, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobilemenu__bar > * { flex: 1; }
.mobilemenu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobilemenu__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  border: none;
  background: none;
  color: var(--g100);
}
.mobilemenu__tab.is-active { color: var(--indigo-500); }
.mobilemenu__tab svg { width: 24px; height: 24px; }

.mobilemenu__badge {
  position: absolute;
  bottom: 12px;
  left: 50%;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--indigo-500);
  background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600));
  color: #fff;
  font-size: 8px;
  font-weight: 600;
}

.mobilemenu__sheet {
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-top: 1px solid var(--g600);
  background: rgba(17, 24, 39, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--g100);
  font-weight: 600;
}
.mobilemenu__sheet[hidden] { display: none; }
.mobilemenu__item { display: flex; align-items: center; gap: 8px; }
.mobilemenu__item.is-active { color: var(--indigo-500); }
.mobilemenu__item svg { width: 20px; height: 20px; }
.mobilemenu__item .mobilemenu__badge {
  position: static;
  margin-left: auto;
  font-size: .75rem;
  height: 20px;
  border-radius: 6px;
}

.searchwrap { position: relative; flex: 1; display: flex; align-items: center; }
.searchwrap > svg {
  position: absolute;
  left: 16px;
  width: 20px; height: 20px;
  color: #fff;
  pointer-events: none;
}
.searchwrap input {
  display: block;
  width: 100%;
  border-radius: 9999px;
  border: 1px solid var(--g600);
  background: rgba(17, 24, 39, .8);
  padding: 8px 40px 8px 40px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
}
.searchwrap input::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchwrap input::placeholder { color: var(--g300); }

.searchclear {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 28px;
  padding: 4px;
  border: none;
  background: none;
  color: var(--g400);
  transition: color .15s;
}
.searchclear:hover { color: #fff; }
.searchclear svg { width: 20px; height: 20px; }
.searchclear[hidden] { display: none; }
.searchwrap input:hover { border-color: var(--g500); }
.searchwrap input:focus { border-color: var(--g500); background: var(--g900); }
.searchwrap input:focus::placeholder { color: var(--g400); }

/* User dropdown */
.userdrop { position: relative; }
.userdrop__btn {
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
}
.avatar {
  width: 32px; height: 32px;
  flex: none;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600));
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.userdrop__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 220px;
  border-radius: 6px;
  background: var(--g800);
  border: 1px solid var(--g700);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.4);
  padding: 4px 0;
  z-index: 50;
}
.userdrop__who {
  padding: 10px 16px;
  border-bottom: 1px solid var(--g700);
}
.userdrop__who .name { color: #fff; font-weight: 600; font-size: .95rem; }
.userdrop__who .mail { color: var(--g400); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.userdrop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--g200);
  font-size: .9rem;
  padding: 10px 16px;
  text-align: left;
}
.userdrop__item svg { width: 20px; height: 20px; color: var(--g400); }
.userdrop__item:hover { background: var(--g700); color: #fff; }

/* Main area — Seerr uses px-4 with no centring, so content hugs the sidebar.
   The bottom padding clears the mobile bar (its mb-16). */
.main {
  position: relative;
  padding: calc(var(--topbar-h) + 8px) 16px 96px;
}
@media (max-width: 639px) {
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ==========================================================
   Headings, sliders
   ========================================================== */

.heading { font-size: 1.5rem; font-weight: 700; line-height: 2rem; color: var(--g100); margin: 0; }
.description { margin: 4px 0 0; max-width: 56rem; font-size: .875rem; color: var(--g400); }

/* Seerr's <Header>: big gradient page title. */
.page-title {
  margin: 32px 0 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  background-image: linear-gradient(to bottom right, var(--indigo-400), var(--purple-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (min-width: 640px) {
  .page-title { font-size: 2.25rem; line-height: 2.5rem; }
}

.slider-header {
  position: relative;
  margin: 24px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.slider-title {
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.25rem;
  color: var(--g300);
  margin: 0;
}
a.slider-title { transition: color .3s; }
a.slider-title:hover { color: #fff; }
a.slider-title svg { width: 24px; height: 24px; margin-left: 8px; }
.slider-arrows { display: flex; gap: 8px; }
.slider-arrow {
  border: none;
  background: transparent;
  color: var(--g500);
  padding: 2px;
  display: flex;
  transition: color .2s;
}
.slider-arrow:hover:not(:disabled) { color: #fff; }
.slider-arrow svg { width: 24px; height: 24px; }

/* One row per rail, scrolling sideways — Seerr's Slider. */
.slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 4px 16px;
  margin: -12px -4px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider > * { flex: none; }

/* Author cards — portrait above the name, as ReadMeABook shows them. */
.author-card {
  width: 144px;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: inherit;
}
@media (min-width: 768px) { .author-card { width: 176px; } }
.authors-grid .author-card { width: 100%; }

.authors-grid .author-card__pic { width: 100%; height: auto; aspect-ratio: 1; }

.author-card__pic {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--g800);
  box-shadow: 0 0 0 1px var(--g700), 0 4px 6px -1px rgba(0,0,0,.4);
  display: grid;
  place-items: center;
  transform: scale(1);
  transition: transform .3s, box-shadow .3s;
}
.author-card:hover .author-card__pic {
  transform: scale(1.05);
  box-shadow: 0 0 0 1px var(--g500), 0 10px 15px -3px rgba(0,0,0,.5);
}
.author-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.author-card__initials {
  font-size: 2rem;
  font-weight: 700;
  color: var(--g400);
}
.author-card__name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--g200);
  text-align: center;
  line-height: 1.3;
}
.author-card:hover .author-card__name { color: #fff; }

.authors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
  gap: 24px 16px;
  padding: 12px 4px;
  margin: -12px -4px 0;
}

/* Segmented control rendered as links (Audiobooks list switch). */
.seg-link {
  border: none;
  background: transparent;
  color: var(--g300);
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  border-right: 1px solid var(--g700);
}
.seg-link:last-child { border-right: none; }
.seg-link:hover { color: #fff; background: var(--g700); }
.seg-link[aria-pressed='true'] {
  color: #fff;
  background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600));
}

.cards-vertical {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
  gap: 16px;
  padding: 12px 4px;
  margin: -12px -4px 0;
  list-style: none;
}

/* Browse pages use a fixed column count so rows always come out even and the
   covers grow to fill the width, instead of auto-fill packing in more, smaller
   ones on a wide monitor. Panels keep the auto-fill grid above. */
.view .cards-vertical,
.view .authors-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 480px) {
  .view .cards-vertical, .view .authors-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .view .cards-vertical, .view .authors-grid { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1024px) {
  .view .cards-vertical, .view .authors-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (min-width: 1280px) {
  .view .cards-vertical, .view .authors-grid { grid-template-columns: repeat(10, 1fr); }
}

/* ==========================================================
   Title cards
   ========================================================== */

.title-card { width: 144px; }
@media (min-width: 768px) { .title-card { width: 176px; } }
.cards-vertical .title-card { width: 100%; }

.title-card__inner {
  position: relative;
  /* Audiobook art is square, unlike Seerr's 2:3 film posters — a taller box
     would crop the top and bottom off every cover. */
  padding-bottom: 100%;
  border-radius: 12px;
  background: var(--g800);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--g700), 0 1px 3px 0 rgba(0,0,0,.3);
  transform: scale(1);
  transition: transform .3s, box-shadow .3s;
  cursor: pointer;
  outline: none;
  border: none;
  padding-top: 0; padding-left: 0; padding-right: 0;
  display: block;
  width: 100%;
  text-align: left;
}
.title-card__inner:hover,
.title-card__inner:focus-visible {
  transform: scale(1.05);
  box-shadow: 0 0 0 1px var(--g500), 0 10px 15px -3px rgba(0,0,0,.5);
  z-index: 2;
}

/* "See More" tile that closes each Discover rail. */
.more-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--g800);
  color: var(--g300);
  text-align: center;
}
.more-card__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 600;
}
.more-card svg { width: 32px; height: 32px; }
.more-card:hover { color: #fff; }

.title-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.title-card__top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 8px;
  z-index: 3;
}

.type-pill {
  pointer-events: none;
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 9999px;
  border: 1px solid var(--purple-600);
  background: rgba(147, 51, 234, .8);
  color: #fff;
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.3);
}

/* Mini status badge (top-right of cards) */
.status-mini {
  pointer-events: none;
  display: inline-flex;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px var(--g700), 0 4px 6px -1px rgba(0,0,0,.4);
}
.status-mini i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 2px;
  border-radius: 9999px;
  color: #fff;
}
.status-mini svg { width: 100%; height: 100%; }
.status-mini--pending i   { background: rgba(234, 179, 8, .8);  box-shadow: 0 0 0 1px var(--yellow-400); }
.status-mini--approved i  { background: rgba(99, 102, 241, .8); box-shadow: 0 0 0 1px var(--indigo-400); }
.status-mini--completed i { background: rgba(34, 197, 94, .8);  box-shadow: 0 0 0 1px var(--green-400); }
.status-mini--available i { background: rgba(34, 197, 94, .8);  box-shadow: 0 0 0 1px var(--green-400); }
.status-mini--declined i  { background: rgba(239, 68, 68, .8);  box-shadow: 0 0 0 1px var(--red-400); }

/* Hover overlay */
.title-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(45, 55, 72, .4) 0%, rgba(45, 55, 72, .9) 100%);
  opacity: 0;
  transition: opacity .3s;
}
.title-card__inner:hover .title-card__overlay,
.title-card__inner:focus-visible .title-card__overlay,
.title-card__overlay--always { opacity: 1; }

.title-card__text {
  padding: 0 8px 8px;
  color: #fff;
  width: 100%;
}
.title-card__year { font-size: .875rem; font-weight: 500; }
.title-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.title-card__summary {
  font-size: .75rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  margin-top: 2px;
}

/* ==========================================================
   Buttons (Seerr Button component)
   ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-weight: 500;
  line-height: 1.25rem;
  font-family: inherit;
  transition: background .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
  white-space: nowrap;
  padding: 8px 16px;
  font-size: .875rem;
  color: var(--g200);
  background: rgba(31, 41, 55, .8);
  border-color: var(--g600);
}
.btn:hover:not(:disabled) { color: #fff; background: var(--g700); }
.btn svg { width: 20px; height: 20px; }
.btn--sm { padding: 6px 10px; font-size: .75rem; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--lg { padding: 12px 24px; font-size: 1rem; }

.btn--primary {
  color: #fff;
  border-color: var(--indigo-500);
  background: rgba(79, 70, 229, .8);
}
.btn--primary:hover:not(:disabled) { background: var(--indigo-600); }

.btn--danger {
  color: #fff;
  border-color: var(--red-500);
  background: rgba(220, 38, 38, .8);
}
.btn--danger:hover:not(:disabled) { background: var(--red-600); }

.btn--success {
  color: #fff;
  border-color: var(--green-500);
  background: rgba(34, 197, 94, .8);
}
.btn--success:hover:not(:disabled) { background: var(--green-500); }

.btn--ghost {
  color: #fff;
  background: transparent;
  border-color: var(--g600);
}
.btn--ghost:hover:not(:disabled) { border-color: var(--g200); background: transparent; }

.btn--block { width: 100%; }

.btn__spin {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================
   Badges (Seerr Badge component)
   ========================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-size: .75rem;
  line-height: 1.25rem;
  font-weight: 600;
  border-radius: 9999px;
  white-space: nowrap;
  color: #fff;
  border: 1px solid var(--g600);
  background: rgba(75, 85, 99, .8);
}
.badge--pending   { background: rgba(234, 179, 8, .8);  border-color: var(--yellow-500); }
.badge--approved  { background: rgba(99, 102, 241, .8); border-color: var(--indigo-500); }
.badge--completed { background: rgba(34, 197, 94, .8);  border-color: var(--green-500); }
.badge--available { background: rgba(34, 197, 94, .8);  border-color: var(--green-500); }
.badge--declined  { background: rgba(239, 68, 68, .8);  border-color: var(--red-500); }
/* Not out yet — explains a request that cannot become available regardless. */
.badge--unreleased { background: rgba(75, 85, 99, .8); border-color: var(--g500); color: var(--g200); }

/* ==========================================================
   Forms (Seerr form styles)
   ========================================================== */

.field { margin-bottom: 16px; }

label, .field > label {
  display: block;
  margin-bottom: 4px;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: var(--g400);
}

.hint { display: block; font-weight: 500; color: var(--g500); font-size: .8rem; margin-top: 4px; }

.input, .select, .textarea {
  display: block;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--g500);
  background: var(--g700);
  color: #fff;
  padding: 8px 12px;
  /* 16px on phones: anything smaller makes iOS Safari zoom the page in when
     the field is focused, and it never zooms back out. Seerr does the same,
     dropping to 14px only from the sm breakpoint up. */
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: inherit;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  outline: none;
}
@media (min-width: 640px) {
  .input, .select, .textarea { font-size: .875rem; line-height: 1.25rem; }
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--indigo-500);
  box-shadow: 0 0 0 1px var(--indigo-500);
}
.textarea { min-height: 84px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 32px;
}

.check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  color: var(--g300);
  font-size: .9rem;
}
.check input[type='checkbox'] {
  appearance: none;
  width: 24px; height: 24px;
  flex: none;
  border-radius: 6px;
  border: 1px solid var(--g500);
  background: var(--g700);
  margin: 0;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.check input[type='checkbox']:checked {
  background-color: var(--indigo-600);
  border-color: var(--indigo-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-size: 100%;
}
.check > span { display: block; }
.check strong { display: block; color: var(--g200); font-weight: 600; }
.check span span { display: block; color: var(--g500); font-size: .8rem; }

.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 140px; }

.alert {
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .875rem;
  font-weight: 500;
}
.alert--error { background: var(--red-600); color: #fecaca; }
.alert--ok {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(34, 197, 94, .15);
  border: 1px solid var(--green-500);
  color: #bbf7d0;
}
.alert--ok svg { width: 20px; height: 20px; flex: none; }
.alert--info {
  background: rgba(99, 102, 241, .2);
  border: 1px solid var(--indigo-500);
  color: var(--g200);
}

.actions {
  margin-top: 32px;
  border-top: 1px solid var(--g700);
  padding-top: 20px;
  display: flex;
  gap: 10px;
}

/* ==========================================================
   Section / view scaffolding
   ========================================================== */

.view { animation: fadein .2s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.page-title + .view__head { margin-top: 16px; }

.view__head {
  margin-top: 24px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.empty {
  border: 1px dashed var(--g700);
  border-radius: 12px;
  padding: 48px 20px;
  text-align: center;
  color: var(--g400);
  margin-top: 8px;
}
.empty h3 { margin: 0 0 6px; color: var(--g300); font-size: 1.05rem; }
.empty p { margin: 0 0 18px; font-size: .9rem; }

.dim { color: var(--g400); }
.mono { font-variant-numeric: tabular-nums; }

.linkbtn {
  background: none;
  border: none;
  color: var(--indigo-400);
  font-size: .85rem;
  font-family: inherit;
  padding: 0;
  margin-top: 6px;
}
.linkbtn:hover { color: var(--indigo-500); text-decoration: underline; }

/* Segmented filters (requests page) */
.segmented {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--g600);
  background: var(--g800);
}
.segmented button {
  border: none;
  background: transparent;
  color: var(--g300);
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s;
  border-right: 1px solid var(--g700);
}
.segmented button:last-child { border-right: none; }
.segmented button:hover { color: #fff; background: var(--g700); }
.segmented button[aria-pressed='true'] {
  color: #fff;
  background: linear-gradient(to bottom right, var(--indigo-600), var(--purple-600));
}
.segmented .n {
  background: rgba(17, 24, 39, .4);
  border-radius: 9999px;
  font-size: .72rem;
  padding: 0 7px;
  line-height: 1.2rem;
}

/* ==========================================================
   Request cards (Seerr RequestItem)
   ========================================================== */

.reqs { display: flex; flex-direction: column; gap: 16px; }

.req {
  position: relative;
  display: flex;
  gap: 16px;
  border-radius: 12px;
  background-color: var(--g800);
  box-shadow: 0 0 0 1px var(--g700);
  padding: 16px;
  overflow: hidden;
}
.req__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: .1;
  pointer-events: none;
}
.req > *:not(.req__backdrop) { position: relative; z-index: 1; }

.req__art {
  width: 80px;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.4);
  background: var(--g700);
  cursor: pointer;
  align-self: flex-start;
}
.req__art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 768px) { .req__art { width: 96px; } }

.req__body { flex: 1; min-width: 0; }
.req__title {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.req__title:hover { text-decoration: underline; }
.req__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 4px;
  font-size: .85rem;
  color: var(--g300);
}
.req__meta .who { display: inline-flex; align-items: center; gap: 6px; }
.req__meta .who .avatar { width: 20px; height: 20px; font-size: .55rem; }
.card-field-name { font-weight: 700; color: var(--g300); margin-right: -4px; }
.req__note {
  margin: 8px 0 0;
  font-size: .85rem;
  color: var(--g400);
  border-left: 2px solid var(--g600);
  padding-left: 10px;
}
.req__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: none;
}
@media (max-width: 640px) {
  .req { flex-wrap: wrap; }
  .req__actions { flex-direction: row; width: 100%; }
}

/* Requests page filters, sat opposite the sort control. */
.reqfilters { display: flex; gap: 10px; flex-wrap: wrap; }
.reqfilters .select { width: auto; min-width: 150px; }

/* Sort control: direction toggle glued to a field picker (Seerr UserList). */
.sortbar { display: flex; align-items: stretch; }
.sortbar__dir {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--g500);
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: var(--g800);
  color: var(--g100);
  padding: 0 12px;
}
.sortbar__dir:hover { background: var(--g700); }
.sortbar__dir svg { width: 24px; height: 24px; }
.sortbar select {
  border-radius: 0 6px 6px 0;
  width: auto;
  min-width: 170px;
}

/* ==========================================================
   Tables (users page)
   ========================================================== */

.tablewrap {
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: 0 0 0 1px var(--g700);
  background: rgba(31, 41, 55, .5);
}
.table { width: 100%; border-collapse: collapse; min-width: 720px; }
.table thead th {
  background: rgba(55, 65, 81, .5);
  color: var(--g300);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
  font-weight: 500;
  text-align: left;
  padding: 12px 16px;
  white-space: nowrap;
}
.table thead th[data-sort] { cursor: pointer; }
.table thead th[data-sort]:hover { color: #fff; }
.table thead th .th-inner { display: flex; align-items: center; gap: 4px; }
.table thead th svg { width: 16px; height: 16px; }
.table tbody td {
  padding: 12px 16px;
  border-top: 1px solid var(--g700);
  font-size: .875rem;
  color: var(--g300);
  vertical-align: middle;
}
.table .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.table .who > div > div:first-child { color: #fff; font-weight: 600; }

/* ==========================================================
   Modal (book detail, dialogs)
   ========================================================== */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(17, 24, 39, .7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.panel {
  position: fixed;
  z-index: 51;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  /* dvh tracks the shrinking viewport as mobile browser chrome hides; with
     vh alone the panel is taller than the screen and its header (with the
     close button) sits above the top edge, unreachable. */
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--g800);
  box-shadow: 0 0 0 1px var(--g700), 0 25px 50px -12px rgba(0,0,0,.6);
  overflow: hidden;
}
.panel--center { width: min(480px, calc(100vw - 24px)); }

/* On phones a long panel becomes a full-screen sheet, so the close button is
   always pinned to the top of the screen no matter how many books it holds. */
@media (max-width: 639px) {
  .panel, .panel--center {
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .panel__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--g800);
    padding-top: calc(14px + env(safe-area-inset-top));
  }
  .panel__body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--g700);
}
.panel__head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: #fff; }

.iconbtn {
  border: none;
  background: transparent;
  color: var(--g400);
  display: flex;
  padding: 4px;
  border-radius: 6px;
}
.iconbtn:hover { color: #fff; background: var(--g700); }
.iconbtn svg { width: 20px; height: 20px; }

.panel__body { padding: 20px; overflow-y: auto; }
.panel__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--g700);
  background: rgba(17, 24, 39, .4);
}

/* Book detail inside the modal (Seerr media page vocabulary) */
.detail__top { display: flex; gap: 20px; margin-bottom: 18px; }
.detail__art {
  width: 128px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--g700);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.5);
  align-self: flex-start;
}
.detail__art img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.detail__title { margin: 0 0 2px; font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1.25; }
.detail__sub { margin: 0 0 6px; color: var(--g300); font-style: italic; }

.blurb { color: var(--g400); font-size: .9rem; line-height: 1.6; white-space: pre-line; margin: 14px 0 0; }
.blurb--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.facts {
  margin: 16px 0 0;
  border-radius: 8px;
  border: 1px solid var(--g700);
  background: var(--g900);
  font-size: .875rem;
  overflow: hidden;
}
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--g700);
}
.facts > div:last-child { border-bottom: none; }
.facts dt { font-weight: 700; color: var(--g300); margin: 0; flex: none; }
.facts dd { margin: 0; color: var(--g400); text-align: right; }

/* ==========================================================
   Auth (login/setup) — Seerr login page
   ========================================================== */

/* Seerr: py-14 (56px), no horizontal padding on the page itself. */
.auth {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 0;
  background: var(--g900);
  overflow: hidden;
}

/* Mosaic of covers behind the sign-in card: shown near their native size
   rather than one cover stretched across the screen. */
.auth__fader {
  position: absolute;
  inset: -40px;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: 1fr;
  gap: 6px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
@media (min-width: 768px) {
  .auth__fader { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
.auth__fader.is-loaded { opacity: .55; }

.auth__fader i {
  display: block;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
}

/* Darkens the mosaic towards the bottom so the card always stays readable. */
.auth::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(17, 24, 39, .22) 0%, rgba(17, 24, 39, .72) 78%),
    linear-gradient(to bottom, rgba(17, 24, 39, .1) 0%, rgba(17, 24, 39, .8) 100%);
  pointer-events: none;
}

/* Seerr: logo block mt-10, h-48, max-w-md; card mt-8, bg-gray-800/50 with a
   5px blur and px-10 py-8 body. */
.auth__logo {
  position: relative;
  z-index: 40;
  margin-top: 40px;
  width: 100%;
  max-width: 448px;
  padding: 0 16px;
  display: flex;
  justify-content: center;
}
.auth__logo img { height: 192px; max-width: 100%; object-fit: contain; }

.auth__wrap {
  position: relative;
  z-index: 50;
  margin-top: 32px;
  width: 100%;
  max-width: 448px;
}

.auth__card {
  border-radius: 8px;
  background: rgba(31, 41, 55, .5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.3), 0 1px 2px -1px rgba(0,0,0,.3);
  overflow: hidden;
}

.auth__banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  border-radius: 6px;
  background: var(--red-600);
  padding: 16px;
}
.auth__banner[hidden] { display: none; }
.auth__banner svg { width: 20px; height: 20px; color: var(--red-300); flex: none; }
.auth__banner h3 { margin: 0; font-size: .875rem; font-weight: 500; color: var(--red-300); }

.auth__body { padding: 32px 40px; }

.auth__heading {
  margin: -4px 0 24px;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: #e5e5e5;
}

/* Seerr's fields carry no labels — just placeholders on a lighter input. */
.auth__field { margin: 4px 0 16px; }
.auth__field .input {
  background: rgba(55, 65, 81, .8);
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
}
.auth__field .input::placeholder { color: var(--g400); }

.auth__submit { margin-top: 8px; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); }

/* ==========================================================
   Toasts
   ========================================================== */

.toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
}
.toast {
  border-radius: 6px;
  background: var(--g800);
  box-shadow: 0 0 0 1px var(--g700), 0 10px 15px -3px rgba(0,0,0,.5);
  color: var(--g200);
  padding: 12px 16px;
  font-size: .875rem;
  border-left: 4px solid var(--g600);
  animation: toastin .25s ease-out;
}
.toast--ok { border-left-color: var(--green-500); }
.toast--error { border-left-color: var(--red-500); }
@keyframes toastin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ==========================================================
   Skeletons
   ========================================================== */

.skeleton {
  background: var(--g800);
  border-radius: 12px;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.skeleton--card { width: 144px; }
@media (min-width: 768px) { .skeleton--card { width: 176px; } }
.skeleton--card::before { content: ''; display: block; padding-bottom: 100%; }
.cards-vertical .skeleton--card, .grid .skeleton--card { width: 100%; }
.skeleton--line { height: 12px; margin-top: 8px; border-radius: 4px; }
.skeleton--line.short { width: 60%; }

/* Legacy grid alias (search results) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
  gap: 16px;
  padding: 12px 4px;
  margin: -12px -4px 0;
}

.loadmore { display: flex; justify-content: center; margin-top: 24px; }