:root {
  --bg: #14161a;
  --surface: #1d2026;
  --surface-2: #262a32;
  --line: #333843;
  --text: #e8eaee;
  --muted: #949cab;
  --accent: #7aa2f7;
  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- header ---------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px 20px;
  background: rgba(20, 22, 26, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  text-decoration: none;
  margin-right: 4px;
}

header input, header select {
  height: 34px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
}

header input {
  flex: 1 1 260px;
  min-width: 0;
}

header input:focus, header select:focus {
  outline: none;
  border-color: var(--accent);
}

header select { max-width: 190px; min-width: 0; cursor: pointer; }

.filters {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

/* --- grid ------------------------------------------------------------ */

main { padding: 20px; }

.count { margin: 0 0 14px; color: var(--muted); font-size: 13px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 22px 18px;
}

.tile {
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
}

.tile .art {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  transition: transform .12s ease, box-shadow .12s ease;
}

.tile:hover .art, .tile:focus-visible .art {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
}

.tile:focus-visible { outline: none; }
.tile:focus-visible .art { outline: 2px solid var(--accent); outline-offset: 2px; }

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Shown for books whose asset carried no cover image. */
.art .fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
}

.fallback .ft { font-size: 14px; font-weight: 600; line-height: 1.3; }
.fallback .fa { font-size: 12px; color: var(--muted); }

.badges {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
}

.badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(0, 0, 0, .72);
  color: #fff;
}

.tile .t {
  margin: 8px 0 2px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tile .a {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty { color: var(--muted); padding: 40px 0; text-align: center; }

/* --- detail ---------------------------------------------------------- */

.detail {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* display:grid above would otherwise beat the hidden attribute. */
.detail[hidden] { display: none; }

.detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .68);
}

.detail-card {
  position: relative;
  width: min(860px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.close:hover { color: var(--text); }

.detail-top { display: flex; gap: 24px; }
.detail-cover { flex: 0 0 180px; }

.detail-cover .art {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}

.detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.detail-meta { flex: 1; min-width: 0; }
.detail-meta h1 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
.detail-meta .by { margin: 0 0 12px; color: var(--muted); }
.detail-meta .by a, .series-line a { color: var(--accent); text-decoration: none; }
.detail-meta .by a:hover, .series-line a:hover { text-decoration: underline; }
.series-line { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.facts { margin: 0 0 16px; font-size: 13px; color: var(--muted); }

.downloads { display: flex; flex-wrap: wrap; gap: 10px; }

.dl {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #10131a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.dl:hover { filter: brightness(1.08); }
.dl small { font-weight: 500; opacity: .78; font-size: 11px; }

.desc {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: #c3c9d4;
  max-height: 260px;
  overflow-y: auto;
}

.desc p { margin: 0 0 10px; }
.desc h3 { font-size: 14px; margin: 0 0 8px; }

.siblings { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.siblings h2 { margin: 0 0 12px; font-size: 13px; color: var(--muted); font-weight: 600; }

.strip { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.strip .tile { flex: 0 0 92px; }
.strip .tile .t { font-size: 11px; -webkit-line-clamp: 2; }
.strip .tile.current .art { outline: 2px solid var(--accent); outline-offset: 2px; }
.strip .fallback { padding: 8px; }
.strip .fallback .ft { font-size: 11px; }
.strip .fallback .fa { display: none; }

/* --- account & sign-in ------------------------------------------------ */

.account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.whoami { color: var(--muted); font-size: 13px; }

.signout {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px;
}

.signout:hover { color: var(--text); background: var(--surface-2); }

.login {
  max-width: 340px;
  margin: 18vh auto 0;
  padding: 0 20px;
  text-align: center;
}

.login-brand { font-size: 28px; margin: 0 0 8px; display: block; }
.login-sub { color: var(--muted); margin: 0 0 28px; }

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.google-btn:hover { background: var(--surface-2); border-color: var(--accent); }

.login-error {
  margin-top: 18px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid #e06c75;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 13px;
  text-align: left;
}

@media (max-width: 620px) {
  header { padding: 10px 14px; gap: 8px; }

  /* The filter row already wraps; let the account chip ride along with it rather
     than squeezing the search field. */
  .account { margin-left: 0; }

  /* 16px keeps iOS Safari from zooming the page in when the field is focused. */
  header input { flex: 1 1 auto; font-size: 16px; }

  /* Five selects can't fit a phone's width and stacking them would eat the
     screen, so they become one swipeable row. */
  .filters {
    flex: 1 1 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .filters::-webkit-scrollbar { display: none; }

  /* A select is as wide as its longest option, and the series names are long
     enough to fill the row on their own. Capping them keeps the next filter
     peeking in from the edge, which is what shows the row can be swiped. */
  header select { flex: 0 0 auto; width: 44vw; max-width: none; }

  main { padding: 16px 14px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 18px 14px; }

  /* Full-bleed sheet: a centred card wastes too much of a small screen. */
  .detail { padding: 0; }

  .detail-card {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: none;
    border-radius: 0;
    padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  }

  .detail-top { flex-direction: column; }
  .detail-cover { flex: 0 0 auto; width: 132px; }
  .detail-meta h1 { font-size: 20px; padding-right: 34px; }
  .desc { max-height: none; }
  .downloads .dl { flex: 1 1 100%; }
}