/* ID Card Designer (js/carddesign.js) */
.cd-wrap { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; }
.cd-preview { min-height: 220px; }
.cd-stage { display: flex; justify-content: center; align-items: center; padding: 18px; background: repeating-conic-gradient(#e9edf3 0% 25%, #f5f7fa 0% 50%) 0 / 18px 18px; border-radius: 10px; }
.cd-card { box-shadow: 0 3px 14px rgba(0,0,0,.18); }
.cd-el { outline: 1px dashed transparent; }
.cd-el:hover { outline-color: rgba(46,111,196,.6); }
.cd-controls { position: sticky; top: 8px; }
.cd-lbl { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand); margin: 12px 0 4px; }
.cd-controls select, .cd-controls input[type=color] { max-width: 170px; }
@media (max-width: 820px) { .cd-wrap { grid-template-columns: 1fr; } .cd-controls { position: static; } }