.collection-dialog {
  width: min(620px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 24px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--board-accent);
  border-radius: var(--radius-card);
  color: var(--ink);
  background: var(--paper);
  font: var(--text-body)/1.5 var(--card-font-body);
}
.collection-dialog::backdrop { background: rgb(57 43 33 / 45%); }
.collection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.collection-heading h2 { margin: 0; font: 400 26px/1.2 var(--card-font-title); }
.collection-eyebrow { margin: 0 0 var(--space-1); color: var(--soft); font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.collection-close { width: var(--touch-target); height: var(--touch-target); flex: none; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: var(--paper); font: 400 26px/1 var(--font-body); cursor: pointer; }
.collection-profile-label, .collection-import-form > label, .collection-manual-form > label { display: block; margin: 0 0 var(--space-2); font-weight: 700; }
.collection-control { min-height: var(--touch-target); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: var(--paper); font: inherit; }
.collection-dialog select.collection-control { width: 100%; margin-bottom: var(--space-3); }
.collection-local-note { margin: 0 0 var(--space-4); padding: 10px 12px; border-left: 3px solid var(--board-accent); color: var(--soft); background: var(--tint); font-size: var(--text-label); }
.collection-import-row { display: flex; align-items: stretch; gap: var(--space-2); }
.collection-manual-form { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--edge); }
.collection-game-suggestions { display: grid; gap: 4px; margin: 5px 0 0; padding: 0; list-style: none; }
.collection-game-suggestions:empty { display: none; }
.collection-game-suggestion { width: 100%; min-height: var(--touch-target); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: var(--paper); text-align: left; font: inherit; cursor: pointer; }
.collection-game-suggestion:hover { border-color: var(--accent); background: var(--tint); }
.collection-owned-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.collection-owned-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 7px 0; border-bottom: 1px solid var(--edge); }
.collection-owned-list li > span { min-width: 0; overflow-wrap: anywhere; }
.collection-remove-game { min-height: 38px; flex: none; padding-block: 5px; font-size: var(--text-label); }
.collection-import-row input { min-width: 0; flex: 1; }
.collection-button { min-height: var(--touch-target); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: var(--paper); font: 700 var(--text-control)/1.2 var(--font-body); cursor: pointer; }
.collection-primary { border-color: var(--accent); color: var(--paper); background: var(--accent); }
.collection-button:hover:not(:disabled), .collection-close:hover { border-color: var(--accent); background: var(--tint); color: var(--ink); }
.collection-primary:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.collection-button:disabled { cursor: not-allowed; opacity: .58; }
.collection-status { min-height: 1.5em; margin: var(--space-2) 0; color: var(--soft); font-weight: 700; }
.collection-status:empty { display: none; min-height: 0; margin: 0; }
.collection-status[data-kind="error"] { color: var(--error); }
.collection-status[data-kind="success"] { color: var(--tab-tags); }
.collection-results { padding-top: 0; }
.collection-results h3 { margin: var(--space-4) 0 var(--space-2); font: 600 17px/1.3 var(--font-heading); }
.collection-empty, .collection-updated { color: var(--soft); font-size: var(--text-label); }
.collection-summary { margin: 0 0 var(--space-1); font-weight: 800; }
.collection-updated { margin: 0 0 var(--space-3); }
.collection-missing { max-height: 220px; margin: 0; padding: 0 0 0 22px; overflow: auto; }
.collection-missing li { padding: 3px 0; overflow-wrap: anywhere; }
.collection-confirm { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--board-accent); background: var(--tint); }
.collection-confirm p { margin: 0 0 var(--space-2); }
.collection-actions, .collection-footer { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.collection-footer { justify-content: space-between; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--edge); }
.collection-entry-count { display: inline-grid; min-width: 22px; min-height: 22px; place-items: center; margin-left: 5px; padding: 0 5px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; line-height: 1; }
.gift-collection-open { display: flex; width: 100%; min-width: 0; padding-block: 4px; white-space: normal; overflow-wrap: anywhere; }
.gift-collection-preferences { min-width: 0; margin: 8px 0 14px; padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--board-accent); border-radius: var(--radius-control); background: var(--tint); }
.gift-collection-preferences h3 { margin: 0 0 8px; font: 600 17px/1.3 var(--font-heading); }
.gift-collection-preferences .field-label { display: block; margin: 8px 0 5px; }
.gift-collection-preferences .field select, .gift-collection-row select { width: 100%; min-width: 0; }
.gift-collection-row { display: flex; min-width: 0; align-items: stretch; gap: 8px; margin-bottom: 8px; }
.gift-collection-row select { flex: 1; }
.gift-collection-row .btn { flex: none; max-width: 45%; white-space: normal; }
.gift-collection-preferences > .helper-text { margin: 6px 0; }
.collection-dialog :focus-visible { outline: 3px solid var(--board-accent); outline-offset: 2px; }
@media (max-width: 620px) {
  header.masthead { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .logo-row { grid-row: 1; width: 100%; min-width: 0; }
  .tagline { display: none; }
  .brand-wordmark { width: 122px; max-width: none; flex: none; }
  .group-entry { grid-row: 2; width: 100%; min-width: 0; flex-wrap: wrap; gap: 6px; }
}
@media (max-width: 520px) {
  .collection-dialog { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); padding: 18px; }
  .collection-import-row { flex-direction: column; }
  .collection-import-row .collection-button { width: 100%; }
  .collection-footer > .collection-button { flex: 1; }
  .gift-collection-row { flex-direction: column; }
  .gift-collection-row .btn { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .collection-dialog *, .collection-entry-count { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .collection-dialog, .collection-local-note, .collection-confirm, .collection-control, .collection-button, .collection-close { border: 1px solid CanvasText; }
  .collection-dialog::backdrop { background: Canvas; }
}