.bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 14px; }
.bar input, .bar select { padding:8px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font:inherit; }
.bar input { flex:1 1 260px; }
.count { color:var(--muted); font-size:13px; }
table.an { border-collapse:collapse; width:100%; font-size:14px; }
table.an th, table.an td { padding:6px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
table.an th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
table.an td.id { font-weight:700; }
table.an button, .ac button.cp { padding:3px 8px; border-radius:6px; border:1px solid var(--line); background:var(--bg); color:var(--text); cursor:pointer; font:inherit; font-size:12px; white-space:nowrap; }
.anwrap { overflow-x:auto; }
/* the animations: one card each */
.agrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; }
/* the card size, as the objects and skins pages (owner, 2026-10-29: "like the other pages ... stay consistent") */
.agrid.medium { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
.agrid.medium .links { display:none; }
.agrid.small { grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); gap:8px; }
.agrid.small .ac { padding:6px; } .agrid.small .desc, .agrid.small .links { display:none; } .agrid.small .ac button.cp { font-size:11px; padding:2px 5px; }
.agrid.tiny { grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); gap:5px; }
.agrid.tiny .ac { padding:4px; border-radius:8px; } .agrid.tiny .desc, .agrid.tiny .links, .agrid.tiny .btns, .agrid.tiny .lib, .agrid.tiny code { display:none; }
@media (max-width: 600px) { .agrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } .agrid.medium { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .agrid.small { grid-template-columns:repeat(4, minmax(0, 1fr)); } .agrid.tiny { grid-template-columns:repeat(5, minmax(0, 1fr)); } }
.ac { display:flex; flex-direction:column; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; min-width:0; }
.ac[hidden] { display:none; }
.ac .pv { aspect-ratio:1; border-radius:8px; background:radial-gradient(circle at 50% 40%, #3a3050, #241e33 70%); overflow:hidden; position:relative; }
.ac { cursor:pointer; }
.ac .pv button.play { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer; }
.ac .pv img { width:100%; height:100%; display:block; object-fit:contain; }
.ac .pv button.play::after { content:'\25B6'; position:absolute; right:7px; bottom:5px; font-size:14px; color:#fff; text-shadow:0 0 3px #000; }
.ac .pv button.play.on::after { content:none; }      /* playing by itself: no pause sign (a click opens the quick view) */
.ac .pv .none { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; color:var(--muted); font-size:12px; }
.ac .top { display:flex; justify-content:space-between; align-items:baseline; gap:6px; margin-top:4px; }
.ac .id { font-weight:700; }
.ac .lib { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ac code { font-size:13px; overflow-wrap:anywhere; }
.ac .desc { color:var(--muted); font-size:13px; line-height:1.4; }
.ac .links { font-size:12px; color:var(--muted); line-height:1.4; overflow-wrap:anywhere; }
.ac .links a { color:var(--accent2); text-decoration:none; }
.loop { color:#7fd4a0; }
.hovercard { position:fixed; z-index:60; width:220px; background:var(--panel); border:1px solid var(--accent2); border-radius:12px; padding:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.55); pointer-events:none; }
.hovercard .pv { aspect-ratio:1; border-radius:8px; background:radial-gradient(circle at 50% 40%, #3a3050, #241e33 70%); overflow:hidden; }
.hovercard .pv img { width:100%; height:100%; display:block; object-fit:contain; }
.hovercard .none { display:flex; height:100%; align-items:center; justify-content:center; color:var(--muted); font-size:12px; text-align:center; padding:8px; }
.hovercard b { display:block; margin-top:6px; font-size:14px; overflow-wrap:anywhere; }
.hovercard small { color:var(--muted); font-size:12px; line-height:1.35; display:block; }
.ac .btns { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:4px; }