/* Shared by the Progress (graph icon) and Library (profile icon) pages —
   both sit behind a top Progress|Library toggle. */
.stats-screen { background: var(--color-white); }

/* The Progress page's own styles lived here. It was redesigned as Records and now
   loads report.css instead, so only the toggle above and the Library block below
   remain in this file. */
/* ── Library page ──────────────────────────────────────────────────────── */
/* Opened from the calendar icon in the Records header; the only chrome is the way
   back there. */
.lib-appbar { display: flex; align-items: center; height: 66px; padding: 0 16px; box-sizing: border-box; }
.lib-appbar .icon-btn { background: none; border: none; padding: 0; display: block; cursor: pointer; }
/* appbar-back.svg is stroked white for the dark hero screens — on this light panel it
   would be invisible, so flatten it to black. */
.lib-appbar img { width: 24px; height: 24px; display: block; filter: brightness(0); }
.lib-screen { background: var(--color-neutral-100); }
/* Status bar matches the gray frame (frame color as backdrop + multiply-blend
   the status-bar SVG so its baked white rect dissolves into the gray). */
.lib-screen .status-bar { background: var(--color-neutral-100); }
.lib-screen .statusbar-svg { mix-blend-mode: multiply; }
.lib-filter {
  position: sticky;
  top: 44px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-neutral-100);
  overflow-x: auto;
}
.lib-filter::-webkit-scrollbar { display: none; }
.lib-filter .filter-ic {
  flex: none;
  width: 36px; height: 36px;
  border: none; padding: 0; cursor: pointer;
  border-radius: 80px;
  background: #fff;
  box-shadow: 0 0 5px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center;
}
.lib-filter .filter-ic img { width: 20px; height: 20px; }
/* Search magnifier: same 36px as the filter icon; fills red when active */
.lib-filter #libSearchBtn.on { background: linear-gradient(180deg, #FA3030 54%, #FE6E3C 90%, #FEC389 110%); }
.lib-filter #libSearchBtn.on img { filter: brightness(0) invert(1); }
.lib-searchbar { padding: 0 16px 8px; background: var(--color-neutral-100); }
.lib-searchbar input {
  width: 100%; height: 40px; box-sizing: border-box;
  border: none; border-radius: 12px; background: #fff;
  padding: 0 16px; font-family: var(--font-supreme); font-size: 14px; letter-spacing: -0.4px;
  color: var(--color-neutral-900); box-shadow: 0 0 5px rgba(0,0,0,0.06);
}
.chip {
  flex: none;
  padding: 6px 14px;
  border-radius: 80px;
  border: none;
  background: #fff;
  color: var(--color-neutral-600);
  font-family: var(--font-supreme);
  font-size: 14px;
  letter-spacing: -0.42px;
  white-space: nowrap;
  box-shadow: 0 0 2px rgba(0,0,0,0.1);
  cursor: pointer;
}
.chip.active {
  background: linear-gradient(180deg, #FA3030 54%, #FE6E3C 90%, #FEC389 110%);
  color: #fff;
  font-family: var(--font-supreme-medium);
}

/* Sections 16 apart (list gap); date + cards inside a section 8 apart (group gap). */
.lib-list { display: flex; flex-direction: column; gap: 16px; padding: 8px 16px 16px; }
.lib-group { display: flex; flex-direction: column; gap: 8px; }
.lib-group.hidden { display: none; }
.lib-date { margin: 0; }

/* "차라락" slide-in when the Library opens (staggered per card via JS animation-delay) */
.lib-card { margin-bottom: 0; animation: lib-slide .42s cubic-bezier(.2,.85,.3,1) both; }
@keyframes lib-slide { from { opacity: 0; transform: translateY(18px); } }
.lib-date { margin: 0; padding: 0 8px; font-family: var(--font-supreme); font-size: 13px; letter-spacing: -0.5px; color: var(--color-neutral-500); }
/* Card (node 151:4573): white, r20, p16, gap4; sport+kebab row, then title (left,
   bottom-aligned) vs Match Rate + % (right, bottom-aligned). */
/* Card fixed 105px; title (biggest type) TOP-aligned with the Match Rate block. */
.lib-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 105px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.lib-card.hidden { display: none; }
.lib-card .lib-top { display: flex; align-items: flex-start; justify-content: space-between; }
.lib-card .lib-sport { margin: 0; font-family: var(--font-supreme); font-size: 13px; line-height: 1.2; letter-spacing: -0.5px; color: #3B3B3B; }
.lib-card .lib-kebab { display: flex; align-items: center; gap: 3px; height: 20px; }
.lib-card .lib-kebab i { width: 4px; height: 4px; border-radius: 50%; background: var(--color-neutral-400); }
.lib-card .lib-body { flex: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lib-card .lib-title { flex: 1; min-width: 0; max-width: 145px; margin: 0; align-self: flex-start; font-family: var(--font-supreme-bold); font-size: 20px; line-height: 1.2; letter-spacing: -1px; color: #141A1A; }
.lib-card .lib-rate { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 8px; }
.lib-card .lib-rate .rate-label { margin: 0; font-family: var(--font-supreme); font-size: 12px; line-height: 1.2; letter-spacing: -0.5px; color: #A3A3A3; }
.lib-card .lib-rate .rate-pct { font-family: var(--font-offbit); font-weight: 700; font-size: 38px; line-height: 1; color: #050A0A; }
.lib-card .lib-rate .rate-pct .u { font-size: 15px; }