*{box-sizing:border-box}body{font-family:system-ui,Arial,sans-serif;margin:0}header{padding:12px 20px;background:#111;color:#fff}main{padding:16px}.container{max-width:1100px;margin:0 auto}nav a{color:#fff;margin-right:14px;text-decoration:none}table{width:100%;border-collapse:collapse;margin-top:12px}th,td{border:1px solid #ddd;padding:8px}th{background:#f6f6f6;text-align:left}.btn{padding:8px 12px;border:1px solid #333;background:#f4f4f4;cursor:pointer;border-radius:6px}.btn-primary{background:#007bff;color:#fff;border-color:#007bff}.input{padding:7px 10px;border:1px solid #ccc;border-radius:6px;width:100%}.card{border:1px solid #ddd;border-radius:12px;padding:12px;margin:8px 0;box-shadow:0 1px 2px rgba(0,0,0,.03)}img.thumb{max-width:80px;height:auto;display:block}.flex{display:flex;gap:8px;align-items:center}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
.product-card { display:flex; flex-direction:column; align-items:stretch; }
.product-card img { width: 100%; height: 160px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 10px; }
.product-card .noimg { width: 100%; height: 160px; display:flex; align-items:center; justify-content:center; background:#fafafa; border:1px dashed #ccc; border-radius:10px; color:#999; }
.product-card .info { margin-top: 8px; }
.product-card .name { font-weight: 600; }
.product-card .code, .product-card .meta { font-size: 12px; color: #555; }
.product-card .qty { margin-top: 8px; }
.card label { display:block; font-weight:600; margin-bottom:4px; }
.card .input { margin-bottom:8px; }
table input.input { min-width: 100px; }