.card { margin: 14px 0; }
.cols { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
.fld { margin: 10px 0; }
.fld label { display: block; font-weight: 600; margin-bottom: 3px; }
.fld input, .fld textarea, .fld select { width: 100%; }
.fld small { display: block; color: var(--muted); margin-top: 3px; }
#code { width: 100%; min-height: 380px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; white-space: pre; }
#problems { margin: 6px 0; padding-left: 20px; }
#problems .bad { color: #d9534f; }
#problems .warn { color: #c98a00; }
.good { color: #2e9e6b; font-weight: 600; }
.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }