.card-tool { display: grid; gap: 2em; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .card-tool { grid-template-columns: minmax(0, 1fr) 280px; } }
.card-tool fieldset { border: 1px dashed rgba(180, 255, 216, 0.4); margin: 0 0 1.5em; padding: 0.5em 1em 1em; }
.card-tool legend { color: #b4ffd8; padding: 0 0.5em; }
.card-tool .fields { display: grid; gap: 0.75em 1em; grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr)); }
.card-tool label { display: flex; flex-direction: column; font-size: 0.85em; line-height: 1.3; gap: 0.2em; }
.card-tool input, .card-tool select, .card-tool button {
  font: inherit; font-size: 1em; padding: 0.35em 0.5em; color: #f4fff8;
  background: rgba(244, 255, 248, 0.08); border: 1px solid rgba(180, 255, 216, 0.4); border-radius: 4px;
}
.card-tool button { cursor: pointer; color: #071c11; background: #6bf7b2; border-color: #6bf7b2; }
.card-tool button.secondary { color: #f4fff8; background: transparent; border-color: rgba(180, 255, 216, 0.4); }
.card-tool .actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1em 0; }
.card-tool .errors { color: #ffb4b4; margin: 0 0 1em; padding-left: 1.2em; }
.card-tool .hint { font-size: 0.8em; opacity: 0.7; line-height: 1.4; margin: 0.5em 0 0; }
#card-wrap svg { display: block; width: 100%; max-width: 280px; height: auto; border-radius: 12px; }
#card-empty { opacity: 0.6; }
#embed-code { width: 100%; min-height: 6em; font-size: 0.75em; line-height: 1.3; }
#status { min-height: 1.5em; font-size: 0.85em; }
.card-detail table { font-size: 0.8em; }
.card-detail th, .card-detail td { padding: 0.3em 0.6em; }
@media print {
  @page { margin: 0.5in; }
  html { background: #fff !important; padding: 0 !important; }
  body * { visibility: hidden; }
  #card-wrap, #card-wrap * { visibility: visible; }
  #card-wrap { position: absolute; left: 0; top: 0; }
  #card-wrap svg { width: 2.5in; max-width: none; height: 3.5in; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}