:root{color-scheme: light dark}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;padding:0;line-height:1.5}
.container{max-width:960px;margin:0 auto;padding:24px}
header .subtitle{opacity:.8}
.controls{background:Canvas;border:1px solid CanvasText;border-opacity:.1;border-radius:12px;padding:16px;margin:16px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.group label{display:block;margin-bottom:6px;font-weight:600}
.group input[type="number"], .group select{width:100%;padding:8px;border-radius:8px;border:1px solid #ccc;background:Field;color:FieldText}
.dropzone{display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed #aaa;border-radius:16px;min-height:160px;margin:16px 0;padding:16px;cursor:pointer}
.dropzone:focus-within{outline:2px solid #4a90e2}
.dropzone input{display:block;margin-bottom:12px}
.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.item{border:1px solid #ddd;border-radius:12px;padding:12px}
.thumb{width:100%;height:160px;object-fit:cover;border-radius:8px;background:#f5f5f5}
.row{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.btn{padding:8px 10px;border-radius:8px;border:1px solid #ccc;background:#f6f6f6;cursor:pointer}
.btn.primary{background:#4a90e2;color:#fff;border-color:#4a90e2}
.notice{padding:12px;border:1px solid #f0ad4e;background:#fff7e6;border-radius:8px}

@media (prefers-color-scheme: dark){
  .controls,.item{border-color:#333}
  .dropzone{border-color:#555}
  .group input,.group select{border-color:#444}
}