Выбор образа при создании машины карточками: название системы, размер, дата загрузки и поиск, когда образов много

web/static/app.css

@@ -333,6 +333,25 @@ hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
 .option input:checked + .option-body .option-check { border: 5px solid var(--brand); }
 .option-title { font-weight: 650; font-size: 14px; }
 .option-text { color: var(--text-2); font-size: 12.5px; }
+/* Выбор образа в форме создания машины */
+.image-picker { display: grid; gap: 10px; }
+.image-list { display: grid; gap: 8px; max-height: 360px; overflow-y: auto; padding: 2px; }
+.image-option { position: relative; display: block; cursor: pointer; }
+.image-option[hidden] { display: none; }
+.image-option input { position: absolute; opacity: 0; pointer-events: none; }
+.image-option-body { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .15s, background .15s; }
+.image-option:hover .image-option-body { border-color: var(--border-strong); }
+.image-option input:checked + .image-option-body { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface)); box-shadow: 0 0 0 4px var(--focus); }
+.image-option input:focus-visible + .image-option-body { box-shadow: 0 0 0 4px var(--focus); }
+.image-option input:checked + .image-option-body .option-check { border: 5px solid var(--brand); }
+.image-option .grow { flex: 1; display: grid; gap: 2px; min-width: 0; }
+.image-title { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.image-meta { color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 560px) {
+  .image-option .list-icon { display: none; }
+  .image-title, .image-meta { white-space: normal; overflow-wrap: anywhere; }
+}
+
 /* Расписание копий: день недели и список машин видны, только когда нужны (без :has — видны всегда). */
 .schedule-form:has(input[name=frequency][value=daily]:checked) [data-when=weekly],
 .schedule-form:has(input[name=machines][value=all]:checked) [data-when=chosen] { display: none; }