.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#collection-panel { width:min(840px,92vw); max-height:86svh; border:1px solid #fcf7e9; border-radius:22px; padding:25px 28px 0; color:var(--ink); background:#f2efe5; box-shadow:0 28px 100px #283d3540; }
#collection-panel::backdrop { background:#34443d45; backdrop-filter:blur(7px); }
#collection-panel[open] { display:flex; flex-direction:column; height:min(820px,86svh); overflow:hidden; }
.collection-head,.collection-toolbar,#collection-result,.collection-footer { flex-shrink:0; }
.collection-head { display:flex; align-items:center; justify-content:space-between; }
.collection-head h2 { font-size:24px; margin:10px 0 18px; }
#collection-close { border:0; border-radius:50%; background:#e7e5d9; width:34px; height:34px; font-size:24px; }
.collection-toolbar { display:flex; gap:12px; }
.collection-toolbar label { flex:1; }
#collection-search { width:100%; border:1px solid #d8dccd; border-radius:10px; padding:12px 15px; background:#fffcf3; font:inherit; font-size:12px; color:var(--ink); }
#only-collected { padding:0 15px; background:#e9e7da; border:1px solid #d9decd; border-radius:10px; font-size:12px; }
#only-collected[aria-pressed=true] { background:#526e5b; color:#fff; }
#collection-result { color:#778172; font-size:10px; margin:16px 0 12px; }
#collection-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(124px,auto); gap:12px; padding:0 3px 22px; overflow-y:auto; min-height:0; align-content:start; }
.collect-card { position:relative; border:1px solid #dedfd0; background:#fbf7ec; border-radius:13px; overflow:hidden; transition:transform .15s,box-shadow .15s; }
.collect-card:hover { transform:translateY(-3px); box-shadow:0 7px 18px #445a3712; }
.collect-open { display:flex; flex-direction:column; align-items:center; width:100%; border:0; padding:4px 10px 16px; background:transparent; text-align:center; }
.collect-open:disabled { opacity:.48; cursor:not-allowed; }
.collect-model { width:100%; height:110px; object-fit:contain; font-size:68px; line-height:110px; color:#98a78b; background:radial-gradient(ellipse at 50% 70%,#dce3cc 0,transparent 65%); }
.collect-name { font-size:12px; font-weight:550; margin-top:4px; max-width:100%; overflow-wrap:anywhere; }
.collect-meta { color:#8a8e7b; font-size:9px; margin-top:7px; }
.collect-card.is-entry .collect-open { align-items:flex-start; text-align:left; padding:16px 35px 16px 14px; height:100%; }
.collect-card.is-entry .collect-name { font-size:14px; margin-top:2px; }
.collect-description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:11px; line-height:1.6; margin-top:9px; color:var(--ink); opacity:.65; }
.collect-card.is-entry .collect-meta { margin-top:auto; padding-top:10px; }
.collect-star { position:absolute; top:8px; right:8px; width:27px; height:27px; border:0; border-radius:50%; color:#8e987e; background:#fffbedde; font-size:17px; }
.collect-star[aria-pressed=true] { color:#b7873f; background:#f5e6bb; }
.collection-footer { position:sticky; bottom:0; background:#f2efe5; height:auto; min-height:65px; padding:12px 0; margin:0; gap:12px; letter-spacing:0; }
.empty-collection { grid-column:1/-1; padding:40px; font-size:13px; text-align:center; color:#7b8475; }
@media(max-width:600px) {
  #collection-panel { width:94vw; padding:18px 16px 0; max-height:90svh; }
  #collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .collection-toolbar { gap:6px; } #only-collected { padding:0 9px; font-size:11px; }
  .collection-footer { flex-direction:column; align-items:stretch; }
  .collection-head h2 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { .collect-card { transition:none; } }