.sm-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 639.98px) {
  .sm-book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.sm-book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  background: var(--sm-surface, #fff);
  color: var(--sm-ink, #111512);
  border: 1px solid var(--sm-line, #e7e4dc);
  border-radius: 12px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.sm-book-card:hover,
.sm-book-card:focus-within {
  box-shadow: var(--sm-shadow-card);
  border-color: color-mix(in srgb, var(--sm-ink, #111512) 18%, var(--sm-line, #e7e4dc));
}
.sm-book-card .sm-book-card-cover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border-radius: 11px 11px 0 0;
  background: var(--sm-panel, #f1ede4);
}
.sm-book-card .sm-book-card-cover > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}
.sm-book-card .sm-book-card-cover > img.sm-book-card-img-alt { opacity: 0; transition: opacity .2s ease; }
.sm-book-card:hover .sm-book-card-cover > img.sm-book-card-img-alt,
.sm-book-card:focus-within .sm-book-card-cover > img.sm-book-card-img-alt { opacity: 1; }
.sm-book-card[data-format="coloring"] .sm-book-card-cover { background: var(--sm-paper, #faf8f3); }
.sm-book-card[data-format="coloring"] .sm-book-card-cover > img:not(.sm-book-card-img-alt) {
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  background: var(--sm-surface, #fff);
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--sm-line, #e7e4dc);
}
.sm-book-card-status {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 16px);
  padding: 3px 9px 3px 7px;
  border-radius: var(--sm-r-pill, 999px);
  background: var(--sm-surface, #fff);
  color: var(--sm-ink, #111512);
  box-shadow: 0 0 0 1px var(--sm-line, #e7e4dc);
  font: 600 12px/1.35 var(--sm-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  white-space: normal;
  line-height: 1.25;
  overflow: hidden;
  pointer-events: none;
}
.sm-book-card-status::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sm-gold, #d9a441);
}
.sm-book-card[data-status="done"] .sm-book-card-status::before { background: var(--sm-accent, #145c32); }
.sm-book-card[data-status="failed"] .sm-book-card-status::before { background: var(--sm-crayon-1, #ef4444); }
.sm-book-card[data-status="running"] .sm-book-card-status::before,
.sm-book-card[data-status="queued"] .sm-book-card-status::before { animation: sm-book-card-pulse 1.4s ease-in-out infinite; }
.sm-book-card[data-status="failed"] .sm-book-card-cover > img { filter: grayscale(1); opacity: .55; }
.sm-book-card .sm-book-card-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--sm-muted, #5f6f64);
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--sm-mint, #b6f0c8) 55%, transparent) 0 22%, transparent 23%),
    var(--sm-panel, #f1ede4);
}
.sm-book-card .sm-book-card-placeholder svg { width: 40px; height: 40px; opacity: .75; }
.sm-book-card[data-format="coloring"] .sm-book-card-placeholder { color: var(--sm-accent, #145c32); }
.sm-book-card[data-status="failed"] .sm-book-card-placeholder { background: var(--sm-panel, #f1ede4); }
.sm-book-card[data-status="failed"] .sm-book-card-status { white-space: normal; line-height: 1.25; }
.sm-book-card.is-leaving { opacity: 0; transform: scale(.96); transition: opacity .2s ease, transform .2s ease; }
.sm-book-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 12px 14px;
}
.sm-book-card-title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--sm-ink, #111512);
  font: 500 13.5px/1.3 var(--sm-font-display, "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif);
  letter-spacing: -.005em;
  overflow-wrap: anywhere;
}
.sm-book-card-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}
.sm-book-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
}
.sm-book-card-link:focus { outline: none; }
.sm-book-card-link:focus-visible::after { outline: 2px solid var(--sm-accent, #145c32); outline-offset: 2px; }
.sm-book-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  margin: 0;
  color: var(--sm-muted, #5f6f64);
  font: 400 13px/1.3 var(--sm-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.sm-book-card-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--sm-panel, #f1ede4);
  color: var(--sm-ink-2, #4a524c);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
}
.sm-book-card[data-format="coloring"] .sm-book-card-badge { background: var(--sm-mint-soft, #e6f3e9); color: var(--sm-accent-ink, #0e3d1f); }
.sm-book-card-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-book-card-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 12px 12px;
}
.sm-book-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--sm-line, #e7e4dc);
  border-radius: 8px;
  background: var(--sm-surface, #fff);
  color: var(--sm-ink, #111512);
  font: 600 13px/1 var(--sm-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  text-decoration: none;
  cursor: pointer;
}
.sm-book-card-action:hover { border-color: var(--sm-accent, #145c32); color: var(--sm-accent, #145c32); }
.sm-book-card-action:focus-visible { outline: 2px solid var(--sm-accent, #145c32); outline-offset: 2px; }
.sm-book-card.is-skeleton { pointer-events: none; }
.sm-book-card.is-skeleton:hover { transform: none; box-shadow: none; border-color: var(--sm-line, #e7e4dc); }
.sm-book-card.is-skeleton .sm-book-card-cover,
.sm-book-card-skeleton-line {
  background: linear-gradient(90deg, var(--sm-panel, #f1ede4) 0%, var(--sm-paper, #faf8f3) 50%, var(--sm-panel, #f1ede4) 100%);
  background-size: 200% 100%;
  animation: sm-book-card-shimmer 1.2s linear infinite;
}
.sm-book-card-skeleton-line { display: block; height: 12px; border-radius: 6px; }
.sm-book-card-skeleton-line.is-short { width: 55%; }
@keyframes sm-book-card-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes sm-book-card-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .sm-book-card, .sm-book-card .sm-book-card-cover > img.sm-book-card-img-alt { transition: none; }
  .sm-book-card:hover, .sm-book-card:focus-within { transform: none; }
  .sm-book-card.is-skeleton .sm-book-card-cover, .sm-book-card-skeleton-line,
  .sm-book-card-status::before { animation: none !important; }
}
.sm-book-card {
  border-color: color-mix(in srgb, var(--sm-line, #e7e4dc) 85%, transparent);
  border-radius: 16px;
  box-shadow: var(--sm-shadow-sm);
  transition: transform .28s var(--sm-ease), box-shadow .28s var(--sm-ease), border-color .2s ease;
}
.sm-book-card:hover,
.sm-book-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--sm-shadow-lift);
  border-color: color-mix(in srgb, var(--sm-accent, #145c32) 22%, var(--sm-line, #e7e4dc));
}
.sm-book-card .sm-book-card-cover { border-radius: 15px 15px 0 0; }
.sm-book-card .sm-book-card-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--sm-line, #e7e4dc) 80%, transparent);
}
.sm-book-card .sm-book-card-cover > img:not(.sm-book-card-img-alt) { transition: transform .6s var(--sm-ease); }
.sm-book-card:hover .sm-book-card-cover > img:not(.sm-book-card-img-alt) { transform: scale(1.035); }
.sm-book-card-link::after { border-radius: 16px; }
.sm-book-card-status {
  background: color-mix(in srgb, var(--sm-surface, #fff) 88%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--sm-shadow-xs), 0 0 0 1px color-mix(in srgb, var(--sm-line, #e7e4dc) 80%, transparent);
  z-index: 2;
}
.sm-book-card-title { letter-spacing: var(--sm-track-tight); }
.sm-book-card-action { border-color: var(--sm-line-strong); box-shadow: var(--sm-shadow-xs); transition: border-color var(--sm-dur) ease, color var(--sm-dur) ease, background-color var(--sm-dur) ease; }
.sm-book-card-action:hover { background: var(--sm-tint); }
.sm-book-card.is-skeleton:hover { box-shadow: var(--sm-shadow-xs); }
@media (prefers-reduced-motion: reduce) {
  .sm-book-card, .sm-book-card .sm-book-card-cover > img:not(.sm-book-card-img-alt) { transition: none; }
  .sm-book-card:hover .sm-book-card-cover > img:not(.sm-book-card-img-alt) { transform: none; }
}
.sm-book-card-action.is-primary {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
  border-color: var(--sm-accent, #145c32);
  background: var(--sm-accent, #145c32);
  color: var(--sm-on-accent, #fff);
  font-size: 14px;
}
.sm-book-card-action.is-primary:hover { border-color: var(--sm-accent-ink, #0e3d1f); background: var(--sm-accent-ink, #0e3d1f); color: var(--sm-on-accent, #fff); }
.sm-book-card-skeleton-line.is-action { flex: 1 1 auto; height: 44px; border-radius: 8px; }
.sm-book-card:not([data-format="coloring"]):not(.is-skeleton) .sm-book-card-cover,
.sm-book-card:not([data-format="coloring"]):not(.is-skeleton) .sm-book-card-cover:has(> img:not(.sm-book-card-img-alt):not([hidden])[src]) > .sm-book-card-placeholder {
  background: linear-gradient(180deg, var(--sm-paper, #faf8f3), var(--sm-panel, #f1ede4));
}
.sm-book-card:not([data-format="coloring"]):not(.is-skeleton) .sm-book-card-cover:has(> img:not(.sm-book-card-img-alt):not([hidden])[src]) > .sm-book-card-placeholder svg { visibility: hidden; }
.sm-book-card:not([data-format="coloring"]):not(.is-skeleton) .sm-book-card-cover > img:not(.sm-book-card-img-alt) {
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  object-position: 50% 50%;
  filter: drop-shadow(0 6px 9px color-mix(in srgb, black 24%, transparent)) drop-shadow(0 1px 2px color-mix(in srgb, black 14%, transparent));
}
.sm-book-card[data-status="failed"]:not([data-format="coloring"]) .sm-book-card-cover > img:not(.sm-book-card-img-alt) { filter: grayscale(1); }