:root { font-family: Arial, sans-serif; color: #222; background: #f3f3f3; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(920px, 100%); margin: 0 auto; padding: 16px; }
h1, h2, p { margin-top: 0; }
header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.panel, .card, dialog { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
.panel { max-width: 420px; margin: 12vh auto 0; }
label { display: block; font-weight: 700; margin: 14px 0 6px; }
input, textarea { width: 100%; font: inherit; font-size: 18px; padding: 12px; border: 1px solid #aaa; border-radius: 6px; }
textarea { resize: vertical; }
button { min-height: 46px; border: 0; border-radius: 6px; padding: 10px 16px; font: inherit; font-weight: 700; color: #fff; background: #e65300; cursor: pointer; }
button.secondary { color: #222; background: #e7e7e7; }
button:disabled { opacity: .45; cursor: default; }
#main-photo { display: block; width: 100%; max-height: 68vh; object-fit: contain; background: #eee; border-radius: 6px; }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px; }
.thumbs button { flex: 0 0 auto; width: 74px; height: 58px; min-height: 0; padding: 0; overflow: hidden; border: 2px solid transparent; background: #eee; }
.thumbs button.active { border-color: #e65300; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.actions button:last-child { flex: 1; }
.status { min-height: 20px; margin: 8px 0 0; color: #137333; }
.error { color: #b00020; }
dialog { width: min(760px, calc(100% - 24px)); max-height: 88vh; }
dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.machine-list { display: grid; gap: 6px; }
.machine-list button { display: flex; justify-content: space-between; text-align: left; color: #222; background: #eee; }
.machine-list button.done { background: #dff1df; }
@media (max-width: 600px) {
  main { padding: 10px; }
  header { align-items: flex-start; }
  header h1 { font-size: 22px; margin-bottom: 4px; }
  .card { padding: 12px; }
  .card h2 { font-size: 20px; }
  #main-photo { max-height: 54vh; }
}