/* Make Your Profile Card (js/card.js) */
#cardMount { container-type: inline-size; }
.cardgen { display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; }
.cardgen-form { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cardgen-form label { font-weight: bold; color: var(--hot-text); margin-top: 3px; }
.cardgen-form input:not([type=file]), .cardgen-form select {
  width: 100%; min-width: 0; font: 11px var(--font); padding: 3px 4px; border: 1px solid #7f9db9; background: #fff; color: #000;
}
.cardgen-form .fine { margin: 1px 0 2px; }
.cardgen-file { display: block; color: var(--link) !important; font-weight: normal !important; }
.cardgen-file input { display: block; width: 100%; max-width: 100%; margin-top: 2px; font: 10px var(--font); }
.cardgen-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cardgen-btns button {
  flex: 1 1 auto; padding: 4px 8px; background: linear-gradient(#fff, #e3e3db); border: 1px solid #003c74;
  border-radius: 3px; color: #000; font-weight: bold; white-space: nowrap;
}
.cardgen-btns button:hover { background: linear-gradient(#fffbe6, #ffd9a8); }
.cardgen-btns button[data-cg=download] { background: linear-gradient(#ffe6b3, #ff9933); border-color: #b34700; }
.cardgen-preview { min-width: 0; align-self: start; order: -1; }
.cardgen-preview .fine { margin: 4px 0 0; }
.cardgen-preview canvas { cursor: zoom-in; }
.cardgen-preview canvas { display: block; width: 100%; height: auto; border: 1px solid #999; background: #e5e5e5; box-shadow: 2px 2px 0 rgba(0,0,0,.15); }

/* the card column is narrow (~490px): keep the preview full width above the form so it stays readable */