/* library-grid.css: the Asset Library component (scripts/library-grid.js), scoped to its
   root (.libgrid) so a page's own .lib-* classes (the landing reel) are untouched. Uses the site
   tokens (styles/site.css); the landing page maps its own tokens onto them (.libx). */
.libgrid .lib-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; overflow-x: auto; }
.libgrid .lib-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted);
  font-size: 14px; font-weight: 600; padding: 10px 14px; cursor: pointer; white-space: nowrap; }
.libgrid .lib-tab:hover:not(:disabled) { color: var(--text); background: none; }
.libgrid .lib-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.libgrid .lib-tab:disabled { opacity: .4; cursor: default; }

.libgrid .lib-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.libgrid .lib-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 9px; padding: 0 12px; }
.libgrid .lib-search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 14px; padding: 10px 0; }
.libgrid .lib-search .ico { color: var(--text-muted); }
.libgrid .lib-count { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

.libgrid .lib-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: thin; }
.libgrid .lib-chip { flex: 0 0 auto; background: var(--control-bg); border: 1px solid var(--control-border); color: var(--text-2);
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s; }
.libgrid .lib-chip:hover:not(.active) { border-color: var(--accent); color: var(--accent-ink); background: var(--control-bg); }
/* Solid gold, near-black label: a gold-on-gold selected chip is barely readable. */
.libgrid .lib-chip.active, .libgrid .lib-chip.active:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.libgrid .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.libgrid .lib-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden;
  cursor: pointer; transition: transform .12s, box-shadow .12s, border-color .12s; display: flex; flex-direction: column; }
.libgrid .lib-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); border-color: var(--accent); }
.libgrid .lib-thumb-wrap { position: relative; aspect-ratio: 3 / 4; background: var(--control-bg); }
.libgrid .lib-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.libgrid .lib-name { font-size: 13px; font-weight: 600; color: var(--text); padding: 10px 12px 12px; line-height: 1.3; }
.libgrid .lib-3d { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  color: var(--on-accent); background: var(--accent); padding: 2px 7px; border-radius: 5px; }
/* Coming soon tabs: browsed like the rest; a click shows the note below. Placeholder
   cards (a tab with nothing yet) stay grey. */
.libgrid .lib-card.soon:has(.lib-soon) .lib-thumb { filter: grayscale(1); opacity: .7; }
.libgrid { position: relative; }
.libgrid .lib-note { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 50; background: rgba(10,10,14,.9); color: #fff;
  font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.3); pointer-events: none; }
.libgrid .lib-note[hidden] { display: none; }
.libgrid .lib-soon { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.62); padding: 3px 8px; border-radius: 5px; }
.libgrid .lib-more { display: flex; justify-content: center; margin-top: 22px; }
.libgrid .lib-more[hidden] { display: none; }
.libgrid .lib-more-btn { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 10px; padding: 11px 26px;
  font-size: 14px; font-weight: 700; cursor: pointer; }
.libgrid .lib-more-btn:hover { filter: brightness(1.06); background: var(--accent); color: var(--on-accent); }
.libgrid .lib-empty { grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 60px 0; font-size: 14px; }

/* 3D preview pop-up (scripts/outfit-preview.js) */
.op-backdrop { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 16px; }
.op-backdrop.open { display: flex; }
.op-panel { width: min(460px, 100%); height: min(620px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; overflow: hidden; box-shadow: var(--card-shadow); }
.op-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--card-border); }
.op-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.op-close { background: transparent; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.op-close:hover { color: var(--text); background: transparent; }
.op-stage { position: relative; flex: 1; min-height: 0; }
.op-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.op-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.op-hint { padding: 8px 14px 12px; font-size: 12px; color: var(--text-muted); text-align: center; }